@php
    $origin = session('history_origin', 'ruangan');
    $backRoute = $origin === 'personal' ? route('db-personal.index') : route('dbr.index');
@endphp

<x-app-layout>
    @push('styles')
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.3.6/css/dataTables.dataTables.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/4.0.5/css/fixedHeader.dataTables.css">     
    @endpush

    <x-slot:title>
        Riwayat Barang
    </x-slot>

    <x-slot:subtitle>
        Riwayat Barang
    </x-slot>

    <x-slot:subheading>
        List
    </x-slot>

    <x-slot:navButton>
        <button x-data="{}" @click="$store.nav.open()" class="md:hidden">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
            </svg>
        </button>
    </x-slot>

    <x-slot:signoutBtn>
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button type="submit" class="w-full relative flex items-center justify-center gap-x-1 bg-white rounded-md md:rounded-lg px-2 py-1 md:px-3 md:py-2 outline-none transition duration-75 hover:bg-gray-100 ring-1 ring-red/40 dark:hover:bg-white/5 dark:focus-visible:bg-white/5"
            :class="{
                'bg-gray-100 text-red': currentPath.startsWith('{{ route('logout', [], false) }}')
            }">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-5 w-5 md:h-6 md:w-6 text-red">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15M12 9l-3 3m0 0 3 3m-3-3h12.75" />
                </svg>

                <span class="flex-1 truncate text-xs md:text-sm font-bold md:font-semibold text-left text-red">
                    Sign out
                </span>
            </button>
        </form>
    </x-slot>

    <div class="rounded-xl bg-white p-4 sm:p-6 shadow-sm ring-1 ring-gray-950/5 dark:divide-white/10 dark:bg-gray-900 dark:ring-white/10">
        <x-slot:header></x-slot> 
        
        <x-slot:nav>
            @include('partials.nav')
        </x-slot>
        
        <div class="text-xs">
            {!! $dataTable->table() !!}
        </div>
    </div>

    @push('scripts')
        <script src="https://code.jquery.com/jquery-3.7.1.js"></script>       
        <script type="text/javascript" src="https://cdn.datatables.net/2.3.6/js/dataTables.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/4.0.5/js/fixedHeader.dataTables.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/4.0.5/js/dataTables.fixedHeader.js"></script>
        {!! $dataTable->scripts() !!}
        <script>
            $(document).ready(function()
            {
                const table = $('#databarang-table');
                
                table.on('preXhr.dt', function(e, settings, data) {
                    data.kondisi = $("#filter_kondisi").val();
                    data.assigned_id = $("#filter_assigned_id").val();
                })
                $("#filter_kondisi, #filter_assigned_id").on('change', function() {
                    table.DataTable().ajax.reload(null,false);
                })
            });
        </script>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                $("#fileInput").on("change", function(event) {
                    let formData = new FormData($("#importForm")[0]);

                    $.ajax({
                        url: "{{ route('preview.import.dbr') }}",
                        type: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if (response.success) {
                                // Update session data dynamically and trigger the modal
                                window.location.href = "{{ route('dbr.index') }}";
                            } else {
                                alert("Gagal mengimpor file. Periksa format data.");
                            }
                        },
                        error: function(xhr) {
                            console.log(xhr.responseText);
                            alert("Terjadi kesalahan saat mengunggah file.");
                        }
                    });
                });
            });
        </script>
    @endpush
</x-app-layout>