@extends('layout.temp')

@section('content')
<div class="container py-5" style="font-family: 'Plus Jakarta Sans', sans-serif;">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
                <div class="card-header bg-primary text-white p-4 border-0">
                    <h4 class="fw-bold mb-0"><i class="lni lni-map-marker me-2"></i>Tambah Alamat Baru</h4>
                    <p class="small opacity-75 mb-0">Pastikan alamat penjemputan sudah sesuai untuk mempercepat proses teknisi.</p>
                </div>
                <div class="card-body p-4 p-md-5">
                    <form action="{{ route('address.store') }}" method="POST">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted">NAMA PENERIMA</label>
                                <input type="text" name="nama_penerima" class="form-control bg-light border-0 py-3 rounded-3 shadow-none" placeholder="Cth: Budi Santoso" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted">NO. WHATSAPP</label>
                                <input type="text" name="no_hp" class="form-control bg-light border-0 py-3 rounded-3 shadow-none" placeholder="0812..." required>
                            </div>

                            {{-- Cascading Dropdown --}}
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted">PROVINSI</label>
                                <select name="province_id" id="province_create" class="form-select bg-light border-0 py-3 rounded-3 shadow-none" required>
                                    <option value="">Pilih Provinsi</option>
                                    @foreach($provinces as $province)
                                        <option value="{{ $province->id }}">{{ $province->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted">KOTA / KABUPATEN</label>
                                <select name="regency_id" id="regency_create" class="form-select bg-light border-0 py-3 rounded-3 shadow-none" required>
                                    <option value="">Pilih Kota</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted">KECAMATAN</label>
                                <select name="district_id" id="district_create" class="form-select bg-light border-0 py-3 rounded-3 shadow-none" required>
                                    <option value="">Pilih Kecamatan</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted">KELURAHAN</label>
                                <select name="village_id" id="village_create" class="form-select bg-light border-0 py-3 rounded-3 shadow-none" required>
                                    <option value="">Pilih Kelurahan</option>
                                </select>
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-bold small text-muted">DETAIL ALAMAT LENGKAP</label>
                                <textarea name="alamat_lengkap" class="form-control bg-light border-0 p-3 rounded-3 shadow-none" rows="3" placeholder="Nama Jalan, No. Rumah, RT/RW, Patokan..." required></textarea>
                            </div>
                        </div>

                        <div class="mt-4 d-flex gap-2">
                            <a href="{{ url()->previous() }}" class="btn btn-light fw-bold py-3 px-4 rounded-3 w-100">BATAL</a>
                            <button type="submit" class="btn btn-primary fw-bold py-3 px-4 rounded-3 w-100 shadow-sm">SIMPAN ALAMAT</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#province_create').change(function() {
            fetch('/regencies/' + $(this).val()).then(res => res.json()).then(data => {
                $('#regency_create').html('<option value="">Pilih Kota</option>');
                data.forEach(i => $('#regency_create').append(`<option value="${i.id}">${i.name}</option>`));
            });
        });
        $('#regency_create').change(function() {
            fetch('/districts/' + $(this).val()).then(res => res.json()).then(data => {
                $('#district_create').html('<option value="">Pilih Kecamatan</option>');
                data.forEach(i => $('#district_create').append(`<option value="${i.id}">${i.name}</option>`));
            });
        });
        $('#district_create').change(function() {
            fetch('/villages/' + $(this).val()).then(res => res.json()).then(data => {
                $('#village_create').html('<option value="">Pilih Kelurahan</option>');
                data.forEach(i => $('#village_create').append(`<option value="${i.id}">${i.name}</option>`));
            });
        });
    });
</script>
@endsection