<div class="container mx-auto px-4 py-6">
    <div class="flex items-center mb-6">
        <a href="<?= base_url('admin/stocks/warehouses') ?>" class="text-blue-600 hover:text-blue-800 mr-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
        </a>
        <h1 class="text-2xl font-bold text-[#333]">Ubah Gudang</h1>
    </div>

    <!-- Flash Messages -->
    <?php if ($this->session->flashdata('message')): ?>
        <div class="alert flex items-center justify-between mb-2 bg-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-100 border-l-4 border-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-500 text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-800 px-6 py-4 rounded-lg shadow-lg transition transform duration-300">
            <div class="flex items-center">
                <i data-feather="<?php echo $this->session->flashdata('message_type') === 'success' ? 'check-circle' : 'x-circle'; ?>" class="h-6 w-6 mr-3"></i>
                <span class="font-normal text-sm"><?php echo $this->session->flashdata('message'); ?></span>
            </div>
            <button class="ml-4 text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-500 hover:text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-700 focus:outline-none" onclick="this.parentElement.style.display='none'">
                <i data-feather="x" class="h-5 w-5"></i>
            </button>
        </div>
    <?php endif; ?>

    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="px-4">
            <?= form_open_multipart('admin/warehouses/update_warehouse/' . $warehouse->id, 'class="space-y-4"') ?>

            <div>
                <label for="name" class="block text-sm font-medium text-[#333] mb-1">Nama Gudang</label>
                <input type="text" name="name" id="name" value="<?= $warehouse->name ?>" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Masukin nama gudangnya" required>
            </div>
            <div>
                <label for="alias" class="block text-sm font-medium text-[#333] mb-1">Alias</label>
                <input type="text" name="alias" id="alias" value="<?= $warehouse->alias ?>" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Masukin alias gudangnya" required>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="address" class="block text-sm font-medium text-[#333] mb-1">Alamat</label>
                    <textarea name="address" id="address" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Masukin alamat gudangnya"><?= $warehouse->address ?></textarea>
                </div>
                <div>
                    <label for="phone" class="block text-sm font-medium text-[#333] mb-1">Nomor Telfon</label>
                    <input type="text" name="phone" id="phone" value="<?= $warehouse->phone ?>" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Nomor yang bisa dihubungi" required>
                </div>
            </div>

            <!-- Province -->
            <div>
                <div class="w-1/3">
                    <div class="flex items-center gap-2 mb-2">
                        <label class="text-[#333] font-medium text-sm">Provinsi</label>
                    </div>
                </div>

                <div class="w-full">
                    <select
                        id="province_id"
                        name="province_id"
                        required
                        class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333]">
                        <option value="" disabled>Pilih Provinsi</option>
                        <?php foreach ($provinces as $province): ?>
                            <option value="<?= $province->id ?>" <?= ($warehouse->id_province == $province->id) ? 'selected' : '' ?>><?= $province->name ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>

            <!-- District -->
            <div>
                <div class="w-1/3">
                    <div class="flex items-center gap-2 mb-2">
                        <label class="text-[#333] font-medium text-sm">Kabupaten/Kota</label>
                    </div>
                </div>

                <div class="w-full">
                    <select
                        id="district_id"
                        name="district_id"
                        required
                        class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333]">
                        <option value="" disabled>Pilih Kabupaten/Kota</option>
                        <!-- District options akan dimuat via JavaScript -->
                    </select>
                </div>
            </div>

            <!-- Subdistrict -->
            <div>
                <div class="w-1/3">
                    <div class="flex items-center gap-2 mb-2">
                        <label class="text-[#333] font-medium text-sm">Kecamatan</label>
                    </div>
                </div>

                <div class="w-full">
                    <select
                        id="subdistrict_id"
                        name="subdistrict_id"
                        required
                        class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333]">
                        <option value="" disabled>Pilih Kecamatan</option>
                        <!-- Subdistrict options akan dimuat via JavaScript -->
                    </select>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex items-center justify-end space-x-3 py-4">
                <a href="<?= site_url('admin/stocks/warehouses') ?>" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-[#333] bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                    Batal
                </a>
                <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-[#7A4397] hover:bg-white hover:border-[#7A4397] hover:text-[#7A4397] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    Update Gudang
                </button>
            </div>
            <?= form_close() ?>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Ambil elemen yang diperlukan
        const provinceSelect = document.getElementById('province_id');
        const districtSelect = document.getElementById('district_id');
        const subdistrictSelect = document.getElementById('subdistrict_id');

        // Data warehouse yang sudah ada
        const currentProvinceId = '<?= $warehouse->id_province ?>';
        const currentDistrictId = '<?= $warehouse->id_district ?>';
        const currentSubdistrictId = '<?= $warehouse->id_subdistrict ?>';

        // Get the CSRF token elements properly
        const CSRF_TOKEN = "<?= $this->security->get_csrf_token_name(); ?>";
        const CSRF_HASH = "<?= $this->security->get_csrf_hash(); ?>";

        // Track current CSRF token
        let csrfData = {
            name: CSRF_TOKEN,
            value: CSRF_HASH
        };

        // Setup fungsi untuk memperbarui CSRF token
        function updateCsrfToken(newToken) {
            if (newToken) {
                csrfData.value = newToken;
            }
        }

        // Fungsi untuk memuat kabupaten/kota
        function loadDistricts(provinceId, selectedDistrictId = null) {
            if (!provinceId) return;

            // Reset dropdown district dan subdistrict
            districtSelect.innerHTML = '<option value="" disabled selected>Memuat data...</option>';
            districtSelect.disabled = true;
            districtSelect.classList.add('bg-gray-100');

            if (!selectedDistrictId) {
                subdistrictSelect.innerHTML = '<option value="" disabled selected>Pilih Kabupaten/Kota Dulu</option>';
                subdistrictSelect.disabled = true;
                subdistrictSelect.classList.add('bg-gray-100');
            }

            // Buat form data untuk request
            const formData = new FormData();
            formData.append('province_id', provinceId);
            formData.append(csrfData.name, csrfData.value);

            // Kirim request Ajax
            fetch('<?= base_url('admin/customers/getDistricts') ?>', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    // Update CSRF token
                    updateCsrfToken(data.csrf_token);

                    if (data.status === 'success') {
                        let options = '<option value="" disabled>Pilih Kabupaten/Kota</option>';
                        data.data.forEach(district => {
                            const selected = selectedDistrictId && district.id == selectedDistrictId ? 'selected' : '';
                            options += `<option value="${district.id}" ${selected}>${district.name}</option>`;
                        });

                        districtSelect.innerHTML = options;
                        districtSelect.disabled = false;
                        districtSelect.classList.remove('bg-gray-100');

                        // Jika ada district yang dipilih, load subdistricts
                        if (selectedDistrictId) {
                            loadSubdistricts(selectedDistrictId, currentSubdistrictId);
                        }
                    } else {
                        alert('Gagal memuat data kabupaten/kota: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Terjadi kesalahan saat memuat data kabupaten/kota');
                });
        }

        // Fungsi untuk memuat kecamatan
        function loadSubdistricts(districtId, selectedSubdistrictId = null) {
            if (!districtId) return;

            // Reset dropdown subdistrict
            subdistrictSelect.innerHTML = '<option value="" disabled selected>Memuat data...</option>';
            subdistrictSelect.disabled = true;
            subdistrictSelect.classList.add('bg-gray-100');

            // Buat form data untuk request
            const formData = new FormData();
            formData.append('district_id', districtId);
            formData.append(csrfData.name, csrfData.value);

            // Kirim request Ajax
            fetch('<?= base_url('admin/customers/getSubdistricts') ?>', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    // Update CSRF token
                    updateCsrfToken(data.csrf_token);

                    if (data.status === 'success') {
                        let options = '<option value="" disabled>Pilih Kecamatan</option>';
                        data.data.forEach(subdistrict => {
                            const selected = selectedSubdistrictId && subdistrict.id == selectedSubdistrictId ? 'selected' : '';
                            options += `<option value="${subdistrict.id}" ${selected}>${subdistrict.name}</option>`;
                        });

                        subdistrictSelect.innerHTML = options;
                        subdistrictSelect.disabled = false;
                        subdistrictSelect.classList.remove('bg-gray-100');
                    } else {
                        alert('Gagal memuat data kecamatan: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Terjadi kesalahan saat memuat data kecamatan');
                });
        }

        // Event listener untuk perubahan dropdown provinsi
        provinceSelect.addEventListener('change', function() {
            loadDistricts(this.value);
        });

        // Event listener untuk perubahan dropdown district
        districtSelect.addEventListener('change', function() {
            loadSubdistricts(this.value);
        });

        // Load data saat halaman pertama kali dimuat
        if (currentProvinceId) {
            loadDistricts(currentProvinceId, currentDistrictId);
        }
    });
</script>