@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@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 download word --}}
                            <button class="btn btn-success btn-sm mb-0 ms-2" style="padding: 4px 10px; line-height: 1.2; border-radius: 4px;"
                                data-bs-toggle="tooltip" data-bs-placement="top" title="Instruksi Kerja Temuan"
                                onclick="window.open('https://drive.google.com/file/d/19d0EzMNJ-BaeHx0uOmTNNcEkw79CQZs6/view?usp=drive_link', '_blank')">
                                <i class="fas fa-info-circle"></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-idroles" name="auth-idroles" value="{{ $authorize->idroles }}">

                            <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-4">
                                    <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-1 d-flex justify-content-center">
                                    <div style="border-left: 2px solid #ddd; height: 50%;"></div>
                                </div>

                                <div class="col-lg-3">
                                    <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 class="col-lg-1 d-flex justify-content-center">
                                    <div style="border-left: 2px solid #ddd; height: 50%;"></div>
                                </div>
                                <div class="col-lg-3">
                                    <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>
                            </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-temuan">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            {{-- <th>No</th> --}}
                                            <th>ID Temuan</th>
                                            <th>Tanggal</th>
                                            <th>Catering</th>
                                            <th>Shift</th>
                                            <th>Complain</th>
                                            <th>Tindakan</th>
                                            <th>Kategori</th>
                                            <th>Poin</th>
                                            {{-- <th>Surat SP</th> --}}
                                            <th>Status</th>
                                            <th scope="col">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>

                            </div>
                            <div class="row px-4 py-2">
                                <div class="col-lg">
                                    <div class="nav-wrapper" id="noted"><code>Note : <i aria-hidden="true"
                                                    style="color: #ffc2cd;" class="fas fa-circle"></i> Temuan memerlukan
                                                proses
                                                pembuatan Surat Peringatan.</code>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <script>
        $(document).ready(function () {
            $('#tabel-temuan').DataTable({
                language: {
                    search: "Cari:",
                    lengthMenu: "Tampilkan _MENU_ data",
                    zeroRecords: "Data tidak ada",
                    info: "Halaman _PAGE_ dari _PAGES_",
                    infoEmpty: "Data tidak ditemukan",
                    infoFiltered: "(pencarian dari _MAX_ data)",
                },
                destroy: true,
                ordering: false,
                dom: 'lrtip',
                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;
        var authidroles = document.getElementById('auth-idroles').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();

            // 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,
            };
            console.log(filter);

            // Kirim permintaan AJAX
            $.ajax({
                url: '{{ URL::to('/') }}/trtemu/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 base_url = "{{ url('') }}";
            const url_menu = "{{ url('trtemu') }}";
            const csrf_token = "{{ csrf_token() }}";


            const table = $('#tabel-temuan').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 status = '';
                switch (item.status) {
                    case 'entry':
                        status =
                            '<span class="badge bg-primary">Entry</span>';
                        break;
                    case 'finish':
                        status =
                            '<span class="badge bg-success">Finish</span>';
                        break;
                    case 'proses':
                        status =
                            '<span class="badge bg-info">Proccess</span>';
                        break;

                    default:
                        status = '<span class="badge bg-secondary">Unknown</span>';
                }

                let spButton = '';

                if (item.id_surat_peringatan == null || item.id_surat_peringatan == '') {
                    console.log(authidroles, item.id_surat_peringatan, item.status, item.ada_sp);
                    if (
                        item.ada_sp == '1' &&
                        (item.status === 'proses' || item.status === 'finish') &&
                        authedit === '1' &&
                        (authidroles === 'admins' || authidroles === 'genadv')
                    ) {

                        spButton = `
                            <button type="button" class="btn btn-sm btn-danger mb-0" onclick="window.location.href='${base_url}/trsupa/add?id_temuan=${item.id_temuan}'">
                                <i class="fas fa-exclamation-triangle"></i>
                                <span class="font-weight-bold">Buat SP</span>
                            </button>
                            `;
                    } else if (authidroles === 'klinik') {
                        spButton = `<span class="badge bg-secondary">Tidak dapat Buat SP</span>`;
                    } else if (item.status === 'entry' && item.ada_sp == '1') {
                        spButton = `<span class="badge bg-secondary">SP Belum Dibuat</span>`;
                    } else if (item.tindakan === 'Teguran') {
                        spButton = `<span class="badge bg-secondary">-</span>`;
                    } else {
                        spButton = `<span class="badge bg-secondary">Tidak SP</span>`;
                    }
                } else {
                    spButton = `<span class="badge bg-success">SP Sudah Dibuat</span>`;
                }


                let dropdownItems = '';

                if (item.status === 'entry') {
                    if (authedit === '1' && (authidroles === 'admins' || authidroles === 'genadv')) {
                        dropdownItems += `
                                <li><a class="dropdown-item" onclick="confirmProsesSP(event, '${item.id_temuan}')" style="cursor: pointer;">
                                        <i class="fas fa-paper-plane"></i> <span>Proses</span>
                                    </a></li>
                                `;
                    }

                    if (authedit === '1') {
                        dropdownItems += `
                        <li><a class="dropdown-item" onclick="window.location='${url_menu}/edit/${item.encrypted_id}'"
                                style="cursor: pointer;">
                                <i class="fas fa-edit"></i> <span>Edit</span>
                            </a></li>
                        `;
                    }

                    if (authdelete === '1') {
                        dropdownItems += `
                        <li>
                            <form action="${url_menu}/${item.encrypted_id}" method="POST" style="display:inline;">
                                <input type="hidden" name="_token" value="${csrf_token}">
                                <input type="hidden" name="_method" value="DELETE">
                                <a class="dropdown-item text-danger" onclick="confirmDelete(event, '${item.id_temuan}', this)"
                                    style="cursor: pointer;">
                                    <i class="fas fa-trash"></i> <span>Hapus</span>
                                </a>
                            </form>
                        </li>
                        `;
                    }
                }

                if (item.status === 'proses') {
                    if (authedit === '1' && (authidroles === 'admins' || authidroles === 'genadv')) {
                        if (item.id_surat_peringatan == null && item.ada_sp == '1' &&
                            (item.status === 'proses' || item.status === 'finish') &&
                            (authidroles === 'admins' || authidroles === 'genadv')
                        ) {
                            dropdownItems += `
                                <li><a class="dropdown-item" onclick="window.location.href='${base_url}/trsupa/add?id_temuan=${item.id_temuan}'" style="cursor: pointer;">
                                        <i class="fa fa-file"></i> <span> Create SP </span>
                                    </a></li>
                                `;
                        }


                        if (item.ada_sp == 0 || item.status === 'proses') {
                            dropdownItems += `
                                <li><a class="dropdown-item" onclick="confirmFinish(event, '${item.id_temuan}')" style="cursor: pointer;">
                                        <i class="fas fa-check"></i> <span> Finish</span>
                                    </a></li>
                                `;
                        }

                        dropdownItems += `
                            <li><a class="dropdown-item text-warning" onclick="confirmUnprocess(event, '${item.id_temuan}')"
                                    style="cursor: pointer;">
                                    <i class="fas fa-undo"></i> <span>Unproses</span>
                                </a></li>
                            `;
                    }
                }

                if (item.status === 'finish') {
                    if (authedit === '1' && (authidroles === 'admins' || authidroles === 'genadv')) {
                        dropdownItems += `
                        <li><a class="dropdown-item text-danger" onclick="confirmUnfinish(event, '${item.id_temuan}')"
                                style="cursor: pointer;">
                                <i class="fas fa-undo"></i> <span>Unfinish</span>
                            </a></li>
                        `;
                    }
                }

                // Tambahkan baris ke DataTables
                const rowNode = table.row.add([
                    item.id_temuan,
                    item.tanggal_temuan,
                    item.nama_catering,
                    item.shift_name,
                    item.complain,
                    item.tindakan,
                    item.kat_name,
                    item.poin,
                    status,
                    `<div class="btn-group dropright">
                        <button type="button" class="btn btn-primary" id="view-${item.id}"
                            onclick="viewTemuan('${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>`
                ]).draw(false).node(); // ← dapatkan elemen DOM barisnya

                // Tambahkan class jika kondisi terpenuhi
                if (item.id_surat_peringatan == null && item.ada_sp == '1') {
                    $(rowNode).addClass('table-danger'); // atau 'bg-danger-subtle' jika pakai Bootstrap 5+
                }
            });
            // Perbarui tampilan DataTables
            table.draw(); // Render ulang tabel
        }

        //function view
        function viewTemuan(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 editTemuan(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 confirmDelete(event, id) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi Hapus',
                text: `Apakah anda yakin ingin menghapus temuan ${id}?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    event.target.closest('form').submit();
                }
            });
            return false;
        }

        // Function to confirm unprocess action
        function confirmProsesSP(event, id) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi Proses SP',
                text: `Apakah anda yakin ingin memproses SP untuk temuan ${id}?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Proses!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Tambahkan AJAX request
                    $.ajax({
                        url: `{{ url($url_menu) }}/proses-sp/${id}`,
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id_temuan: id
                        },
                        success: function (response) {
                            if (response.success) {
                                Swal.fire({
                                    title: 'Berhasil!',
                                    text: 'Status temuan berhasil diubah menjadi proses',
                                    icon: 'success'
                                }).then(() => {
                                    // Refresh halaman setelah berhasil
                                    window.location.reload();
                                });
                            } else {
                                Swal.fire(
                                    'Gagal!',
                                    response.message || 'Terjadi kesalahan saat memproses SP',
                                    'error'
                                );
                            }
                        },
                        error: function (xhr) {
                            Swal.fire(
                                'Error!',
                                'Terjadi kesalahan saat memproses SP',
                                'error'
                            );
                            console.error('Error:', xhr);
                        }
                    });
                }
            });
        }

        function confirmUnprocess(event, id) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi Unproses',
                text: `Apakah anda yakin ingin membatalkan proses temuan ${id}?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Batalkan!',
                cancelButtonText: 'Tidak'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: `{{ url($url_menu) }}/unprocess/${id}`,
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id_temuan: id
                        },
                        success: function (response) {
                            if (response.success) {
                                Swal.fire('Berhasil!', 'Status berhasil diubah menjadi entry',
                                    'success')
                                    .then(() => window.location.reload());
                            }
                        }
                    });
                }
            });
        }

        function confirmUnfinish(event, id) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi Unfinish',
                text: `Apakah anda yakin ingin membatalkan status finish temuan ${id}?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Batalkan!',
                cancelButtonText: 'Tidak'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: `{{ url($url_menu) }}/unfinish/${id}`,
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id_temuan: id
                        },
                        success: function (response) {
                            if (response.success) {
                                Swal.fire('Berhasil!', 'Status berhasil diubah menjadi proses',
                                    'success')
                                    .then(() => window.location.reload());
                            }
                        }
                    });
                }
            });
        }

        function confirmFinish(event, id) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi Finish',
                text: `Apakah anda yakin ingin menyelesaikan temuan ${id}?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#28a745',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Selesaikan!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: `{{ url($url_menu) }}/finish/${id}`,
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id_temuan: id
                        },
                        success: function (response) {
                            if (response.success) {
                                Swal.fire('Berhasil!', 'Status berhasil diubah menjadi finish',
                                    'success')
                                    .then(() => window.location.reload());
                            }
                        }
                    });
                }
            });
        }
    </script>
@endsection