@extends('layout.layout')
@php
    $title='Tambah Pengumuman Kegiatan';
    $subTitle = 'Tambah Data Pengumuman Kegiatan';
    $script = '<script>
                    // Form validation and date picker initialization
                    document.addEventListener("DOMContentLoaded", function() {
                        // Initialize date picker if using flatpickr
                        if (typeof flatpickr !== "undefined") {
                            flatpickr("#tanggal_mulai", {
                                dateFormat: "Y-m-d",
                                minDate: "today"
                            });
                        }

                        // Form validation
                        const form = document.getElementById("createForm");
                        if (form) {
                            form.addEventListener("submit", function(e) {
                                const requiredFields = form.querySelectorAll("[required]");
                                let isValid = true;

                                requiredFields.forEach(field => {
                                    if (!field.value.trim()) {
                                        isValid = false;
                                        field.classList.add("is-invalid");
                                    } else {
                                        field.classList.remove("is-invalid");
                                    }
                                });

                                if (!isValid) {
                                    e.preventDefault();
                                    alert("Mohon lengkapi semua field yang wajib diisi");
                                }
                            });
                        }
                    });
               </script>';
@endphp

@section('content')
<div class="card">
    <div class="card-body">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4">
            <div>
                <h5 class="mb-0">Tambah Pengumuman Kegiatan</h5>
                <p class="text-muted mb-0">Masukkan informasi lengkap mengenai kegiatan yang akan diumumkan</p>
            </div>
            <div>
                <a href="{{ route('pengumuman.index') }}" class="btn btn-outline-primary">
                    <i class="ri-arrow-left-line"></i> Kembali
                </a>
            </div>
        </div>

        <form id="createForm" action="{{ route('pengumuman.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <!-- Left Column -->
                <div class="col-md-8">
                    <!-- Basic Information -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-primary-subtle">
                            <h6 class="mb-0 text-primary">Informasi Dasar</h6>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="jenis_dokumen" class="form-label">Jenis Dokumen <span class="text-danger">*</span></label>
                                <select class="form-select @error('jenis_dokumen') is-invalid @enderror"
                                        id="jenis_dokumen" name="jenis_dokumen" required>
                                    <option value="">Pilih Jenis Dokumen</option>
                                    <option value="AMDAL" {{ old('jenis_dokumen') == 'AMDAL' ? 'selected' : '' }}>AMDAL</option>
                                    <option value="Addendum" {{ old('jenis_dokumen') == 'Addendum' ? 'selected' : '' }}>Addendum</option>
                                    <option value="UKL-UPL" {{ old('jenis_dokumen') == 'UKL-UPL' ? 'selected' : '' }}>UKL-UPL</option>
                                </select>
                                @error('jenis_dokumen')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="nama_kegiatan" class="form-label">Nama Kegiatan <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('nama_kegiatan') is-invalid @enderror"
                                       id="nama_kegiatan" name="nama_kegiatan" value="{{ old('nama_kegiatan') }}" required>
                                @error('nama_kegiatan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="pemrakarsa" class="form-label">Pemrakarsa/Perusahaan <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('pemrakarsa') is-invalid @enderror"
                                           id="pemrakarsa" name="pemrakarsa" value="{{ old('pemrakarsa') }}" required>
                                    @error('pemrakarsa')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label for="bidang_usaha" class="form-label">Bidang Usaha <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('bidang_usaha') is-invalid @enderror"
                                           id="bidang_usaha" name="bidang_usaha" value="{{ old('bidang_usaha') }}" required>
                                    @error('bidang_usaha')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="deskripsi_kegiatan" class="form-label">Deskripsi Kegiatan <span class="text-danger">*</span></label>
                                <textarea class="form-control @error('deskripsi_kegiatan') is-invalid @enderror"
                                          id="deskripsi_kegiatan" name="deskripsi_kegiatan" rows="4" required>{{ old('deskripsi_kegiatan') }}</textarea>
                                @error('deskripsi_kegiatan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="dampak_potensial" class="form-label">Dampak Potensial <span class="text-danger">*</span></label>
                                <textarea class="form-control @error('dampak_potensial') is-invalid @enderror"
                                          id="dampak_potensial" name="dampak_potensial" rows="3" required>{{ old('dampak_potensial') }}</textarea>
                                @error('dampak_potensial')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Location Information -->
                    <div class="card border-0 shadow-sm mb-4">
                          <div class="card-header bg-primary-subtle">
                            <h6 class="mb-0 text-primary">Informasi Lokasi</h6>
                        </div>
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="kabupaten" class="form-label">Kabupaten <span class="text-danger">*</span></label>
                                    <select class="form-select @error('kabupaten') is-invalid @enderror"
                                            id="kabupaten" name="kabupaten" required onchange="loadKecamatan()">
                                        <option value="">Pilih Kabupaten</option>
                                        @foreach($kabupaten as $kab)
                                            <option value="{{ $kab->KabupatenId }}" {{ old('kabupaten') == $kab->KabupatenId ? 'selected' : '' }}>
                                                {{ $kab->NamaKabupaten }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('kabupaten')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4">
                                    <label for="kecamatan" class="form-label">Kecamatan <span class="text-danger">*</span></label>
                                    <select class="form-select @error('kecamatan') is-invalid @enderror"
                                            id="kecamatan" name="kecamatan" required onchange="loadKelurahan()">
                                        <option value="">Pilih Kecamatan</option>
                                    </select>
                                    @error('kecamatan')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4">
                                    <label for="kelurahan" class="form-label">Kelurahan <span class="text-danger">*</span></label>
                                    <select class="form-select @error('kelurahan') is-invalid @enderror"
                                            id="kelurahan" name="kelurahan" required>
                                        <option value="">Pilih Kelurahan</option>
                                    </select>
                                    @error('kelurahan')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="lokasi_kegiatan" class="form-label">Lokasi Kegiatan</label>
                                    <textarea type="text" class="form-control @error('lokasi_kegiatan') is-invalid @enderror"
                                           id="lokasi_kegiatan" name="lokasi_kegiatan" value="{{ old('lokasi_kegiatan') }}"></textarea>
                                    @error('lokasi_kegiatan')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="deskripsi_lokasi" class="form-label">Deskripsi Lokasi <span class="text-danger">*</span></label>
                                <textarea class="form-control @error('deskripsi_lokasi') is-invalid @enderror"
                                          id="deskripsi_lokasi" name="deskripsi_lokasi" rows="3" required>{{ old('deskripsi_lokasi') }}</textarea>
                                @error('deskripsi_lokasi')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="latitude" class="form-label">Latitude</label>
                                    <input type="number" step="any" class="form-control @error('latitude') is-invalid @enderror"
                                           id="latitude" name="latitude" value="{{ old('latitude') }}" placeholder="-6.2000000">
                                    @error('latitude')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label for="longitude" class="form-label">Longitude</label>
                                    <input type="number" step="any" class="form-control @error('longitude') is-invalid @enderror"
                                           id="longitude" name="longitude" value="{{ old('longitude') }}" placeholder="106.8000000">
                                    @error('longitude')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Column -->
                <div class="col-md-4">
                    <!-- Settings -->
                    <div class="card border-0 shadow-sm mb-4">
                          <div class="card-header bg-primary-subtle">
                            <h6 class="mb-0 text-primary">Pengaturan</h6>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="tanggal_mulai" class="form-label">Tanggal Mulai Periode <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('tanggal_mulai') is-invalid @enderror"
                                       id="tanggal_mulai" name="tanggal_mulai" value="{{ old('tanggal_mulai') }}" required>
                                <small class="text-muted">Periode berakhir otomatis setelah 10 hari kerja</small>
                                @error('tanggal_mulai')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="skala_besaran" class="form-label">Skala/Besaran</label>
                                <input type="text" class="form-control @error('skala_besaran') is-invalid @enderror"
                                       id="skala_besaran" name="skala_besaran" value="{{ old('skala_besaran') }}"
                                       placeholder="1000 ton/tahun">
                                @error('skala_besaran')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="kewenangan" class="form-label">Kewenangan <span class="text-danger">*</span></label>
                                <select class="form-select @error('kewenangan') is-invalid @enderror"
                                        id="kewenangan" name="kewenangan" required>
                                    <option value="">Pilih Kewenangan</option>
                                    <option value="Pusat" {{ old('kewenangan') == 'Pusat' ? 'selected' : '' }}>Pusat</option>
                                    <option value="Provinsi" {{ old('kewenangan') == 'Provinsi' ? 'selected' : '' }}>Provinsi</option>
                                    <option value="Daerah" {{ old('kewenangan') == 'Daerah' ? 'selected' : '' }}>Daerah</option>
                                </select>
                                @error('kewenangan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Hidden status field with default value -->
                            <input type="hidden" name="status" value="aktif">
                        </div>
                    </div>

                    <!-- Preview -->
                    <div class="card border-0 shadow-sm">
                          <div class="card-header bg-primary-subtle">
                            <h6 class="mb-0 text-primary">Preview Periode</h6>
                        </div>
                        <div class="card-body">
                            <div class="text-center">
                                <div class="text-muted small mb-2">Periode Pengumuman</div>
                                <div id="periode-preview" class="fw-bold text-primary">
                                    Pilih tanggal mulai untuk melihat periode
                                </div>
                                <small class="text-muted">
                                    *Menghitung 10 hari kerja (tidak termasuk sabtu, minggu, dan tanggal merah)
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="d-flex justify-content-end gap-2 mt-4">
                <a href="{{ route('pengumuman.index') }}" class="btn btn-outline-secondary">
                    <i class="ri-close-line"></i> Batal
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="ri-save-line"></i> Simpan Pengumuman
                </button>
            </div>
        </form>
    </div>
</div>

<script>
// Preview periode calculation
document.getElementById('tanggal_mulai').addEventListener('change', function() {
    const startDate = this.value;
    if (startDate) {
        // You can implement AJAX call here to get calculated end date
        // For now, just show a simple preview
        const preview = document.getElementById('periode-preview');
        const start = new Date(startDate);
        const options = { day: 'numeric', month: 'short', year: 'numeric' };
        const startFormatted = start.toLocaleDateString('id-ID', options);

        preview.innerHTML = `${startFormatted} - <span class="text-muted">Menghitung...</span>`;

        // AJAX call to calculate end date
        fetch('/admin/pengumuman/calculate-period', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ start_date: startDate })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                preview.innerHTML = data.periode;
            }
        })
        .catch(() => {
            preview.innerHTML = `${startFormatted} - (Error calculating)`;
        });
    }
});

