@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> -->
                </ul>

                <div class="tab-content">

                    <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">Voucher</h2>
                                @if(session('success'))
                                    <div class="position-relative alert alert-success alert-icon alert-dismissible  border border-success fade show" role="alert"">
                                        {!! session('success') !!}
                                    </div>
                                    {{ session()->forget('success') }}
                                @endif
                                @if(session('error'))
                                    <div class="position-relative alert alert-danger alert-icon alert-dismissible  border border-danger fade show" role="alert"">
                                        {!! session('error') !!}
                                    </div>
                                    {{ session()->forget('error') }}
                                @endif
                            </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="{{url('AddVoucher')}}" class="btn btn-sm btn-primary fw-normal fs-15 ">
                                                        <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-voucher" width="100%"
                                                cellspacing="0">
                                                <thead>
                                                    <tr>
                                                        <th>id</th>

                                                        <th>Kode Voucher</th>
                                                        <th>Tipe Diskon</th>
                                                        <th>Jumlah Diskon</th>
                                                        <th>Tanggal Mulai</th>
                                                        <th>Tanggal Berakhir</th>
                                                        <th>Status</th>
                                                        <th>
                                                            {{-- <span><i class="fa-solid fa-ellipsis-vertical"></i></span> --}}
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </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-voucher').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("getVoucher") }}',
            type: 'POST',
            data: function (d) {
            },
        },
        columns: [
            {
                data: 'id',
                visible: false,
            },
            { data: 'code' },
            { data: 'discount_type' },
            {
                data: 'discount_value',
                render: function (data, type, row, meta) {
                    if (row.discount_type == 'percentage') {
                        var html = data + '%';

                    } else if (row.discount_type == 'fixed') {
                        var html = formatRupiah(data, "Rp ");
                    } else {
                        var html = data;
                    }
                    return html;
                }
            },

            { data: 'start_date' },
            { data: 'end_date' },
            {
                data: 'is_active',
                render: function (data, type, row, meta) {
                    if (data == '1') {
                        var html = 'Aktif';
                    } else {
                        var html = 'Tidak Aktif';
                    }
                    return html;
                }
            },
            {
                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('EditVoucher') }}/' + row.id + '">Edit</a>' +
                        '<a class="dropdown-item fw-normal" onclick="return confirm(\'Apakah kamu yakin untuk menghapus data user ini?\');" href="{{ url('deleteVoucher') }}/' + row.id + '">Hapus</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';
    })

    function formatRupiah(angka, prefix) {
        // Pastikan input berupa string
        var number_string = angka.toString().replace(/[^,\d]/g, ""),
            split = number_string.split(","),
            sisa = split[0].length % 3,
            rupiah = split[0].substr(0, sisa),
            ribuan = split[0].substr(sisa).match(/\d{3}/gi);

        // Menambahkan titik jika ada ribuan
        if (ribuan) {
            separator = sisa ? "." : "";
            rupiah += separator + ribuan.join(".");
        }

        rupiah = split[1] !== undefined ? rupiah + "," + split[1] : rupiah;
        return prefix === undefined ? rupiah : prefix + rupiah;
    }

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