@extends('operator.layout')

@section('title','Identitas Sekolah')

@section('content')
    <div style="background:#fff;border:1px solid #e6e6e6;border-radius:8px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,0.04)">
        <div style="padding:12px 16px;border-bottom:1px solid #f1f1f1;font-weight:700;background:#fafafa;display:flex;align-items:center;gap:8px">
            <i class="bi bi-card-list" style="font-size:16px;color:var(--header-bg);margin-right:8px"></i>
            <span class="card-title">Identitas Sekolah</span>
        </div>
        <div class="card-body" style="padding:16px">
            @if(session('success'))
                <div style="margin-bottom:12px;padding:10px;border:1px solid #d4edda;background:#e6ffed;color:#155724;border-radius:6px">{{ session('success') }}</div>
            @endif

            <form id="sekolahForm" method="POST" action="{{ route('operator.sekolah.save') }}" enctype="multipart/form-data">
                @csrf
                <div style="display:flex;flex-direction:column;gap:12px">
                    <div style="display:flex;flex-direction:column;gap:12px">
                        <div style="min-width:260px;max-width:260px">
                            <label style="display:block;font-weight:600;margin-bottom:6px">Operator</label>
                            <input name="operator" value="{{ auth()->user()->username ?? auth()->user()->name }}" readonly style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px;background:#f8f9fa;cursor:not-allowed;" />
                            <input type="hidden" name="operator_id" value="{{ auth()->user()->id }}" />
                        </div>

                        <div style="flex:2;min-width:320px">
                            @php $ns_locked = isset($sekolah) && !empty($sekolah->nama_sekolah); @endphp
                            <label style="display:block;font-weight:600;margin-bottom:6px">Nama Sekolah
                                @if($ns_locked)
                                    <i class="bi bi-lock-fill" title="Terkunci" style="margin-left:8px;color:#6c757d;font-size:0.95rem"></i>
                                @endif
                            </label>
                            <input name="nama_sekolah" value="{{ old('nama_sekolah', isset($sekolah) ? $sekolah->nama_sekolah : '') }}" {{ $ns_locked ? 'readonly' : '' }} style="width:100%;max-width:640px;padding:8px;border:1px solid #e6e6e6;border-radius:6px;{{ $ns_locked ? 'background:#f8f9fa;cursor:not-allowed;' : '' }}" />
                        </div>
                    </div>

                    <div style="display:flex;gap:24px;flex-wrap:wrap">
                        <div style="width:180px;min-width:140px">
                            <label style="display:block;font-weight:600;margin-bottom:6px">NSS</label>
                            <input name="nss" value="{{ old('nss', isset($sekolah) ? $sekolah->nss : '') }}" style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px" />
                        </div>

                        <div style="width:180px;min-width:140px">
                            <label style="display:block;font-weight:600;margin-bottom:6px">NPSN</label>
                            <input name="npsn" value="{{ old('npsn', isset($sekolah) ? $sekolah->npsn : '') }}" style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px" />
                        </div>

                        <div style="width:140px;min-width:120px">
                            <label style="display:block;font-weight:600;margin-bottom:6px">Jenjang</label>
                            <select name="jenjang" style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px">
                                <option value="">Pilih...</option>
                                <option value="SD" {{ old('jenjang', isset($sekolah) ? $sekolah->jenjang : '')=='SD' ? 'selected' : '' }}>SD</option>
                                <option value="SMP" {{ old('jenjang', isset($sekolah) ? $sekolah->jenjang : '')=='SMP' ? 'selected' : '' }}>SMP</option>
                                <option value="SMA" {{ old('jenjang', isset($sekolah) ? $sekolah->jenjang : '')=='SMA' ? 'selected' : '' }}>SMA</option>
                                <option value="SMK" {{ old('jenjang', isset($sekolah) ? $sekolah->jenjang : '')=='SMK' ? 'selected' : '' }}>SMK</option>
                            </select>
                        </div>
                    </div>

                    <div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:6px">
                        <div style="flex:1;min-width:240px">
                            <label style="display:block;font-weight:600;margin-bottom:6px">Email Sekolah</label>
                            <input name="email" value="{{ old('email', isset($sekolah) ? $sekolah->email : '') }}" type="email" style="width:100%;max-width:640px;padding:8px;border:1px solid #e6e6e6;border-radius:6px" />
                        </div>
                    </div>

                <div style="margin-top:12px">
                    <label style="display:block;font-weight:600;margin-bottom:6px">Alamat Sekolah</label>
                    <textarea name="alamat" style="width:100%;max-width:640px;padding:8px;border:1px solid #e6e6e6;border-radius:6px;font-family:Segoe UI,Arial,sans-serif;font-size:14px;line-height:1.4" rows="4">{{ old('alamat', isset($sekolah) ? $sekolah->alamat : '') }}</textarea>
                </div>

                <div style="margin-top:12px">
                    <label style="display:block;font-weight:600;margin-bottom:6px">Logo Sekolah (upload)</label>
                    <div style="display:flex;align-items:center;gap:12px;margin-top:6px">
                        <div>
                            <input type="file" name="logo" accept="image/*" />
                        </div>
                        <div style="width:160px;height:92px;border:1px solid #e6e6e6;display:flex;align-items:center;justify-content:center;background:#fff;padding:6px">
                            @if(isset($sekolah) && $sekolah->logo)
                                <img src="/{{ $sekolah->logo }}" alt="logo" style="max-height:80px;max-width:148px;object-fit:contain;display:block" />
                            @else
                                <span style="color:#999;font-size:12px">Preview</span>
                            @endif
                        </div>
                    </div>
                    <div style="font-size:12px;color:#666;margin-top:6px">File akan disimpan di <strong>/public/images/logo</strong></div>
                </div>

                <div style="margin-top:12px;display:flex;gap:8px;align-items:center">
                    <button type="submit" style="background:var(--header-bg);color:#fff;padding:8px 12px;border-radius:6px;border:none;cursor:pointer">Simpan</button>
                </div>
            </form>

            <!-- Confirm Modal -->
            <div id="confirmModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);align-items:center;justify-content:center;z-index:9999">
                <div style="background:#fff;padding:20px;border-radius:8px;max-width:420px;width:90%;box-shadow:0 6px 18px rgba(0,0,0,0.12);text-align:left">
                    <h3 style="margin:0 0 8px 0">Konfirmasi</h3>
                    <p>Apakah anda yakin menyimpan data?</p>
                    <div style="margin-top:8px">
                        <label style="font-size:0.95rem"><input type="checkbox" id="dontAsk" style="margin-right:8px" /> Jangan tanya lagi</label>
                    </div>
                    <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:12px">
                        <button type="button" id="confirmCancel" style="background:#6c757d;color:#fff;padding:8px 12px;border-radius:6px;border:none;cursor:pointer">Batal</button>
                        <button type="button" id="confirmYes" style="background:var(--header-bg);color:#fff;padding:8px 12px;border-radius:6px;border:none;cursor:pointer">Ya, Simpan</button>
                    </div>
                </div>
            </div>

            <!-- Success Modal -->
            <div id="successModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);align-items:center;justify-content:center;z-index:9999">
                <div style="background:#fff;padding:20px;border-radius:8px;max-width:420px;width:90%;box-shadow:0 6px 18px rgba(0,0,0,0.12);text-align:left">
                    <h3 style="margin:0 0 8px 0">Sukses</h3>
                    <p>Data Berhasil Tersimpan</p>
                    <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:12px">
                        <button type="button" id="successOk" style="background:var(--header-bg);color:#fff;padding:8px 12px;border-radius:6px;border:none;cursor:pointer">OK</button>
                    </div>
                </div>
            </div>

            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    // Reset confirmation preference automatically when opening the page
                    try { localStorage.removeItem('sekolah_confirmed'); } catch (err) {}
                    var form = document.getElementById('sekolahForm');
                    var confirmModal = document.getElementById('confirmModal');
                    var successModal = document.getElementById('successModal');
                    var confirmYes = document.getElementById('confirmYes');
                    var confirmCancel = document.getElementById('confirmCancel');
                    var successOk = document.getElementById('successOk');

                    form.addEventListener('submit', function (e) {
                        if (form.dataset.confirmed === '1') {
                            return; // allow actual submit
                        }
                        // If user already acknowledged success previously, skip confirmation
                        if (localStorage.getItem('sekolah_confirmed') === '1') {
                            return; // allow submit without confirmation
                        }
                        e.preventDefault();
                        confirmModal.style.display = 'flex';
                    });

                    if (confirmCancel) {
                        confirmCancel.addEventListener('click', function (ev) {
                            ev.preventDefault();
                            form.dataset.confirmed = '0';
                            confirmModal.style.display = 'none';
                        });
                    }

                    // close modal when clicking outside dialog
                    if (confirmModal) {
                        confirmModal.addEventListener('click', function (e) {
                            if (e.target === confirmModal) {
                                confirmModal.style.display = 'none';
                            }
                        });
                    }

                    confirmYes.addEventListener('click', function () {
                        form.dataset.confirmed = '1';
                        // if user checked 'don't ask', remember preference
                        var dontAsk = document.getElementById('dontAsk');
                        if (dontAsk && dontAsk.checked) {
                            try { localStorage.setItem('sekolah_confirmed', '1'); } catch (err) {}
                        }
                        confirmModal.style.display = 'none';
                        form.submit();
                    });

                    successOk.addEventListener('click', function () {
                        // Remember acknowledgement so confirmation won't show again
                        try { localStorage.setItem('sekolah_confirmed', '1'); } catch (err) {}
                        successModal.style.display = 'none';
                    });

                    // removed resetConfirm button — no-op

                    // Show success modal if session contains success message and user hasn't acknowledged
                    var __hasSessionSuccess = {{ session('success') ? 'true' : 'false' }};
                    if (__hasSessionSuccess && localStorage.getItem('sekolah_confirmed') !== '1') {
                        successModal.style.display = 'flex';
                    }
                });
            </script>
        </div>
    </div>
@endsection