@extends('Layouts_admin.index')
@section('content')
    <!-- widget -->
    <div class="container pt-6 px-md-7 px-1">
        <div class="row">
            <div class="col-lg-12">
                <div class="col-lg-12">
                    <ul class="nav nav-tabs nav-pills">
                        <!-- <li class="nav-item"> 
                            <a class="nav-link active" data-bs-toggle="tab" href="#tab1-1">
                                <span>Job Parent</span>
                            </a>
                        </li> -->
                        <li class="nav-item"> 
                            <a class="nav-link active" data-bs-toggle="tab" href="#tab1-3">
                                <span>Job</span>
                            </a>
                        </li>
                        <li class="nav-item"> 
                            <a class="nav-link" data-bs-toggle="tab" href="#tab1-2">
                                <span>Log Upload</span>
                            </a> 
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane fade" id="tab1-1">
                            <div class="card rounded pt-0 pb-0">
                                <div class="card-body pb-0 px-4 pt-2">
                                    <h2 class="text-secondary fw-semibold fs-22">Job Parent</h2>
                                </div>
                                <div class="card-body px-0 pt-4 pb-0">
                                    <div class="row">
                                        <div class="justify-content-between d-flex mb-4">
                                            <div class="d-flex">
                                                <div class="ms-2">
                                                    <div class="nav-item dropdown p-0">
                                                        <a href="#" class="btn btn-sm btn-primary fw-normal fs-15 dropdown" data-bs-toggle="dropdown">
                                                            <span class="d-none d-md-block">Tambah </span><span class="fs-16 fw-normal ms-0 ms-md-2"><i class='bx bx-plus'></i></span> 
                                                        </a>
                                                        <div class="dropdown-menu py-0 border-0">
                                                            <a class="dropdown-item fw-normal" href="#">
                                                                <a href="#" class="btn btn-primary border-0 py-2 px-10 fw-normal fs-12" data-bs-toggle="modal" data-bs-target="#uploadCategory">Upload File<span class="ms-2"><i class="fa-solid fa-up-long"></i></span></a>
                                                            </a>
                                                            <a class="dropdown-item fw-normal" href="#">
                                                                <a href="#" class="btn btn-primary border-0 py-2 px-9 fw-normal fs-12" data-bs-toggle="modal" data-bs-target="#courseCategory">Tambah Kategori<span class="ms-2"><i class="fa-solid fa-plus"></i></span></a>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>  
                                            </div> 
                                            <div class="ms-auto me-4">
                                                <a href="{{ url('/ExcelJobParent') }}" class="btn btn-sm btn-primary fw-normal fs-15 dropdown">
                                                    <span class="d-none d-md-block">Excel </span><span class="fs-16 fw-normal ms-0 ms-md-2"><i class="fa-solid fa-download"></i></span> 
                                                </a>
                                            </div>
                                        </div>

                                            <!-- <div class="col-lg-12">
                                            <div class="collapse" id="collapseExample">
                                                <div class="mb-3">
                                                    <div class="col-lg-12">
                                                        <div class="row justify-content-center">
                                                            
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> -->
                                    </div>
                                </div>
                                <div class="card-body px-4 pt-2 pb-4">
                                    <div class="tab-content mt-0" id="nav-tabContent">
                                        <div class="tab-pane fade show active p-0 pt-0" id="nav-home" role="tabpanel" 
                                        aria-labelledby="nav-home-tab">
                                    <!-- <div class="col-lg-3 mb-3">
                                        <a href="#" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#courseCategory">
                                            <span class="text-light fw-normal fs-15 mb-1">+ Kategori </span> 
                                        </a>
                                    </div> -->

                                    <!-- Modal -->
                                    <div class="collapse" id="collapseExample">
                                        <div class="mb-3">
                                            <div class="col-lg-12">
                                                <div class="row">
                                                    <div class="col-lg-3 px-2 py-0">
                                                        <div class="form-group mb-0">
                                                            <select class="form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 155px; height: 40px;">
                                                                <option selected>Semua</option>
                                                                <option value="1">Eksternal</option>
                                                                <option value="1">Internal</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3 p-0">
                                                        <div class="form-group mb-0">
                                                            <select class="form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 155px; height: 40px;">
                                                                <option selected>Job</option>
                                                                <option value="1">Human Capital</option>
                                                                <option value="2">Collector</option>
                                                                <option value="2">Customer Service</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3 p-0">
                                                        <div class="form-group mb-0">
                                                            <select class="form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 155px; height: 40px;">
                                                                <option selected>Status Personil</option>
                                                                <option value="1">TAD</option>
                                                                <option value="2">Organik</option>
                                                                <option value="2">Public</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3 p-0">
                                                        <div class="form-group mb-0">
                                                            <select class="form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 155px; height: 40px;">
                                                                <option selected>Pelatihan</option>
                                                                <option value="1">Rekrutmen</option>
                                                                <option value="2">Cleaning Service</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-bordered" id="table-data" width="100%" cellspacing="0">
                                            <thead>
                                                <tr>
                                                    <th>Kode</th>
                                                    <th class="text-center">Nama Kategori</th>
                                                    <th><span><i class="fa-solid fa-pen-to-square"></i></span></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade show active" id="tab1-3">
                            <div class="card rounded pt-0 pb-0">
                                <div class="card-body pb-0 px-4 pt-2">
                                    <h2 class="text-secondary fw-semibold fs-22">Job</h2>
                                </div>
                                <div class="card-body px-0 pt-4 pb-0">
                                    <div class="row">
                                        <div class="justify-content-between justify-content-md-end d-flex mb-4">

                                            <div class="d-flex">
                                                <div class="ms-2">
                                                    <div class="nav-item dropdown p-0">
                                                        <a href="#" class="btn btn-sm btn-primary fw-normal fs-15 dropdown" data-bs-toggle="dropdown">
                                                            <span class="d-none d-md-block">Tambah </span><span class="fs-16 fw-normal ms-0 ms-md-2"><i class='bx bx-plus'></i></span> 
                                                        </a>
                                                        <div class="dropdown-menu py-0 border-0">
                                                            <a class="dropdown-item fw-normal" href="#">
                                                                <a href="#" class="btn btn-primary border-0 py-2 px-10 fw-normal fs-12" data-bs-toggle="modal" data-bs-target="#uploadCategory">Upload File<span class="ms-2"><i class="fa-solid fa-up-long"></i></span></a>
                                                            </a>
                                                            <a class="dropdown-item fw-normal" href="#">
                                                                <a href="#" class="btn btn-primary border-0 py-2 px-9 fw-normal fs-12" data-bs-toggle="modal" data-bs-target="#courseCategory">Tambah Kategori<span class="ms-2"><i class="fa-solid fa-plus"></i></span></a>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>  
                                            </div> 
                                            <div class="ms-auto me-4">
                                                <a href="{{ url('/ExcelJobChild') }}" class="btn btn-sm btn-primary fw-normal fs-15 dropdown">
                                                    <span class="d-none d-md-block">Excel </span><span class="fs-16 fw-normal ms-0 ms-md-2"><i class="fa-solid fa-download"></i></span> 
                                                </a>
                                            </div>
                                        </div>
                                            <!-- <div class="col-lg-12">
                                            <div class="collapse" id="collapseExample">
                                                <div class="mb-3">
                                                    <div class="col-lg-12">
                                                        <div class="row justify-content-center">
                                                            
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> -->
                                    </div>
                                </div>
                                <div class="card-body px-4 pt-2 pb-4">
                                    <div class="tab-content mt-0" id="nav-tabContent">
                                        <div class="tab-pane fade show active p-0 pt-0" id="nav-home" role="tabpanel" 
                                        aria-labelledby="nav-home-tab">
                                    <!-- <div class="col-lg-3 mb-3">
                                        <a href="#" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#courseCategory">
                                            <span class="text-light fw-normal fs-15 mb-1">+ Kategori </span> 
                                        </a>
                                    </div> -->

                                    <!-- Modal -->
                                    <div class="collapse" id="collapseExample">
                                        <div class="mb-3">
                                            <div class="col-lg-12">
                                                <div class="row">
                                                    <div class="col-lg-3 px-2 py-0">
                                                        <div class="form-group mb-0">
                                                            <select class="form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 155px; height: 40px;">
                                                                <option selected>Semua</option>
                                                                <option value="1">Eksternal</option>
                                                                <option value="1">Internal</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3 p-0">
                                                        <div class="form-group mb-0">
                                                            <select class="form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 155px; height: 40px;">
                                                                <option selected>Job</option>
                                                                <option value="1">Human Capital</option>
                                                                <option value="2">Collector</option>
                                                                <option value="2">Customer Service</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3 p-0">
                                                        <div class="form-group mb-0">
                                                            <select class="form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 155px; height: 40px;">
                                                                <option selected>Status Personil</option>
                                                                <option value="1">TAD</option>
                                                                <option value="2">Organik</option>
                                                                <option value="2">Public</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3 p-0">
                                                        <div class="form-group mb-0">
                                                            <select class="form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 155px; height: 40px;">
                                                                <option selected>Pelatihan</option>
                                                                <option value="1">Rekrutmen</option>
                                                                <option value="2">Cleaning Service</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-bordered" id="table-data-sub" width="100%" cellspacing="0">
                                            <thead>
                                                <tr>
                                                    <th>id</th>
                                                    
                                                    <th>Kode Job Parent</th>
                                                    <th>Nama Job Parent</th>
                                                    <th>Kode Job Child</th>
                                                    <th class="text-center">Nama Job Child</th>
                                                    <th><span><i class="fa-solid fa-pen-to-square"></i></span></th>
                                                    <!-- <th><span><i class="fa-solid fa-pen-to-square"></i></span></th> -->
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab1-2">
                            <div class="card">
                                <div class="card-header pb-4 py-5 px-6">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="d-flex">
                                            <div class="float-end d-flex">
                                                <div class="opendown-wrapper">
                                                    <button onclick="openDown(this)" class="btn btn-sm btn-primary fs-14 fw-normal"><span class="d-none d-md-block">Filter</span><span><i class="fa-solid fa-filter ms-md-2"></i></span> 
                                                    </button>
                                                    <div class="opendown-menu">
                                                        <form action="" id="filters-form">
                                                            <div class="opendown-item">
                                                                <div class="form-group mb-0">
                                                                    <select id="status-log" name="status-log" class="form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 155px; height: 40px;">
                                                                        <option value="">Semua</option>
                                                                        <option value="success">Berhasil</option>
                                                                        <option value="failed">Gagal</option>
                                                                    </select>
                                                                </div> 
                                                            </div>
                                                            <div class="opendown-item">
                                                                <div class="p-1 bg-light rounded d-flex justify-content-between align-items-center" id="reportrange-new" style="cursor: pointer;z-index: 1;" data-toggle="tooltip" title="Saat berwarna abu, maka menampilkan semua tanggal.">
                                                                    {{-- <input type="text" id="tanggal" class="form-control" disabled style="width: 100%; font-size: 0.65rem; display: inline;"> --}}
                                                                    <div class="fs-14">Pilih Tanggal</div>
                                                                    <div class="mx-2"><i class="fa fa-caret-down"></i></div>
                                                                    <input type="hidden" name="tanggal-start" id="filter-tanggal-start" value="{{  request()->input('tanggal-start') != '' ? request()->input('tanggal-start') : '' }}">
                                                                    <input type="hidden" name="tanggal-end" id="filter-tanggal-end" value="{{  request()->input('tanggal-end') != '' ? request()->input('tanggal-end') : '' }}">
                                                                </div>
                                                            </div>
                                                            <div class="opendown-item">
                                                                <button type="button" id="btn-filter-log" onclick="srcBtn(this)" class="search-done btn btn-outline-primary fs-13" style="height: 38px; width: 100%;">Cari</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="d-flex">
                                            <div class="float-end d-flex">
                                                <div class="nav-item dropdown">
                                                    <button class="dropdown btn btn-sm btn-primary fs-14 fw-normal" data-bs-toggle="dropdown">
                                                        <span>Download <i class="fa-solid fa-download ms-2"></i></span> 
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item fw-normal" href="#">
                                                            <button onclick="exportData2('ExcelPesertaInternalLog', 0, null, dttablelog)" id="btn-download-logg" class="btn btn-primary border-0 fw-normal fs-12">Download Excel<span class="ms-2"><i class="fa-solid fa-up-long"></i></span></button>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body py-0">
                                    <div class="table-responsive">
                                        <table class="table table-hover" id="table-data-log" width="100%" cellspacing="0">
                                            <thead>
                                                <tr>
                                                    <th>Tanggal/Waktu Upload</th>
                                                    <th>Nama File</th>
                                                    <th>Judul</th>
                                                    <th>Status</th>
                                                    <th>Aksi</th>
                                                    <th>Baris</th>
                                                    <th>Deskripsi</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>  
                                </div>
                            </div>
                        </div>
            </div>
                </div>
            </div>
        </div>
    </div>
    <!-- widgetend -->

