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

    <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 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-03">
                                            </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" max="2026-10-03">
                                            </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>
                                <!-- ID Transaksi -->
                                <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>
                                {{-- Status --}}
                                <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;">Status</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <div class="flex flex-col mb-2 input-group">
                                                <select id="statusSelect" name="report-filter-status" class="form-select">
                                                    <option value="ALL">ALL</option>

                                                    @foreach ($status as $s)
                                                        <option value="{{ $s->value }}">
                                                            {{ $s->name }}
                                                        </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>
                        <div class="card-footer align-items-center pt-0 pb-2">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- header tabel --}}
    <div class="container-fluid py-4" id="listtable">
        <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>
                        @if ($authorize->add == '1')
                            <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
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <div class="table-responsive">
                                <input type="number" class="form-control" name="list_trans_defect" max="99" hidden>
                                <table class="table table-hover" id="list_trans_defect">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th scope="col">Action</th>
                                            <th scope="col">ID</th>
                                            <th scope="col">Date</th>
                                            <th scope="col">No Surat</th>
                                            <th scope="col">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>

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


    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card overflow-auto">

                    <div class="card-body">
                        <p class="text-uppercase text-sm">List Barang Rusak</p>

                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <!-- Trigger -->
                            <div class="table-responsive">
                                <table class="table table-hover" id="list_defect">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>

                                            <th scope="col">Tanggal Rusak</th>
                                            <th scope="col">Source</th>
                                            <th scope="col">Code</th>
                                            <th scope="col">Kode SAP</th>
                                            <th scope="col">User/Location</th>
                                            <th scope="col">Merk</th>
                                            <th scope="col">Keterangan</th>

                                        </tr>
                                    </thead>

                                    <tbody>

                                        @foreach ($list as $l)
                                            <tr>
                                                <td>{{ $l->date_nonaktif }}</td>
                                                <td>{{ $l->source }}</td>
                                                <td>{{ $l->code }}</td>
                                                <td>{{ $l->kode_sap }}</td>
                                                <td>{{ $l->user }}</td>
                                                <td>{{ $l->merk }}</td>
                                                <td>{{ $l->ket_nonaktif }}</td>
                                            </tr>
                                        @endforeach

                                    </tbody>

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

    <script>
        $(document).ready(function() {
            $('#addItemModal .js-select2').each(function() {
                $(this).select2({
                    dropdownParent: $(this).closest('.position-relative'), // ⬅️ kunci
                    width: '100%',
                    dropdownAutoWidth: true,
                    minimumResultsForSearch: 0
                });
            });
            $('#list_defect').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                ordering: true,
                responsive: true,
            });

            $('#list_trans_defect').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "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(), 1);

            // 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');

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

            searchTransactions(formattedFirstDay, formattedToday);
        });

        function addDefect() {

        }

        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 status = $("#statusSelect").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,
                status: status
            };
            console.log(filter);

            // Kirim permintaan AJAX
            $.ajax({
                url: '{{ URL::to('/') }}/trdefc/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);
                },
                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 = $('#list_trans_defect').DataTable(); // Ambil instance DataTables
            table.clear(); // Hapus semua data di DataTables

            // Iterasi melalui data dan tambahkan baris ke tbody
            data.forEach(item => {

                // Status dengan Badge
                let status = '';
                switch (item.status) {
                    case 'C':
                        status =
                            '<span class="badge bg-success">Completed</span>';
                        break;
                    case 'P':
                        status =
                            '<span class="badge bg-info">In Progress</span>';
                        break;
                    default:
                        status = '<span class="badge bg-secondary">Unknown</span>';
                }


                // Bangun elemen dropdown dengan kondisi
                let dropdownItems = '';
                if (item.status === 'C') {
                    dropdownItems += `
                       <li>                     
                         <a class="dropdown-item"
                            href="#"
                            data-id="${item.id}"
                            onclick="handleDownload('${item.encrypted_id}')">
                           <i class="fa fa-file-arrow-down"></i> <span>  Download</span>
                        </a>
                        </li>
                        `;

                    dropdownItems += `
                       <li>                     
                         <a class="dropdown-item"
                            href="#"
                            data-id="${item.id}"
                            onclick="cancel('${item.id}')">
                             <i class="fas fa-undo-alt"></i> <span>  Reverse</span>
                        </a>
                        </li>
                        `;


                } else if (item.status === 'P') {
                    if (authedit === '1') {
                        dropdownItems += `
                                <li><a class="dropdown-item" onclick="edit('${item.encrypted_id}')" style="cursor: pointer;">
                                    <i class="fas fa-pen-to-square"></i> <span> Edit</span>
                                </a></li>
                                `;
                    }
                    dropdownItems += `
                       <li>                     
                         <a class="dropdown-item"
                            href="#"
                            data-id="${item.id}"
                            onclick="handleDownload('${item.encrypted_id}')">
                           <i class="fa fa-file-arrow-down"></i> <span>  Download</span>
                        </a>
                        </li>
                        `;
                    dropdownItems += `
                    <li>                     
                        <a class="dropdown-item"
                            href="#"
                            data-id="${item.id}"
                            onclick="markAsSold('${item.id}')">
                        <i class="fas fa-check text-success"></i> <span> Telah Dijual</span>
                        </a>
                    </li>
                    `;
                    if (authdelete === '1') {
                        dropdownItems += `
                            <li><a class="dropdown-item" onclick="deletetr('${item.id}')" style="cursor: pointer;">
                                <i class="fas fa-trash"></i> <span> Delete</span>
                            </a></li>
                            `;
                    }
                }

                // Tambahkan baris ke DataTables
                table.row.add([
                    `<div class="btn-group dropright">
                        <button type="button" class="btn btn-primary" id="view-${item.id}" onclick="view('${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>`,
                    item.id,
                    item.date,
                    item.no_surat,
                    status,
                ]);
            });
            // Perbarui tampilan DataTables
            table.draw(); // Render ulang tabel
        }

        //function view
        function view(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 edit(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 deletetr(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('/') }}/trdefc/delete/' + id,
                        type: "POST",
                        dataType: "JSON",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            // Redirect ke halaman tpuror setelah sukses
                            Swal.fire({
                                title: 'Berhasil!',
                                text: `Data ${id} berhasil dihapus!`,
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            }).then(() => {
                                window.location.replace("{{ URL::to('/') }}/trdefc/");
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${id} tidak dapat dihapus!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }

                    });
                }
            });
        }

        function handleDownload(id) {
            var id = id;
            window.location.href = '{{ URL::to('/') }}/trdefc/download/' + id;

        }

        function markAsSold(id) {
            var id = id;

            Swal.fire({
                title: `Data ${id} sudah terjual?`, // Perbaikan pada format string
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Ajax untuk memproses data ke database
                    $.ajax({
                        url: '{{ URL::to('/') }}/trdefc/sold/' + 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!',
                                    html: `
                                    <b>Data ${id} berhasil diproses</b><br>
                                    <hr>
                                    Total diproses: ${data.processed} <br>
                               
                                `,
                                    icon: 'success',
                                    confirmButtonColor: '#3085d6'
                                }).then(() => {
                                    window.location.replace("{{ url('/trdefc') }}");
                                });
                            } else {
                                Swal.fire({
                                    title: 'Oops!',
                                    text: data.message || `Data ${id} gagal diproses!`,
                                    icon: 'error',
                                    confirmButtonColor: '#3085d6'
                                });
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${id} tidak dapat diupdate!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }

                    });
                }
            });
        }

        function cancel(id) {
            var id = id;

            Swal.fire({
                title: `Data ${id} akan di dikembalikan?`, // Perbaikan pada format string
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Ajax untuk memproses data ke database
                    $.ajax({
                        url: '{{ URL::to('/') }}/trdefc/cancel/' + 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!',
                                    html: `
                                    <b>Data ${id} berhasil dikembalikan</b><br>                              
                                `,
                                    icon: 'success',
                                    confirmButtonColor: '#3085d6'
                                }).then(() => {
                                    window.location.replace("{{ url('/trdefc') }}");
                                });
                            } else {
                                Swal.fire({
                                    title: 'Oops!',
                                    text: data.message ||
                                        `Penjualan Data ${id} tidak dapat dikembalikan!`,
                                    icon: 'error',
                                    confirmButtonColor: '#3085d6'
                                });
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${id} tidak dapat diupdate!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }

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