@extends('layouts.app')

@section('title', 'Tambah Ongkir Kota - INUFA')
@section('header', 'Tambah Ongkir Kota')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="bg-white rounded-lg shadow-lg p-6 max-w-4xl mx-auto">
        <form action="{{ route('admin.ongkir-kota.store') }}" method="POST" id="ongkirForm">
            @csrf
            
            <div id="kota-container">
                <!-- Template untuk form kota -->
                <div class="kota-form mb-6 p-4 border rounded-lg bg-gray-50">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-gray-700 font-medium mb-2">Nama Kabupaten <span class="text-red-500">*</span></label>
                            <input type="text" name="kotas[0][nama_Kabupaten]" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                        </div>
                        <div>
                            <label class="block text-gray-700 font-medium mb-2">Biaya Ongkir (Rp) <span class="text-red-500">*</span></label>
                            <input type="number" name="kotas[0][biaya_ongkir]" min="0" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                        </div>
                    </div>
                    <button type="button" class="mt-2 text-red-600 hover:text-red-800 delete-kota" style="display: none;">
                        <i class="fas fa-trash mr-1"></i> Hapus Kota
                    </button>
                </div>
            </div>

            <div class="mb-6">
                <button type="button" id="tambahKota" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md">
                    <i class="fas fa-plus mr-1"></i> Tambah Kota Lain
                </button>
            </div>

            <div class="flex justify-end space-x-4">
                <a href="{{ route('admin.ongkir-kota.index') }}" class="px-4 py-2 bg-gray-300 text-gray-800 rounded-md hover:bg-gray-400">
                    Batal
                </a>
                <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                    Simpan
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('kota-container');
    const tambahKotaBtn = document.getElementById('tambahKota');
    let kotaCount = 1;

    // Fungsi untuk menambah form kota baru
    tambahKotaBtn.addEventListener('click', function() {
        const template = container.children[0].cloneNode(true);
        
        // Update nama field
        const inputs = template.querySelectorAll('input');
        inputs.forEach(input => {
            input.name = input.name.replace('[0]', `[${kotaCount}]`);
            input.value = '';
        });

        // Tampilkan tombol hapus
        const deleteBtn = template.querySelector('.delete-kota');
        deleteBtn.style.display = 'inline-flex';
        
        // Tambahkan event listener untuk tombol hapus
        deleteBtn.addEventListener('click', function() {
            template.remove();
        });

        container.appendChild(template);
        kotaCount++;
    });

    // Tampilkan tombol hapus jika ada lebih dari satu form
    const updateDeleteButtons = () => {
        const forms = container.children;
        const deleteButtons = container.querySelectorAll('.delete-kota');
        
        deleteButtons.forEach((btn, index) => {
            if (forms.length > 1) {
                btn.style.display = 'inline-flex';
            } else {
                btn.style.display = 'none';
            }
        });
    };

    // Event delegation untuk tombol hapus
    container.addEventListener('click', function(e) {
        if (e.target.classList.contains('delete-kota')) {
            e.target.closest('.kota-form').remove();
            updateDeleteButtons();
        }
    });
});
</script>
@endpush
@endsection