@endsection
@section('script')
<script type="text/javascript">
            function openDown(button) {
                let parent = button.closest('.opendown-wrapper');
                let choseChild = parent.children;
                let dMenu = choseChild[1];
                dMenu.classList.toggle('opened');
            };

            function srcBtn(button) {
                let parent = button.closest('.opendown-wrapper');
                let choseChild = parent.children;
                let dMenu = choseChild[1];
                dMenu.classList.toggle('opened');
            };

    </script>
<script>
    function uploadFileCategory(){
        if($('#formFileCategory').val().trim() == ''){
            $('#alert-error-category').html('Pilih file terlebih dahulu!')
            $('#alert-error-category').show();
            return false;
        }
        $('#preloader').show();
        $('#form-upload-category').submit();

    }

    $('#filters-form').submit(function(e){
        e.preventDefault();
        dttable.ajax.reload();
    });
    var dttable = $('#table-data').DataTable({
        "aLengthMenu":[
            [10, 30, 50, -1],
            [10, 30, 50, "All"]
        ],
        "language": {
            "paginate": {
                "first": "Awal",
                "previous": "Sebelumnya",
                "next": "Selanjutnya",
                "last": "Akhir"
            },
            "search": "Pencarian",
            "info": "Tampilan data _START_ sampai _END_ dari _TOTAL_ data",
            "lengthMenu": "Tampil <select>" +
                "<option value='10'>10</option>" +
                "<option value='30'>30</option>" +
                "<option value='50'>50</option>" +
                "<option value='10000000000'>All</option>" +
                "</select> Data"
        },
        serverSide: false,
        processing: true,
        ajax : {
            url: '{{ url("getCategory") }}',
            type: 'POST',
            data: function(d){},
        },
        columns: [
            { data: 'idnumber' },
            { data: 'name' },
            { 
                data: 'id',
                render: function(data,type,row,meta){
                    var html = 
                        '<ul class="list-unstyled float-end p-0">' +
                        '<li class="nav-item dropdown rounded-circle p-0 pe-2 bg-light px-3">' +
                        '<a href="#" class="dropdown link-dark px-0" data-bs-toggle="dropdown">' +
                        '<i class="fa-solid fa-ellipsis-vertical"></i>' +
                        '</a>' +
                        '<div class="dropdown-menu dropdown-menu-end p-0">' +
                        '<a class="dropdown-item fw-normal" href="{{ url('/EditCategory') }}/' + row.id + '">Edit</a>' +
                        '<a class="dropdown-item fw-normal" onclick="return confirm(\'Apakah kamu yakin untuk menghapus data user ini?\');" href="{{ url('/DeleteCategory') }}/' + row.id + '">Hapus</a>' +
                        '</div>' +
                        '</li>' +
                        '</ul>';
                    return html;
                }
            }
        ],
        "order": [[2, 'asc']] // Mengurutkan berdasarkan kolom kedua (indeks 1) secara ascending
    });


    var dttablesub = $('#table-data-sub').DataTable({
        "aLengthMenu":[
            [10, 30, 50, -1],
            [10, 30, 50, "All"]
        ],
        "language": {
            "paginate": {
                "first": "Awal",
                "previous": "Sebelumnya",
                "next": "Selanjutnya",
                "last": "Akhir"
            },
            "search": "Pencarian",
            "info": "Tampilan data _START_ sampai _END_ dari _TOTAL_ data",
            "lengthMenu": "Tampil <select>" +
            "<option value='10'>10</option>" +
            "<option value='30'>30</option>" +
            "<option value='50'>50</option>" +
            "<option value='10000000000'>All</option>" +
            "</select> Data"
        },
        serverSide: false,
        processing: true,
        ajax : {
            url: '{{ url("getSubCategory") }}',
            type: 'POST',
            data: function(d){
            },
        },
        columns: [
            { 
                data: 'id' ,
                visible: false,
            },
            { data: 'kd_job' },
            { data: 'job'},
            { data: 'idnumber' },
            
            { data: 'name' },
            { 
                data: 'id',
                render: function(data,type,row,meta){
                    var html = 
                            '<ul class="list-unstyled float-end p-0">' +
                                    '<li class="nav-item dropdown rounded-circle p-0 pe-2 bg-light px-3">' +
                                        '<a href="#" class="dropdown link-dark px-0" data-bs-toggle="dropdown">' +
                                            '<i class="fa-solid fa-ellipsis-vertical"></i>' +
                                        '</a>' +
                                        '<div class="dropdown-menu dropdown-menu-end p-0">' +
                                            '<a class="dropdown-item fw-normal" href="{{ url('/EditCategory') }}/' + row.id + '">Edit</a>' +
                                            // '<a class="dropdown-item fw-normal" href="{{ url('/DeleteCourse') }}/' + row.id + '">Delete</a>' +
                                        '</div>' +
                                    '</li>' +
                                '</ul>';
                    return html;
                }
            }
        ],
        "order": [[0, 'asc']] // Mengurutkan berdasarkan kolom pertama (indeks 0) secara ascending
    });


      dttablelog = $('#table-data-log').DataTable({
        serverSide: false,
        processing: true,
        ordering: false,
        ajax : {
            url: '{{ url("Log/DataUpload") }}',
            type: 'POST',
            data: function(d){
                d.status = $('[name="status-log"]').val();
                d.tanggalStart = $('[name="tanggal-start"]').val();
                d.tanggalEnd = $('[name="tanggal-end"]').val();
                d.menu = 'Job';
                // d.client = $('[name="client"]').val();
                // d.status = $('[name="status"]').val();
                // d.job = $('[name="job"]').val();
                // d.tanggalStart = $('[name="tanggal-start"]').val();
                // d.tanggalEnd = $('[name="tanggal-end"]').val();
            },
                // processData: false,
            },
            columns: [
            { 
                data: 'created_at',
                
            },
            {
                data: 'filename',
            },
            {
                data: 'title',
            },
            {
                data: 'code',
            },
            {
                data: 'event',
            },
            {
                data: 'row',
            },
            {
                data: 'deskripsi',
            },

                ]
            });

      $('#btn-filter-log').on('click', function(){
        dttablelog.ajax.reload()
      })

      $('#btn-download-log').on('click', function(){
        location.href = "{{ url('ExcelLogUpload') }}?status=" + $('#status-log').val() + '&startDate=' + $('[name="tanggal-start"]').val() + '&endDate=' + $('[name="tanggal-end"]').val() + '&menu=Job';
    })

    // dttable
    //   .order([0, 'desc'])
    //   .draw();
</script>
@endsection