@extends('layouts.app')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0" style="font-weight: 700; color: #222;">
                    {{ isset($location) ? 'Edit Lokasi' : 'Tambah Lokasi Baru' }}
                </h4>
            </div>
            <div class="card-body">
                <div id="alertPlaceholder"></div>
                <form id="locationForm" action="{{ isset($location) ? route('locations.update', $location->id) : route('locations.store') }}" method="POST">
                    @csrf
                    @if(isset($location))
                        @method('PUT')
                    @endif

                    <div class="mb-4">
                        <label class="form-label" style="font-weight: 600; color: #444; font-size: 14px;">Nama Lokasi</label>
                        <input type="text" id="inputName" name="name" class="form-control" style="height: 48px; border-radius: 8px;" value="{{ old('name', isset($location) ? $location->name : '') }}" 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="inputCode" name="code" class="form-control" style="height: 48px; border-radius: 8px;" value="{{ old('code', isset($location) ? $location->code : '') }}" 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 petugas melakukan scan QR code.</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="inputType" name="type" class="form-select form-control" style="height: 48px; border-radius: 8px;" required>
                            <option value="toilet" {{ old('type', isset($location) ? $location->type : 'toilet') == 'toilet' ? 'selected' : '' }}>Toilet</option>
                            <option value="ruangan" {{ old('type', isset($location) ? $location->type : '') == 'ruangan' ? 'selected' : '' }}>Ruangan Lainnya</option>
                        </select>
                        <small class="text-muted mt-1 d-block"><i class="fa-solid fa-circle-info"></i> Mempengaruhi form apa yang akan muncul (Form Toilet / Form Ruangan).</small>
                    </div>

                    <div class="mb-4">
                        <label class="form-label" style="font-weight: 600; color: #444; font-size: 14px;">Jumlah Shift Scan</label>
                        <select id="inputShiftCount" name="shift_count" class="form-select form-control" style="height: 48px; border-radius: 8px;" required>
                            <option value="1" {{ old('shift_count', isset($location) ? $location->shift_count : 1) == 1 ? 'selected' : '' }}>1 Shift (Sekali sehari)</option>
                            <option value="2" {{ old('shift_count', isset($location) ? $location->shift_count : 1) == 2 ? 'selected' : '' }}>2 Shift (Dua kali sehari)</option>
                        </select>
                        <small class="text-muted mt-1 d-block"><i class="fa-solid fa-circle-info"></i> Pilih "2 Shift" jika lokasi ini dibersihkan dan discan dua kali dalam sehari.</small>
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <a href="{{ route('locations.index') }}" class="btn btn-light" style="border-radius: 8px; font-weight: 600;">Kembali ke Daftar</a>
                        <button type="submit" id="btnSubmit" 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 form = document.getElementById('locationForm');
        const alertPlaceholder = document.getElementById('alertPlaceholder');
        const btnSubmit = document.getElementById('btnSubmit');

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            btnSubmit.disabled = true;
            btnSubmit.innerHTML = '<i class="fa-solid fa-spinner fa-spin me-1"></i> Menyimpan...';
            
            const formData = new FormData(form);
            const url = form.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 => {
                alertPlaceholder.innerHTML = '';
                btnSubmit.disabled = false;
                btnSubmit.innerHTML = '<i class="fa-solid fa-save me-1"></i> Simpan';

                if (res.status === 422) {
                    // Validation errors
                    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>';
                    
                    alertPlaceholder.innerHTML = `
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <strong>Gagal menyimpan!</strong> Periksa kembali isian Anda.
                            ${errorHtml}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    `;
                } else if (res.status === 200 || res.status === 201) {
                    // Success
                    alertPlaceholder.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>
                    `;
                    
                    // Reset input fields if we are creating a new location
                    @if(!isset($location))
                        document.getElementById('inputName').value = '';
                        document.getElementById('inputCode').value = '';
                        // keep the type as is for convenience
                    @endif
                } else {
                    // Other server errors
                    alertPlaceholder.innerHTML = `
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <strong>Terjadi kesalahan server!</strong> Silakan coba lagi nanti.
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    `;
                }
            })
            .catch(error => {
                btnSubmit.disabled = false;
                btnSubmit.innerHTML = '<i class="fa-solid fa-save me-1"></i> Simpan';
                alertPlaceholder.innerHTML = `
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>Gagal terhubung!</strong> Periksa koneksi internet Anda.
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                `;
            });
        });
    });
</script>
@endsection