@extends('layouts.app')

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h4 class="mb-0" style="font-weight: 700; color: #222;">Data Lokasi</h4>
        <button type="button" class="btn btn-primary-custom" id="btnTambahModal" style="padding: 8px 16px; border-radius: 8px;" data-bs-toggle="modal" data-bs-target="#tambahLokasiModal">
            <i class="fa-solid fa-plus me-1"></i> Tambah Lokasi
        </button>
    </div>
    <div class="card-body">
        <!-- Summary Cards -->
        <div class="row mb-4">
            <div class="col-md-4 mb-2 mb-md-0">
                <div class="p-3 rounded d-flex justify-content-between align-items-center" style="background-color: #f8f9fc; border: 1px solid #e3e6f0;">
                    <div>
                        <h6 class="text-muted mb-1" style="font-size: 13px; font-weight: 700; text-transform: uppercase;">Total Lokasi</h6>
                        <h4 class="mb-0 fw-bold" style="color: #222;"><span id="summaryTotal">{{ $locations->count() }}</span></h4>
                    </div>
                    <div class="text-white rounded-circle d-flex justify-content-center align-items-center" style="width: 48px; height: 48px; background-color: #4e73df;">
                        <i class="fa-solid fa-map-location-dot fs-5"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-2 mb-md-0">
                <div class="p-3 rounded d-flex justify-content-between align-items-center" style="background-color: #f8f9fc; border: 1px solid #e3e6f0;">
                    <div>
                        <h6 class="text-muted mb-1" style="font-size: 13px; font-weight: 700; text-transform: uppercase;">Khusus Toilet</h6>
                        <h4 class="mb-0 fw-bold" style="color: #222;"><span id="summaryToilet">{{ $locations->where('type', 'toilet')->count() }}</span></h4>
                    </div>
                    <div class="text-white rounded-circle d-flex justify-content-center align-items-center" style="width: 48px; height: 48px; background-color: #0b4a99;">
                        <i class="fa-solid fa-restroom fs-5"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-3 rounded d-flex justify-content-between align-items-center" style="background-color: #f8f9fc; border: 1px solid #e3e6f0;">
                    <div>
                        <h6 class="text-muted mb-1" style="font-size: 13px; font-weight: 700; text-transform: uppercase;">Khusus Ruangan</h6>
                        <h4 class="mb-0 fw-bold" style="color: #222;"><span id="summaryRuangan">{{ $locations->where('type', 'ruangan')->count() }}</span></h4>
                    </div>
                    <div class="text-white rounded-circle d-flex justify-content-center align-items-center" style="width: 48px; height: 48px; background-color: #0d8a72;">
                        <i class="fa-solid fa-door-open fs-5"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-3 g-2">
            <div class="col-md-6">
                <div class="input-group">
                    <span class="input-group-text bg-white"><i class="fa-solid fa-magnifying-glass text-muted"></i></span>
                    <input type="text" id="searchInput" class="form-control" placeholder="Ketik nama atau kode lokasi untuk mencari otomatis..." style="border-radius: 0 8px 8px 0;">
                </div>
            </div>
            <div class="col-md-3">
                <select id="categoryFilter" class="form-select" style="border-radius: 8px;">
                    <option value="all">Semua Kategori</option>
                    <option value="toilet">Khusus Toilet</option>
                    <option value="ruangan">Khusus Ruangan</option>
                </select>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-hover align-middle" id="locationsTable">
                <thead class="table-light">
                    <tr>
                        <th>No</th>
                        <th>Kode Lokasi (QR)</th>
                        <th>Nama Lokasi</th>
                        <th>Kategori</th>
                        <th class="text-center">Shift</th>
                        <th class="text-center" width="200">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($locations as $index => $loc)
                    <tr class="location-row" data-name="{{ strtolower($loc->name) }}" data-code="{{ strtolower($loc->code) }}" data-category="{{ $loc->type }}">
                        <td>{{ $index + 1 }}</td>
                        <td><span class="badge bg-secondary">{{ $loc->code }}</span></td>
                        <td class="fw-bold text-dark">{{ $loc->name }}</td>
                        <td>
                            @if($loc->type === 'toilet')
                                <span class="badge" style="background-color: #0b4a99;">Toilet</span>
                            @else
                                <span class="badge" style="background-color: #0d8a72;">Ruangan</span>
                            @endif
                        </td>
                        <td class="text-center">
                            <span class="badge bg-info text-dark">{{ $loc->shift_count ?? 1 }} Shift</span>
                        </td>
                        <td class="text-center">
                            <button class="btn btn-sm btn-warning edit-btn" style="border-radius: 6px; color: #fff;" data-id="{{ $loc->id }}" data-name="{{ $loc->name }}" data-code="{{ $loc->code }}" data-type="{{ $loc->type }}" data-shift="{{ $loc->shift_count ?? 1 }}" data-bs-toggle="modal" data-bs-target="#tambahLokasiModal">
                                <i class="fa-solid fa-pen-to-square"></i> Edit
                            </button>
                            <form action="{{ route('locations.destroy', $loc->id) }}" method="POST" class="d-inline delete-form">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger delete-btn" style="border-radius: 6px;">
                                    <i class="fa-solid fa-trash"></i> Hapus
                                </button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr id="emptyRow">
                        <td colspan="5" class="text-center text-muted py-4">Belum ada data lokasi.</td>
                    </tr>
                    @endforelse
                    <tr id="noResultRow" style="display: none;">
                        <td colspan="5" class="text-center text-muted py-4">Tidak ada lokasi yang cocok dengan pencarian Anda.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Tambah Lokasi -->
