{{-- resources/views/admin/menu-utama/profil.blade.php --}}
@extends('admin.layouts.app') 

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

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold">Profil & Identitas Madrasah</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola informasi dasar, kontak, lokasi, serta visi & misi madrasah.</p>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm"><i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}</div>
    @endif
    
    @if($errors->any())
        <div class="alert alert-danger border-0 shadow-sm">
            <ul class="mb-0">
                @foreach($errors->all() as $err) <li>{{ $err }}</li> @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('admin.profil.update') }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="nav-wrapper position-relative mb-4">
            <ul class="nav nav-pills p-1 bg-white border rounded-3 shadow-sm d-flex" id="profilTabs" role="tablist">
                <li class="nav-item flex-fill text-center" role="presentation">
                    <button class="nav-link active w-100 mb-0 py-2" id="identitas-tab" data-bs-toggle="tab" data-bs-target="#identitas" type="button" role="tab"><i class="bi bi-building me-1"></i> Identitas & Kontak</button>
                </li>
                <li class="nav-item flex-fill text-center" role="presentation">
                    <button class="nav-link w-100 mb-0 py-2" id="visi-tab" data-bs-toggle="tab" data-bs-target="#visi" type="button" role="tab"><i class="bi bi-eye me-1"></i> Visi, Misi & Sejarah</button>
                </li>
                <li class="nav-item flex-fill text-center" role="presentation">
                    <button class="nav-link w-100 mb-0 py-2" id="program-tab" data-bs-toggle="tab" data-bs-target="#program" type="button" role="tab"><i class="bi bi-star me-1"></i> Program & Fasilitas</button>
                </li>
            </ul>
        </div>

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body p-4">
                <div class="tab-content" id="profilTabsContent">
                    <div class="tab-pane fade show active" id="identitas" role="tabpanel">
                        <div class="row">
                            <div class="col-md-3 text-center mb-4 border-end">
                                <label class="form-label fw-bold">Logo Madrasah</label>
                                <div class="mb-3">
                                    <img src="{{ $profil->logo_path ? asset('storage/'.$profil->logo_path) : 'https://dummyimage.com/150x150/e9ecef/6c757d&text=Logo' }}" class="img-thumbnail rounded-circle object-fit-cover shadow-sm" style="width: 150px; height: 150px;">
                                </div>
                                <input type="file" name="logo" class="form-control form-control-sm" accept="image/*">
                                <small class="text-muted d-block mt-2">Format: JPG/PNG/SVG. Maks 5MB.</small>
                            </div>
                            
                            <div class="col-md-9 ps-md-4">
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label fw-bold">Nama Madrasah <span class="text-danger">*</span></label>
                                        <input type="text" name="nama" class="form-control" value="{{ old('nama', $profil->nama_madrasah) }}" required>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label fw-bold">NSM / NPSN</label>
                                        <input type="text" name="nsm" class="form-control" value="{{ old('nsm', $profil->nsm_npsn) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label fw-bold">Tahun Berdiri</label>
                                        <input type="number" name="tahun" class="form-control" value="{{ old('tahun', $profil->tahun_berdiri) }}">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-4">
                                        <label class="form-label fw-bold">No. Telepon / WhatsApp</label>
                                        <input type="text" name="telepon" class="form-control" value="{{ old('telepon', $profil->telepon) }}">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-bold">Alamat Email</label>
                                        <input type="email" name="email" class="form-control" value="{{ old('email', $profil->email) }}">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-bold">Website Resmi</label>
                                        <input type="text" name="website" class="form-control" value="{{ old('website', $profil->website) }}">
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-bold">Alamat Lengkap</label>
                                    <textarea name="alamat" class="form-control" rows="2">{{ old('alamat', $profil->alamat) }}</textarea>
                                </div>

                                <div class="mb-3 p-3 bg-light rounded border border-primary" style="--bs-border-opacity: .3;">
                                    <label class="form-label fw-bold text-primary"><i class="bi bi-map me-1"></i> Iframe Google Maps (Lokasi Peta)</label>
                                    <textarea name="google_maps_iframe" class="form-control" rows="3" placeholder='Contoh: <iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>'>{{ old('google_maps_iframe', $profil->google_maps_iframe) }}</textarea>
                                    <div class="form-text mt-2"><i class="bi bi-info-circle me-1"></i> Cara mengambil kode: Buka Google Maps > Cari lokasi madrasah > Klik tombol "Bagikan" > Pilih tab "Sematkan Peta" > Klik "Salin HTML" > Tempel di kotak ini.</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="visi" role="tabpanel">
                        <div class="row g-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Visi Madrasah</label>
                                <textarea name="visi" class="form-control" rows="3">{{ old('visi', $profil->visi) }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Misi Madrasah</label>
                                <textarea name="misi" class="form-control" rows="3">{{ old('misi', $profil->misi) }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Keunggulan Madrasah</label>
                                <textarea name="keunggulan" class="form-control" rows="4">{{ old('keunggulan', $profil->keunggulan) }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Sejarah Singkat</label>
                                <textarea name="sejarah" class="form-control" rows="4">{{ old('sejarah', $profil->sejarah) }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="program" role="tabpanel">
                        
                        <h6 class="fw-bold text-primary border-bottom pb-2 mb-3">Daftar Prestasi (Daftar List)</h6>
                        <div id="prestasi-container">
                            @php $prestasiArr = is_array($profil->prestasi) ? $profil->prestasi : []; @endphp
                            @forelse($prestasiArr as $prestasi)
                                <div class="input-group mb-2">
                                    <span class="input-group-text bg-light"><i class="bi bi-trophy"></i></span>
                                    <input type="text" name="prestasi[]" class="form-control" value="{{ $prestasi }}">
                                    <button type="button" class="btn btn-outline-danger" onclick="this.parentElement.remove()"><i class="bi bi-x"></i></button>
                                </div>
                            @empty
                                <div class="input-group mb-2">
                                    <span class="input-group-text bg-light"><i class="bi bi-trophy"></i></span>
                                    <input type="text" name="prestasi[]" class="form-control" placeholder="Contoh: Akreditasi A (BAN-SM)">
                                    <button type="button" class="btn btn-outline-danger" onclick="this.parentElement.remove()"><i class="bi bi-x"></i></button>
                                </div>
                            @endforelse
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-primary mb-4" onclick="addPrestasi()"><i class="bi bi-plus-circle me-1"></i> Tambah Prestasi</button>

                        <h6 class="fw-bold text-primary border-bottom pb-2 mb-3 mt-4">Program Unggulan</h6>
                        <div id="program-container">
                            @php $programArr = is_array($profil->program_unggulan) ? $profil->program_unggulan : []; @endphp
                            @foreach($programArr as $prog)
                                <div class="row g-2 mb-3 align-items-center bg-light p-2 rounded border">
                                    <div class="col-md-3">
                                        <input type="text" name="program_icon[]" class="form-control form-control-sm" placeholder="Class Icon (cth: bi-book)" value="{{ $prog['icon'] ?? '' }}">
                                    </div>
                                    <div class="col-md-3">
                                        <input type="text" name="program_judul[]" class="form-control form-control-sm" placeholder="Judul Program" value="{{ $prog['judul'] ?? '' }}">
                                    </div>
                                    <div class="col-md-5">
                                        <input type="text" name="program_desc[]" class="form-control form-control-sm" placeholder="Deskripsi Singkat" value="{{ $prog['desc'] ?? '' }}">
                                    </div>
                                    <div class="col-md-1 text-end">
                                        <button type="button" class="btn btn-sm btn-danger w-100" onclick="this.parentElement.parentElement.remove()"><i class="bi bi-trash"></i></button>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-primary mb-4" onclick="addProgram()"><i class="bi bi-plus-circle me-1"></i> Tambah Program</button>

                        <h6 class="fw-bold text-primary border-bottom pb-2 mb-3 mt-4">Fasilitas Madrasah</h6>
                        <div id="fasilitas-container">
                            @php $fasilitasArr = is_array($profil->fasilitas) ? $profil->fasilitas : []; @endphp
                            @foreach($fasilitasArr as $fas)
                                <div class="row g-2 mb-2 align-items-center">
                                    <div class="col-md-4">
                                        <input type="text" name="fas_nama[]" class="form-control form-control-sm" placeholder="Nama Fasilitas" value="{{ $fas['nama'] ?? '' }}">
                                    </div>
                                    <div class="col-md-7">
                                        <input type="text" name="fas_desc[]" class="form-control form-control-sm" placeholder="Deskripsi Singkat" value="{{ $fas['desc'] ?? '' }}">
                                    </div>
                                    <div class="col-md-1 text-end">
                                        <button type="button" class="btn btn-sm btn-outline-danger w-100" onclick="this.parentElement.parentElement.remove()"><i class="bi bi-x"></i></button>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="addFasilitas()"><i class="bi bi-plus-circle me-1"></i> Tambah Fasilitas</button>

                    </div>
                </div>
            </div>
            
            <div class="card-footer bg-light p-3 text-end">
                <button type="submit" class="btn btn-success fw-bold px-4 shadow-sm"><i class="bi bi-save me-2"></i> Simpan Seluruh Pengaturan Profil</button>
            </div>
        </div>
    </form>
</div>

<script>
    function addPrestasi() {
        const html = `
            <div class="input-group mb-2">
                <span class="input-group-text bg-light"><i class="bi bi-trophy"></i></span>
                <input type="text" name="prestasi[]" class="form-control" placeholder="Masukkan prestasi...">
                <button type="button" class="btn btn-outline-danger" onclick="this.parentElement.remove()"><i class="bi bi-x"></i></button>
            </div>`;
        document.getElementById('prestasi-container').insertAdjacentHTML('beforeend', html);
    }

    function addProgram() {
        const html = `
            <div class="row g-2 mb-3 align-items-center bg-light p-2 rounded border">
                <div class="col-md-3">
                    <input type="text" name="program_icon[]" class="form-control form-control-sm" placeholder="Class Icon (cth: bi-star)">
                </div>
                <div class="col-md-3">
                    <input type="text" name="program_judul[]" class="form-control form-control-sm" placeholder="Judul Program">
                </div>
                <div class="col-md-5">
                    <input type="text" name="program_desc[]" class="form-control form-control-sm" placeholder="Deskripsi Singkat">
                </div>
                <div class="col-md-1 text-end">
                    <button type="button" class="btn btn-sm btn-danger w-100" onclick="this.parentElement.parentElement.remove()"><i class="bi bi-trash"></i></button>
                </div>
            </div>`;
        document.getElementById('program-container').insertAdjacentHTML('beforeend', html);
    }

    function addFasilitas() {
        const html = `
            <div class="row g-2 mb-2 align-items-center">
                <div class="col-md-4">
                    <input type="text" name="fas_nama[]" class="form-control form-control-sm" placeholder="Nama Fasilitas">
                </div>
                <div class="col-md-7">
                    <input type="text" name="fas_desc[]" class="form-control form-control-sm" placeholder="Deskripsi Singkat">
                </div>
                <div class="col-md-1 text-end">
                    <button type="button" class="btn btn-sm btn-outline-danger w-100" onclick="this.parentElement.parentElement.remove()"><i class="bi bi-x"></i></button>
                </div>
            </div>`;
        document.getElementById('fasilitas-container').insertAdjacentHTML('beforeend', html);
    }
</script>
@endsection