// Load kecamatan based on selected kabupaten
function loadKecamatan() {
    const kabupatenSelect = document.getElementById('kabupaten');
    const kecamatanSelect = document.getElementById('kecamatan');
    const kelurahanSelect = document.getElementById('kelurahan');

    if (!kabupatenSelect || !kecamatanSelect || !kelurahanSelect) {
        console.error('Required select elements not found');
        return;
    }

    const selectedKabupaten = kabupatenSelect.value;

    // Clear kecamatan and kelurahan
    kecamatanSelect.innerHTML = '<option value="">Pilih Kecamatan</option>';
    kelurahanSelect.innerHTML = '<option value="">Pilih Kelurahan</option>';

    if (selectedKabupaten) {
        // Show loading state
        kecamatanSelect.innerHTML = '<option value="">Loading...</option>';

        // Get CSRF token
        const csrfToken = document.querySelector('meta[name="csrf-token"]');
        const token = csrfToken ? csrfToken.getAttribute('content') : '';

        // Fetch kecamatan from database
        const url = `/admin/pengumuman/get-kecamatan?kabupaten_id=${selectedKabupaten}`;

        fetch(url, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': token
            }
        })
            .then(response => {
                if (!response.ok) {
                    return response.text().then(text => {
                        throw new Error(`HTTP ${response.status}: ${text}`);
                    });
                }
                return response.json();
            })
            .then(data => {
                kecamatanSelect.innerHTML = '<option value="">Pilih Kecamatan</option>';

                if (Array.isArray(data) && data.length > 0) {
                    data.forEach(kecamatan => {
                        const option = document.createElement('option');
                        option.value = kecamatan.KecamatanId;
                        option.textContent = kecamatan.NamaKecamatan;
                        kecamatanSelect.appendChild(option);
                    });
                } else {
                    kecamatanSelect.innerHTML = '<option value="">No data available</option>';
                }
            })
            .catch(error => {
                console.error('Error loading kecamatan:', error);
                kecamatanSelect.innerHTML = '<option value="">Error loading data</option>';
            });
    }
}