<div class="modal fade" id="tambahLokasiModal" tabindex="-1" aria-labelledby="tambahLokasiModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 12px; border: none;">
            <div class="modal-header border-bottom-0 pb-0">
                <h5 class="modal-title" id="tambahLokasiModalLabel" style="font-weight: 700; color: #222;">Tambah Lokasi Baru</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="modalAlertPlaceholder"></div>
                <form id="tambahLokasiForm" action="{{ route('locations.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="_method" id="modalMethod" value="POST">
                    <div class="mb-4">
                        <label class="form-label" style="font-weight: 600; color: #444; font-size: 14px;">Nama Lokasi</label>
                        <input type="text" id="modalInputName" name="name" class="form-control" style="height: 48px; border-radius: 8px;" required placeholder="Contoh: KM Umum Depan Poli Anak">
                    </div>

                    <div class="mb-4">
                        <label class="form-label" style="font-weight: 600; color: #444; font-size: 14px;">Kode Lokasi (Unik)</label>
                        <input type="text" id="modalInputCode" name="code" class="form-control" style="height: 48px; border-radius: 8px;" required placeholder="Contoh: KM-POLI-ANAK-01">
                        <small class="text-muted mt-1 d-block"><i class="fa-solid fa-circle-info"></i> Kode ini yang akan dicocokkan saat scan.</small>
                    </div>

                    <div class="mb-4">
                        <label class="form-label" style="font-weight: 600; color: #444; font-size: 14px;">Kategori / Jenis Lokasi</label>
                        <select id="modalInputType" name="type" class="form-select form-control" style="height: 48px; border-radius: 8px;" required>
                            <option value="toilet" selected>Toilet</option>
                            <option value="ruangan">Ruangan Lainnya</option>
                        </select>
                    </div>

                    <div class="mb-4">
                        <label class="form-label" style="font-weight: 600; color: #444; font-size: 14px;">Jumlah Shift Scan</label>
                        <select id="modalInputShiftCount" name="shift_count" class="form-select form-control" style="height: 48px; border-radius: 8px;" required>
                            <option value="1" selected>1 Shift (Sekali sehari)</option>
                            <option value="2">2 Shift (Dua kali sehari)</option>
                        </select>
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-2">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal" style="border-radius: 8px; font-weight: 600;">Tutup</button>
                        <button type="submit" id="modalBtnSubmit" class="btn btn-primary-custom" style="border-radius: 8px; padding-left: 20px; padding-right: 20px;">
                            <i class="fa-solid fa-save me-1"></i> Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('searchInput');
        const categoryFilter = document.getElementById('categoryFilter');
        const rows = document.querySelectorAll('.location-row');
        const noResultRow = document.getElementById('noResultRow');
        const emptyRow = document.getElementById('emptyRow');

        function filterTable() {
            const searchTerm = searchInput.value.toLowerCase();
            const category = categoryFilter.value;
            let visibleCount = 0;

            rows.forEach(row => {
                const name = row.getAttribute('data-name');
                const code = row.getAttribute('data-code');
                const rowCategory = row.getAttribute('data-category');

                const matchSearch = name.includes(searchTerm) || code.includes(searchTerm);
                const matchCategory = category === 'all' || rowCategory === category;

                if (matchSearch && matchCategory) {
                    row.style.display = '';
                    visibleCount++;
                } else {
                    row.style.display = 'none';
                }
            });

            if (visibleCount === 0 && rows.length > 0) {
                noResultRow.style.display = '';
            } else {
                if(noResultRow) noResultRow.style.display = 'none';
            }
        }

        if(searchInput) searchInput.addEventListener('input', filterTable);
        if(categoryFilter) categoryFilter.addEventListener('change', filterTable);

        // Edit Modal Setup
        const modalForm = document.getElementById('tambahLokasiForm');
        const modalTitle = document.getElementById('tambahLokasiModalLabel');
        const modalMethod = document.getElementById('modalMethod');
        const inputName = document.getElementById('modalInputName');
        const inputCode = document.getElementById('modalInputCode');
        const inputType = document.getElementById('modalInputType');
        const inputShiftCount = document.getElementById('modalInputShiftCount');
        const btnTambah = document.getElementById('btnTambahModal');
        const baseUrlStore = "{{ route('locations.store') }}";
        const baseUrlEdit = "{{ route('locations.update', ':id') }}";
        let currentRowEdit = null; // Menyimpan referensi baris yang sedang diedit

        // Modal Setup via Bootstrap Event
        const tambahLokasiModalEl = document.getElementById('tambahLokasiModal');
        if (tambahLokasiModalEl) {
            tambahLokasiModalEl.addEventListener('show.bs.modal', function (event) {
                const button = event.relatedTarget; // Button that triggered the modal
                document.getElementById('modalAlertPlaceholder').innerHTML = '';
                
                if (button && button.classList.contains('edit-btn')) {
                    // Mode Edit
                    const id = button.getAttribute('data-id');
                    modalTitle.textContent = 'Edit Lokasi';
                    modalForm.setAttribute('action', baseUrlEdit.replace(':id', id));
                    modalMethod.value = 'PUT';
                    inputName.value = button.getAttribute('data-name');
                    inputCode.value = button.getAttribute('data-code');
                    inputType.value = button.getAttribute('data-type');
                    inputShiftCount.value = button.getAttribute('data-shift') || '1';
                    currentRowEdit = button.closest('tr');
                } else {
                    // Mode Tambah
                    modalTitle.textContent = 'Tambah Lokasi Baru';
                    modalForm.setAttribute('action', baseUrlStore);
                    modalMethod.value = 'POST';
                    inputName.value = '';
                    inputCode.value = '';
                    inputType.value = 'toilet';
                    inputShiftCount.value = '1';
                    currentRowEdit = null;
                }
            });
        }

        // Attach event listener to table for dynamic elements (Delete only now)
        document.querySelector('#locationsTable tbody').addEventListener('submit', function(e) {
            // Delete Form Handler
            if (e.target && e.target.classList.contains('delete-form')) {
                e.preventDefault(); // Stop immediate submission
                const form = e.target;
                Swal.fire({
                    title: 'Yakin ingin menghapus?',
                    text: 'Data yang dihapus tidak bisa dikembalikan!',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, Hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit(); // Continue submission if confirmed
                    }
                });
            }
        });

        // Modal Form AJAX Submission
        const modalAlertPlaceholder = document.getElementById('modalAlertPlaceholder');
        const modalBtnSubmit = document.getElementById('modalBtnSubmit');

        if(modalForm) {
            modalForm.addEventListener('submit', function(e) {
                e.preventDefault();
                modalBtnSubmit.disabled = true;
                modalBtnSubmit.innerHTML = '<i class="fa-solid fa-spinner fa-spin me-1"></i> Menyimpan...';
                
                const formData = new FormData(modalForm);
                const url = modalForm.getAttribute('action');
                
                fetch(url, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json().then(data => ({status: response.status, body: data})))
                .then(res => {
                    modalAlertPlaceholder.innerHTML = '';
                    modalBtnSubmit.disabled = false;
                    modalBtnSubmit.innerHTML = '<i class="fa-solid fa-save me-1"></i> Simpan';

                    if (res.status === 422) {
                        let errorHtml = '<ul class="mb-0">';
                        for (const [key, messages] of Object.entries(res.body.errors)) {
                            messages.forEach(msg => { errorHtml += `<li>${msg}</li>`; });
                        }
                        errorHtml += '</ul>';
                        modalAlertPlaceholder.innerHTML = `
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <strong>Gagal menyimpan!</strong> Periksa isian Anda.<br>${errorHtml}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        `;
                    } else if (res.status === 200 || res.status === 201) {
                        modalAlertPlaceholder.innerHTML = `
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <i class="fa-solid fa-circle-check me-1"></i> <strong>Berhasil!</strong> ${res.body.message}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        `;
                        // Success handling
                        const isEdit = modalMethod.value === 'PUT';
                        const locationId = res.body.location.id;
                        const name = inputName.value;
                        const code = inputCode.value;
                        const type = inputType.value;
                        const shiftCount = inputShiftCount.value;
                        const typeBadge = type === 'toilet' ? '<span class="badge" style="background-color: #0b4a99;">Toilet</span>' : '<span class="badge" style="background-color: #0d8a72;">Ruangan</span>';
                        
                        const editUrlBase = "{{ route('locations.edit', ':id') }}";
                        const destroyUrlBase = "{{ route('locations.destroy', ':id') }}";
                        const csrfToken = "{{ csrf_token() }}";
                        const destroyUrl = destroyUrlBase.replace(':id', locationId);

                        const rowContentHtml = `
                            <td><span class="badge bg-secondary">${code}</span></td>
                            <td class="fw-bold text-dark">${name}</td>
                            <td>${typeBadge}</td>
                            <td class="text-center"><span class="badge bg-info text-dark">${shiftCount} Shift</span></td>
                            <td class="text-center">
                                <button class="btn btn-sm btn-warning edit-btn" style="border-radius: 6px; color: #fff;" data-id="${locationId}" data-name="${name}" data-code="${code}" data-type="${type}" data-shift="${shiftCount}" data-bs-toggle="modal" data-bs-target="#tambahLokasiModal">
                                    <i class="fa-solid fa-pen-to-square"></i> Edit
                                </button>
                                <form action="${destroyUrl}" method="POST" class="d-inline delete-form">
                                    <input type="hidden" name="_token" value="${csrfToken}">
                                    <input type="hidden" name="_method" value="DELETE">
                                    <button type="submit" class="btn btn-sm btn-danger delete-btn" style="border-radius: 6px;">
                                        <i class="fa-solid fa-trash"></i> Hapus
                                    </button>
                                </form>
                            </td>
                        `;

                        if (isEdit && currentRowEdit) {
                            const oldType = currentRowEdit.getAttribute('data-category');
                            // Update existing row
                            currentRowEdit.setAttribute('data-name', name.toLowerCase());
                            currentRowEdit.setAttribute('data-code', code.toLowerCase());
                            currentRowEdit.setAttribute('data-category', type);
                            
                            // We keep the index cell, just replace the rest
                            const noCellHtml = currentRowEdit.querySelector('td:first-child').outerHTML;
                            currentRowEdit.innerHTML = noCellHtml + rowContentHtml;
                            
                            if (oldType !== type) {
                                const oldEl = document.getElementById(oldType === 'toilet' ? 'summaryToilet' : 'summaryRuangan');
                                const newEl = document.getElementById(type === 'toilet' ? 'summaryToilet' : 'summaryRuangan');
                                if(oldEl) oldEl.textContent = parseInt(oldEl.textContent) - 1;
                                if(newEl) newEl.textContent = parseInt(newEl.textContent) + 1;
                            }

                            // Optionally hide modal automatically on edit
                            setTimeout(() => {
                                const modalInstance = bootstrap.Modal.getInstance(document.getElementById('tambahLokasiModal'));
                                if (modalInstance) modalInstance.hide();
                            }, 1000);
                        } else {
                            // Append new row
                            const tbody = document.querySelector('#locationsTable tbody');
                            if (emptyRow) emptyRow.style.display = 'none';
                            
                            const newTr = document.createElement('tr');
                            newTr.className = 'location-row';
                            newTr.setAttribute('data-name', name.toLowerCase());
                            newTr.setAttribute('data-code', code.toLowerCase());
                            newTr.setAttribute('data-category', type);
                            
                            const currentRowsCount = document.querySelectorAll('#locationsTable tbody tr.location-row').length;
                            newTr.innerHTML = `<td>${currentRowsCount + 1}</td>` + rowContentHtml;
                            
                            tbody.appendChild(newTr);

                            // Update counters dynamically
                            const totalEl = document.getElementById('summaryTotal');
                            const typeEl = document.getElementById(type === 'toilet' ? 'summaryToilet' : 'summaryRuangan');
                            if(totalEl) totalEl.textContent = parseInt(totalEl.textContent) + 1;
                            if(typeEl) typeEl.textContent = parseInt(typeEl.textContent) + 1;

                            // Reset form for next insert
                            inputName.value = '';
                            inputCode.value = '';
                        }
                    } else {
                        modalAlertPlaceholder.innerHTML = `<div class="alert alert-danger">Kesalahan server.</div>`;
                    }
                })
                .catch(error => {
                    modalBtnSubmit.disabled = false;
                    modalBtnSubmit.innerHTML = '<i class="fa-solid fa-save me-1"></i> Simpan';
                    modalAlertPlaceholder.innerHTML = `<div class="alert alert-danger">Gagal terhubung!</div>`;
                });
            });
        }
    });
</script>
@endsection