@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])


    <div class="section-first">
        <div class="card shadow-lg mx-4">
            <div class="card-body p-3">
                <div class="row gx-4">
                    <div class="col-lg">
                        <div class="nav-wrapper">
                            {{-- check authorize add --}}
                            @if ($authorize->add == '1')
                                {{-- button execute --}}
                                <button class="btn btn-primary mb-0"
                                    onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i class="fas fa-plus me-1">
                                    </i><span class="font-weight-bold">
                                        ADD</button>
                            @endif
                            <button class="btn btn-success btn-sm mb-0 ms-2"
                                style="padding: 4px 10px; line-height: 1.2; border-radius: 4px; border-radius: 4px;" data-bs-toggle="tooltip"
                                data-bs-placement="top" title="Instruksi Kerja Menu Plan"
                                onclick="window.open('https://drive.google.com/file/d/1JQDwiGxVDDV6hVCZYgSqVVMVOE6hfeSe/view?usp=drive_link', '_blank')">
                                <i class="fas fa-info-circle" style="font-size: 1rem;"></i>
                            </button>
                            <input type="hidden" id="auth-add" name="auth-add" value="{{ $authorize->add }}">
                            <input type="hidden" id="auth-edit" name="auth-edit" value="{{ $authorize->edit }}">
                            <input type="hidden" id="auth-delete" name="auth-delete" value="{{ $authorize->delete }}">
                            <input type="hidden" id="auth-approval" name="auth-approval" value="{{ $authorize->approval }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <form>
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Filter {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <!-- Tanggal Transaksi -->
                                <div class="col-lg-6">
                                    <div class="row mb-3">
                                        <div class="col-lg-4">
                                            <label for="inputdate" class="form-label">Date</label>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="input-group">
                                                <input type="date" class="form-control" id="start-date" name="start-date"
                                                    placeholder="Date From" max="2026-10-04">
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="input-group">
                                                <input type="date" class="form-control" id="end-date" name="end-date"
                                                    placeholder="Date To">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="row mb-3">
                                        <div class="col-lg-4">
                                            <label for="inputCust" class="form-label me-2"
                                                style="min-width: 150px;">ID</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <div class="flex flex-col mb-2 input-group">
                                                <input type="text" id="id" name="id" class="form-control" value="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">

                                <!-- ID Transaksi -->
                                <div class="col-lg-6">
                                    <div class="row mb-3">
                                        <div class="col-lg-4">
                                            <label for="inputCust" class="form-label me-2"
                                                style="min-width: 150px;">Catering</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <div class="flex flex-col mb-2 input-group">
                                                <select id="cateringSelect" name="report-filter-catering"
                                                    class="form-select">

                                                    <option value="ALL">ALL</option>
                                                    @foreach ($catAct as $c)
                                                        <option value="{{ $c->id_catering }}">
                                                            {{ $c->nama_catering }}
                                                        </option>
                                                    @endforeach

                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Status --}}
                                <div class="col-lg-6">
                                    <div class="row mb-3">
                                        <div class="col-lg-4">
                                            <label for="inputCust" class="form-label me-2"
                                                style="min-width: 150px;">Shift</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <div class="flex flex-col mb-2 input-group">
                                                <select id="shiftSelect" name="report-filter-shift" class="form-select">

                                                    <option value="ALL">ALL</option>
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <button type="submit" class="btn btn-primary mb-1 mt-3" id="search-form">
                                <i class="fa fa-magnifying-glass"></i> Search
                            </button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>


    {{-- header tabel --}}
    <div class="container-fluid py-4" id="listtable" hidden>
        <div class="row">
            <div class="col-md-12">
                <div class="card overflow-auto">

                    <div class="card-body">
                        <p class="text-uppercase text-sm">List {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <div class="table-responsive">
                                <input type="number" class="form-control" name="daily-act" max="99" hidden>
                                <table class="table table-hover" id="tabel-plan">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            {{-- <th>No</th> --}}
                                            <th>Id Menu Plan</th>
                                            <th>Hari</th>
                                            <th>Tanggal</th>
                                            <th>Catering</th>
                                            <th>Shift</th>
                                            <th>Menu 1</th>
                                            <th>Menu 2</th>
                                            {{-- <th>Menu 3</th>
                                            <th>Menu 4</th>
                                            <th>Menu 5</th> --}}
                                            <th scope="col">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $(document).ready(function () {

            // Inisialisasi DataTable
            $('#tabel-plan').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Data _START_ - _END_ dari _TOTAL_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                "ordering": false,
                responsive: true,
            });

            // Mendapatkan tanggal hari ini dalam waktu lokal
            var today = new Date();

            // Mendapatkan tanggal 1 bulan ini dalam waktu lokal
            var firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 3);
            var endDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);


            // Format tanggal ke format YYYY-MM-DD secara manual untuk menghindari masalah zona waktu
            var formattedToday = today.getFullYear() + '-' +
                String(today.getMonth() + 1).padStart(2, '0') + '-' +
                String(today.getDate()).padStart(2, '0');

            var formattedFirstDay = firstDayOfMonth.getFullYear() + '-' +
                String(firstDayOfMonth.getMonth() + 1).padStart(2, '0') + '-' +
                String(firstDayOfMonth.getDate()).padStart(2, '0');

            var formattedEndDay = endDayOfMonth.getFullYear() + '-' +
                String(endDayOfMonth.getMonth() + 1).padStart(2, '0') + '-' +
                String(endDayOfMonth.getDate()).padStart(2, '0');

            // Tetapkan nilai default pada input
            $("input[name='start-date']").val(formattedFirstDay); // Default: Tanggal 1 bulan ini
            $("input[name='end-date']").val(formattedEndDay); // Default: Hari ini

            searchTransactions(formattedFirstDay, formattedEndDay);
        });

        var authadd = document.getElementById('auth-add').value;
        var authedit = document.getElementById('auth-edit').value;
        var authdelete = document.getElementById('auth-delete').value;
        var authapproval = document.getElementById('auth-approval').value;

        function searchTransactions(startDate = null, endDate = null) {
            // Ambil nilai input dari form
            var id = $("input[name='id']").val();
            var sdate = startDate || $("input[name='start-date']").val();
            var edate = endDate || $("input[name='end-date']").val();
            var catering = $("#cateringSelect").val();
            var shift = $("#shiftSelect").val();


            // Validasi input
            if (id === '' && (sdate === '' || edate === '')) {
                Swal.fire({
                    title: 'Warning!',
                    text: 'Please fill out ID or both Start Date and End Date!',
                    icon: 'error',
                    confirmButtonColor: '#3085d6'
                });
                return;
            } else if (sdate !== '' && edate !== '' && sdate > edate) {
                Swal.fire({
                    title: 'Warning!',
                    text: 'Start Date must be less than or equal to End Date',
                    icon: 'error',
                    confirmButtonColor: '#3085d6'
                });
                return;
            }

            // Tambahkan spinner dan nonaktifkan tombol
            $('#search-form').append(
                '<span class="spinner-border spinner-border-sm icon-load" role="status" aria-hidden="true"></span>'
            );
            $('#search-form').attr('disabled', true);

            // Buat filter
            var filter = {
                id: id,
                sdate: sdate,
                edate: edate,
                catering: catering,
                shift: shift
            };
            console.log(filter);

            // Kirim permintaan AJAX
            $.ajax({
                url: '{{ URL::to('/') }}/trplan/search',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // Tambahkan CSRF token
                },
                data: filter, // Kirim data dalam format URL-encoded
                success: function (response) {
                    // Tampilkan div tabel dan muat data
                    $('#listtable').removeAttr('hidden');
                    loadrefreshItem(response.data); // Pastikan fungsi ini ada
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    if (jqXHR.status === 404) {
                        Swal.fire({
                            icon: 'error',
                            title: 'No Data Found',
                            text: jqXHR.responseJSON.message,
                            confirmButtonColor: '#d33'
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: 'Something went wrong!',
                            confirmButtonColor: '#d33'
                        });
                    }
                },
                complete: function () {
                    // Hapus spinner dan aktifkan tombol
                    $('#search-form').find('.icon-load').remove(); // Hapus elemen spinner
                    $('#search-form').attr('disabled', false); // Aktifkan kembali tombol
                }
            });
        }


        $('#search-form').click(function (event) {
            event.preventDefault();
            searchTransactions();

        });

        //function menampilkan data yang telah di filter
        function loadrefreshItem(data) {
            // Kosongkan tabel (tanpa menghancurkan DataTables)
            const table = $('#tabel-plan').DataTable(); // Ambil instance DataTables
            table.clear(); // Hapus semua data di DataTables

            // Iterasi melalui data dan tambahkan baris ke tbody
            data.forEach(item => {
                // Bangun elemen dropdown dengan kondisi
                let dropdownItems = '';

                // Periksa otorisasi untuk Edit
                if (authedit === '1') {
                    dropdownItems += `
                                    <li><a class="dropdown-item" onclick="editPlan('${item.encrypted_id}')" style="cursor: pointer;">
                                        <i class="fas fa-pen-to-square"></i> <span> Edit</span>
                                    </a></li>
                                    `;
                }

                // Periksa otorisasi untuk Delete
                if (authdelete === '1') {
                    dropdownItems += `
                                <li><a class="dropdown-item" onclick="deletePlan('${item.id_menu_plan}')" style="cursor: pointer;">
                                    <i class="fas fa-trash"></i> <span> Hapus</span>
                                </a></li>
                                `;
                }


                // Tambahkan baris ke DataTables
                table.row.add([
                    item.id_menu_plan,
                    item.hari,
                    item.tanggal,
                    item.catering_name,
                    item.shift,
                    item.menu1_name,
                    item.menu2_name,

                    `<div class="btn-group dropright">
                            <button type="button" class="btn btn-primary" id="view-${item.id}" onclick="viewPlan('${item.encrypted_id}')">
                                <i class="fas fa-eye"></i> View
                            </button>
                            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                                <div class="dropdown-menu">
                                    ${dropdownItems}
                                </div>
                            </div>`,
                ]);
            });
            // Perbarui tampilan DataTables
            table.draw(); // Render ulang tabel
        }

        //function view
        function viewPlan(id) {
            var id = id;

            if (id) {
                window.location.href = "{{ url($url_menu . '/show' . '/') }}/" + (id);
            } else {
                Swal.fire({
                    title: 'Oops!',
                    text: 'Pilih ID DA terlebih dahulu!',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
            }
        }

        //function view
        function editPlan(id) {
            var id = id;

            if (id) {
                window.location.href = "{{ url($url_menu . '/edit' . '/') }}/" + (id);
            } else {
                Swal.fire({
                    title: 'Oops!',
                    text: 'Pilih ID DA terlebih dahulu!',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
            }
        }

        //function process
        function deletePlan(id) {
            var id = id;

            Swal.fire({
                title: `Data ${id} akan dihapus`, // Perbaikan pada format string
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Hapus'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Ajax untuk memproses data ke database
                    $.ajax({
                        url: '{{ URL::to('/') }}/trplan/delete/' + id,
                        type: "POST",
                        dataType: "JSON",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (data) {
                            if (data.status === 'success') {
                                Swal.fire({
                                    title: 'Berhasil!',
                                    text: `Data ${id} berhasil dihapus!`,
                                    icon: 'success',
                                    confirmButtonColor: '#3085d6'
                                }).then(() => {
                                    window.location.replace("{{ URL::to('/') }}/trplan/");
                                });
                            } else if (data.status === 'actual') {
                                Swal.fire({
                                    title: 'Oops!',
                                    text: `Data ${id} sudah digunakan pada Menu Actual`,
                                    icon: 'error',
                                    confirmButtonColor: '#3085d6'
                                });
                            } else {
                                Swal.fire({
                                    title: 'Oops!',
                                    text: `Data ${id} tidak dapat dihapus!`,
                                    icon: 'error',
                                    confirmButtonColor: '#3085d6'
                                });
                            }
                        }
                        // Redirect ke halaman tpuror setelah sukses



                    });
                }
            });
        }
    </script>
@endsection