// Load kelurahan based on selected kecamatan
function loadKelurahan() {
    const kecamatanSelect = document.getElementById('kecamatan');
    const kelurahanSelect = document.getElementById('kelurahan');

    if (!kecamatanSelect || !kelurahanSelect) {
        console.error('Required select elements not found');
        return;
    }

    const selectedKecamatan = kecamatanSelect.value;

    // Clear kelurahan
    kelurahanSelect.innerHTML = '<option value="">Pilih Kelurahan</option>';

    if (selectedKecamatan) {
        // Show loading state
        kelurahanSelect.innerHTML = '<option value="">Loading...</option>';

        // Get CSRF token
        const csrfToken = document.querySelector('meta[name="csrf-token"]');
        const token = csrfToken ? csrfToken.getAttribute('content') : '';

        // Fetch kelurahan from database
        const url = `/admin/pengumuman/get-kelurahan?kecamatan_id=${selectedKecamatan}`;

        fetch(url, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': token
            }
        })
            .then(response => {
                if (!response.ok) {
                    return response.text().then(text => {
                        throw new Error(`HTTP ${response.status}: ${text}`);
                    });
                }
                return response.json();
            })
            .then(data => {
                kelurahanSelect.innerHTML = '<option value="">Pilih Kelurahan</option>';

                if (Array.isArray(data) && data.length > 0) {
                    data.forEach(kelurahan => {
                        const option = document.createElement('option');
                        option.value = kelurahan.KelurahanId;
                        option.textContent = kelurahan.NamaKelurahan;
                        kelurahanSelect.appendChild(option);
                    });
                } else {
                    kelurahanSelect.innerHTML = '<option value="">No data available</option>';
                }
            })
            .catch(error => {
                console.error('Error loading kelurahan:', error);
                kelurahanSelect.innerHTML = '<option value="">Error loading data</option>';
            });
    }
}
</script>
@endsection