@php
    $label = $assignedType === 'ruangan' ? 'Ruangan' : 'Personal';
@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">
        <style>
            input[type="file"].d-none {
                display: none;
            }
        </style>    
    @endpush
    
    <x-slot:title>
        Data Barang {{ $label }}
    </x-slot>
    <x-slot:subtitle>
        Data Barang {{ $label }}
    </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 mt-4 shadow-sm ring-1 ring-gray-950/5 dark:divide-white/10 dark:bg-gray-900 dark:ring-white/10">
        <x-slot:header>
            <form method="GET" action="{{ route('export.dbr') }}">
                <input type="hidden" value="{{ $assignedType }}" name="assigned_type">
                <button type="submit"
                    class="relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-md md:rounded-lg gap-1.5 py-1.5 px-3 md:py-2 text-xs md:text-sm inline-grid shadow-sm bg-custom-600 text-black hover:bg-gray-50 bg-gray-200 ring-1 ring-gray-300">
                    Export Barang
                </button>
            </form>
            <div x-data="importHandler()">
                <form x-ref="importForm" action="{{ route('preview.import.dbr') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="file" x-ref="fileInput" @change="fileImportChange" id="fileInput" name="file" class="d-none" accept=".xlsx,.xls,.csv">
                    <button @click.prevent="inputTrigger()" for="fileInput" class="flex items-center justify-center font-semibold outline-none rounded-md md:rounded-lg gap-1.5 py-1.5 px-3 md:py-2 text-xs md:text-sm shadow-sm bg-white text-gray-950 hover:bg-gray-50 ring-1 ring-gray-950/10">
                        <span x-show="loading" x-cloak>
                            <svg class="animate-spin h-4 w-4 inline-block text-black mb-.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
                            </svg>
                        </span>
                        Import barang
                    </button>
                </form>
            </div>
            <div x-data="{ showCreateModal: false }">
                <!-- create barang -->
                <button @click="showCreateModal = true" class="fi-btn relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-md md:rounded-lg gap-1.5 py-1.5 px-3 md:py-2 text-xs md:text-sm inline-grid shadow-sm bg-custom-600 text-white hover:bg-[#d90606ba] focus-visible:ring-custom-500/50 dark:bg-custom-500 dark:hover:bg-custom-400 dark:focus-visible:ring-custom-400/50 bg-[#d90606]">
                    Barang baru
                </button>

                <div x-show="showCreateModal" x-cloak class="fixed inset-0 z-50">

                    <div class="absolute inset-0 bg-black/50"></div>

                    <div class="relative flex items-center justify-center h-full" x-trap.noscroll="showCreateModal">
                        <div class="bg-white rounded-lg shadow-lg w-1/2 p-6 max-h-[90vh] relative text-sm overflow-auto flex flex-col gap-3" @click.away="showCreateModal = false">

                            <div class="flex justify-end">
                                <button @click="showCreateModal = false" class="opacity-50 hover:opacity-100 focus:outline-none">
                                ✖
                                </button>
                            </div>
                            <h2 class="text-sm font-semibold text-center">Tambah Barang Baru</h2>
                            <div class="text-xs">
                                <x-form-barang-create />
                            </div>
                        </div>
                    </div>
                </div>

                <!-- template excel -->
                <div class="absolute right-0 text-xs mt-1 md:mt-2 text-right hover:underline">
                    @if($assignedType === 'ruangan')
                        <a href="https://docs.google.com/spreadsheets/d/1mF-GFrOXybkbJaK9gum3-F7H3dPS3h9Ints2zNBSLqQ/edit?usp=sharing" class="text-[#27734a] text-right">Template excel</a>
                    @else
                        <a href="https://docs.google.com/spreadsheets/d/1NIYX72P16-Upi9s6FicpfO326XMvsSkIyZgu8ERHNZo/edit?usp=sharing" class="text-[#27734a] text-right">Template excel</a>
                    @endif
                </div>
            </div>
        </x-slot>
        
        <x-slot:nav>
            @include('partials.nav')
        </x-slot>

        <!-- Data Table -->
        <div class="divide-y divide-gray-200 sticky top-16">
            <form method="GET" action="{{ route('export.filter.dbr') }}">
                <div 
                    class="pb-4 text-xs flex items-center gap-2" 
                    x-data="{
                        kondisi: '',
                        kelas: '',
                        personal: '',
                        get isFilter() {
                            return this.kondisi || this.kelas || this.personal
                        }
                    }"
                >
                <input type="hidden" value="{{ $assignedType }}" name="assigned_type">
                    @if($assignedType === 'ruangan')
                        <x-datatable.filters :withKondisi="true" :withKelas="true"/>
                    @else
                        <x-datatable.filters :withKondisi="true" :withPersonal="true"/>
                    @endif
                    <button type="submit" x-show="isFilter"
                        class="border border-red text-red rounded-md shadow-sm p-1 md:p-2 w-fit hover:bg-gray-100">
                        Export Filter
                    </button>
                </div>
            </form>
            <div class="pt-4 text-xs">
                {!! $dataTable->table(['id' => 'databarangadmin-table']) !!}
            </div>
        </div>

        <!--  Modal Preview Import -->
        <div x-data="{ showModal: false }" x-cloak x-init="
                @if(session('preview_data'))
                    showModal = true;
                @endif">

            <div class="fixed inset-0 bg-black opacity-50 z-50" x-show="showModal" x-cloak></div>

            <div class="fixed inset-0 flex items-center justify-center z-50" x-show="showModal" x-cloak x-trap.noscroll="showModal">
                <div class="bg-white rounded-lg shadow-lg w-10/12 p-4 max-h-[90vh] relative text-sm overflow-auto">

                    <div class="flex justify-end">
                        <a href="{{ route('import.cancel') }}" class="opacity-50 hover:opacity-100 focus:outline-none mr-4">
                        ✖
                        </a>
                    </div>
                    <h2 class="text-base font-semibold text-center">Data Import</h2>

                    @if(session('preview_stats'))
                        @php $stats = session('preview_stats'); @endphp
                        <div class="mb-4 space-y-1 text-xs">
                            <p><strong>Total Data:</strong> {{ $stats['total'] }}</p>
                            <p><strong>Data Valid:</strong> {{ $stats['valid'] }}</p>
                            <p><strong>Data Bermasalah (error & duplikat):</strong> {{ $stats['invalid'] }}</p>
                            <form method="POST" action="{{ route('import.downloadErrors') }}">
                                @csrf
                                <button type="submit" class="text-red underline hover:font-semibold">Download Data Error</button>
                            </form>
                        </div>
                    @endif
                   
                        <x-datatable
                            :columns="[
                                ['label' => 'ID', 'key' => 'id'],
                                ['label' => 'Kodefikasi', 'key' => 'kodefikasi'],
                                ['label' => 'Nama', 'key' => 'nama'],
                                ['label' => 'Merk', 'key' => 'merk'],
                                ['label' => 'Penempatan', 'key' => 'penempatan'],
                                ['label' => 'Kondisi', 'key' => 'kondisi'],
                                ['label' => 'Status', 'key' => 'status'],
                                ['label' => 'Tahun', 'key' => 'tahun'],
                                ['label' => 'Keterangan', 'key' => 'keterangan'],
                            ]"
                            :source="'session'"
                            :sessionData="session('preview_data')"
                        />

                    <div class="flex justify-between items-center mb-3">
                        <div>*Data <span class="bg-rose-200 p-1 rounded-md">duplikat</span> dan <span class="text-red">tidak valid</span> tidak akan tersimpan.</div>
    
                        <div class="mt-2" x-data="{ loading: false }">
                            <form action="{{ route('import.store') }}" method="POST">
                                @csrf
                                <x-primary-button @click="loading = true" type="submit" class="px-4 flex items-center text-xs">
                                    <span x-show="loading" x-cloak>
                                        <svg class="animate-spin h-4 w-4 inline-block text-white mb-.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
                                        </svg>
                                    </span>
                                    Simpan
                                </x-primary-button>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </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.addEventListener('DOMContentLoaded', function () {
                const tableSelector = '#databarangadmin-table';

                $(tableSelector).on('init.dt', function () {
                    initDatatableFilters(tableSelector);
                });
            });
        </script>
        <script>
            function importHandler() {
                return {
                    loading: false,

                    inputTrigger() {
                        this.$refs.fileInput.click();
                    },

                    fileImportChange(e) {
                        const file = e.target.files[0];

                        if (!file) return;

                        this.loading = true;

                        const form = this.$refs.importForm;
                        const formData = new FormData(form);
                        formData.append('file', file);

                        fetch("{{ route('preview.import.dbr', ['origin' => $assignedType]) }}", {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': "{{ csrf_token() }}",
                                'Accept': 'application/json'
                            },
                            credentials: 'same-origin',
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            this.loading = false;

                            if (data.success) {
                                window.location.href = "{{ route('dbr.index') }}";
                            } else {
                                alert("Gagal mengimpor file. Periksa format data.");
                            }
                        })
                        .catch(error => {
                            this.loading = false;
                            alert("Terjadi kesalahan saat mengunggah file.");
                        });
                    }
                };
            }
        </script>
    @endpush
</x-app-layout>