@extends('mitra.layouts.app')

@section('title', 'Edit Pengaturan SPPG')

@section('content')
    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div>
            <a href="{{ route('mitra.monitoring.show', $sppg) }}" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 flex items-center mb-4">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
                Kembali
            </a>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Edit Pengaturan SPPG</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ $sppg->nama }}</p>
        </div>
        <div class="shrink-0">
            <button type="button" id="sppg-edit-modal-open"
                class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-slate-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-slate-700 dark:text-gray-200 hover:bg-slate-50 dark:hover:bg-gray-700 transition">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
                </svg>
                Opsi: edit di modal
            </button>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border border-gray-200 dark:border-gray-700">
        <form action="{{ route('mitra.sppg.update', $sppg) }}" method="POST">
            @csrf
            @method('PUT')
            
            <div class="space-y-6">
                <div>
                    <label for="nama" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nama SPPG *</label>
                    <input type="text" name="nama" id="nama" value="{{ old('nama', $sppg->nama) }}" required
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('nama') border-red-500 @enderror">
                    @error('nama')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email *</label>
                    <input type="email" name="email" id="email" value="{{ old('email', $sppg->email) }}" required
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('email') border-red-500 @enderror">
                    @error('email')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="telepon" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Telepon</label>
                    <input type="text" name="telepon" id="telepon" value="{{ old('telepon', $sppg->telepon) }}"
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('telepon') border-red-500 @enderror">
                    @error('telepon')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="alamat" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Alamat</label>
                    <textarea name="alamat" id="alamat" rows="3"
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('alamat') border-red-500 @enderror">{{ old('alamat', $sppg->alamat) }}</textarea>
                    @error('alamat')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <div class="rounded-xl bg-slate-50 dark:bg-gray-700/50 p-4 border border-slate-200 dark:border-gray-600">
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Modal Awal (Bangun SPPG)</p>
                    <p class="text-xl font-bold text-violet-600 dark:text-violet-400">Rp {{ number_format($modalAwalDariInventory ?? 0, 0, ',', '.') }}</p>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Nilai inventory barang. Kelola di <a href="{{ route('mitra.inventory-barang.index', $sppg) }}" class="text-emerald-600 dark:text-emerald-400 hover:underline">Inventory Barang</a>.</p>
                </div>

                <div class="rounded-xl bg-slate-50 dark:bg-gray-700/50 p-4 border border-slate-200 dark:border-gray-600">
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Total Uang Masuk</p>
                    <p class="text-xl font-bold text-emerald-600 dark:text-emerald-400">Rp {{ number_format($sppg->total_uang_masuk ?? 0, 0, ',', '.') }}</p>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Dana dari keuangan (pembayaran disetujui). Diupdate otomatis saat Mitra menyetujui pembayaran.</p>
                </div>

                <div>
                    <label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Status *</label>
                    <select name="status" id="status" required
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('status') border-red-500 @enderror">
                        <option value="active" {{ old('status', $sppg->status) === 'active' ? 'selected' : '' }}>Aktif</option>
                        <option value="inactive" {{ old('status', $sppg->status) === 'inactive' ? 'selected' : '' }}>Tidak Aktif</option>
                    </select>
                    @error('status')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="sabtu_libur" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Hari Sabtu *</label>
                    <select name="sabtu_libur" id="sabtu_libur" required
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('sabtu_libur') border-red-500 @enderror">
                        <option value="1" {{ old('sabtu_libur', $sppg->sabtu_libur ?? true) ? 'selected' : '' }}>Libur (5 hari aktif: Senin-Jumat)</option>
                        <option value="0" {{ !old('sabtu_libur', $sppg->sabtu_libur ?? true) ? 'selected' : '' }}>Masuk (6 hari aktif: Senin-Sabtu)</option>
                    </select>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                        Pilih apakah hari Sabtu adalah hari libur untuk SPPG ini. Jika "Masuk", maka Sabtu akan aktif dan bisa di-planning di menu Planning Ahli Gizi.
                    </p>
                    @error('sabtu_libur')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex items-center justify-end space-x-4">
                    <a href="{{ route('mitra.monitoring.show', $sppg) }}" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-200">
                        Batal
                    </a>
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-200">
                        Update Pengaturan
                    </button>
                </div>
            </div>
        </form>
    </div>

    {{-- Opsi: form yang sama, dikirim lewat AJAX --}}
    <div id="sppg-edit-modal" class="fixed inset-0 z-[60] hidden" role="dialog" aria-modal="true" aria-labelledby="sppg-edit-modal-title">
        <div id="sppg-edit-modal-backdrop" class="absolute inset-0 bg-black/50 backdrop-blur-[2px]"></div>
        <div class="absolute inset-0 flex items-end sm:items-center justify-center p-0 sm:p-4 pointer-events-none">
            <div class="pointer-events-auto w-full sm:max-w-lg max-h-[92vh] overflow-y-auto rounded-t-2xl sm:rounded-xl bg-white dark:bg-gray-800 shadow-xl border border-gray-200 dark:border-gray-700">
                <div class="sticky top-0 z-10 flex items-center justify-between gap-3 px-5 py-4 border-b border-gray-200 dark:border-gray-700 bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm">
                    <h2 id="sppg-edit-modal-title" class="text-lg font-semibold text-gray-900 dark:text-white">Edit cepat (modal)</h2>
                    <button type="button" id="sppg-edit-modal-close" class="p-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700" aria-label="Tutup">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>
                <form id="sppg-edit-modal-form" class="p-5 space-y-4">
                    <div id="sppg-edit-modal-alert" class="hidden rounded-lg px-3 py-2 text-sm bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 border border-red-200 dark:border-red-800"></div>
                    <div>
                        <label for="modal-nama" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nama SPPG *</label>
                        <input type="text" name="nama" id="modal-nama" required
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="modal-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email *</label>
                        <input type="email" name="email" id="modal-email" required
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="modal-telepon" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Telepon</label>
                        <input type="text" name="telepon" id="modal-telepon"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="modal-alamat" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Alamat</label>
                        <textarea name="alamat" id="modal-alamat" rows="2"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                    <div>
                        <label for="modal-status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status *</label>
                        <select name="status" id="modal-status" required
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500">
                            <option value="active">Aktif</option>
                            <option value="inactive">Tidak Aktif</option>
                        </select>
                    </div>
                    <div>
                        <label for="modal-sabtu_libur" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Hari Sabtu *</label>
                        <select name="sabtu_libur" id="modal-sabtu_libur" required
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500">
                            <option value="1">Libur (5 hari aktif: Senin-Jumat)</option>
                            <option value="0">Masuk (6 hari aktif: Senin-Sabtu)</option>
                        </select>
                    </div>
                    <div class="flex flex-col-reverse sm:flex-row sm:justify-end gap-2 pt-2">
                        <button type="button" id="sppg-edit-modal-cancel" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">Batal</button>
                        <button type="submit" id="sppg-edit-modal-submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-60">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
    (function () {
        const modal = document.getElementById('sppg-edit-modal');
        const openBtn = document.getElementById('sppg-edit-modal-open');
        const closeBtn = document.getElementById('sppg-edit-modal-close');
        const cancelBtn = document.getElementById('sppg-edit-modal-cancel');
        const backdrop = document.getElementById('sppg-edit-modal-backdrop');
        const form = document.getElementById('sppg-edit-modal-form');
        const alertEl = document.getElementById('sppg-edit-modal-alert');
        const submitBtn = document.getElementById('sppg-edit-modal-submit');
        const updateUrl = @json(route('mitra.sppg.update', $sppg));
        const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

        function syncFromMainForm() {
            const pairs = [
                ['nama', 'modal-nama'],
                ['email', 'modal-email'],
                ['telepon', 'modal-telepon'],
                ['alamat', 'modal-alamat'],
                ['status', 'modal-status'],
                ['sabtu_libur', 'modal-sabtu_libur'],
            ];
            pairs.forEach(([mainId, modalId]) => {
                const main = document.getElementById(mainId);
                const el = document.getElementById(modalId);
                if (main && el) el.value = main.value;
            });
        }

        function syncToMainForm(payload) {
            const s = payload.sppg || {};
            if (s.nama != null) { const el = document.getElementById('nama'); if (el) el.value = s.nama; document.getElementById('modal-nama').value = s.nama; }
            if (s.email != null) { const el = document.getElementById('email'); if (el) el.value = s.email; document.getElementById('modal-email').value = s.email; }
            if (s.telepon !== undefined) { const el = document.getElementById('telepon'); if (el) el.value = s.telepon || ''; document.getElementById('modal-telepon').value = s.telepon || ''; }
            if (s.alamat !== undefined) { const el = document.getElementById('alamat'); if (el) el.value = s.alamat || ''; document.getElementById('modal-alamat').value = s.alamat || ''; }
            if (s.status != null) { const el = document.getElementById('status'); if (el) el.value = s.status; document.getElementById('modal-status').value = s.status; }
            if (s.sabtu_libur !== undefined) {
                const v = s.sabtu_libur ? '1' : '0';
                const el = document.getElementById('sabtu_libur'); if (el) el.value = v;
                document.getElementById('modal-sabtu_libur').value = v;
            }
        }

        function openModal() {
            alertEl.classList.add('hidden');
            alertEl.textContent = '';
            syncFromMainForm();
            modal.classList.remove('hidden');
            document.body.classList.add('overflow-hidden');
        }

        function closeModal() {
            modal.classList.add('hidden');
            document.body.classList.remove('overflow-hidden');
        }

        openBtn?.addEventListener('click', openModal);
        closeBtn?.addEventListener('click', closeModal);
        cancelBtn?.addEventListener('click', closeModal);
        backdrop?.addEventListener('click', closeModal);

        form?.addEventListener('submit', async function (e) {
            e.preventDefault();
            alertEl.classList.add('hidden');
            alertEl.textContent = '';
            const sabtuVal = document.getElementById('modal-sabtu_libur').value;
            const body = {
                nama: document.getElementById('modal-nama').value,
                email: document.getElementById('modal-email').value,
                telepon: document.getElementById('modal-telepon').value,
                alamat: document.getElementById('modal-alamat').value,
                status: document.getElementById('modal-status').value,
                sabtu_libur: sabtuVal === '1' || sabtuVal === 'true' || sabtuVal === true,
            };
            submitBtn.disabled = true;
            try {
                const res = await fetch(updateUrl, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': token,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify(body),
                });
                const data = await res.json().catch(() => ({}));
                if (res.ok) {
                    syncToMainForm(data);
                    closeModal();
                    if (typeof window.showToast === 'function') {
                        window.showToast(data.message || 'Tersimpan.', 'success');
                    } else {
                        alert(data.message || 'Pengaturan SPPG berhasil diperbarui.');
                    }
                } else if (res.status === 422 && data.errors) {
                    const lines = Object.values(data.errors).flat().join(' ');
                    alertEl.textContent = lines || 'Validasi gagal.';
                    alertEl.classList.remove('hidden');
                } else {
                    alertEl.textContent = data.message || 'Gagal menyimpan. Coba lagi.';
                    alertEl.classList.remove('hidden');
                }
            } catch (err) {
                alertEl.textContent = 'Koneksi gagal. Periksa jaringan lalu coba lagi.';
                alertEl.classList.remove('hidden');
            } finally {
                submitBtn.disabled = false;
            }
        });
    })();
    </script>
    @endpush
@endsection