@extends('layouts.app', ['title' => 'Identitas & Logo'])

@section('content')
    <div class="action-row admin-export-excel-toolbar" style="justify-content: flex-end; margin-bottom: 14px;">
        @include('admin.partials.export-excel-button', ['section' => 'settings-identity', 'label' => 'Export Excel Identitas'])
    </div>

    @php
        $leadershipOfficials = old('leadership_officials', $settings->leadership_officials ?? []);
    @endphp

    <div class="hero-card">
        <h2>Identitas & Logo Perguruan Tinggi</h2>
        <p>Halaman ini khusus untuk branding aplikasi dan identitas resmi perguruan tinggi yang akan tampil di sistem serta menjadi default dokumen RPS.</p>
        <div class="hero-points">
            <div class="hero-point"><strong>Data resmi saat ini</strong><br>Program Studi Pendidikan Matematika<br>Fakultas Keguruan dan Ilmu Pendidikan<br>Universitas Muhammadiyah Parepare</div>
            <div class="hero-point"><strong>Dipisahkan dari Kurikulum</strong><br>Informasi kurikulum prodi sekarang dikelola pada halaman admin tersendiri agar lebih fokus dan rapi.</div>
        </div>
    </div>

    <div class="panel" style="margin-top: 20px;">
        <form method="POST" action="{{ route('admin.settings.update') }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="grid">
                <div class="field col-6">
                    <label for="app_name">Nama Aplikasi</label>
                    <input id="app_name" name="app_name" value="{{ old('app_name', $settings->app_name) }}" required>
                </div>
                <div class="field col-6">
                    <label for="app_tagline">Tagline</label>
                    <input id="app_tagline" name="app_tagline" value="{{ old('app_tagline', $settings->app_tagline) }}">
                </div>
                <div class="field col-6">
                    <label for="institution_name">Nama Perguruan Tinggi</label>
                    <input id="institution_name" name="institution_name" value="{{ old('institution_name', $settings->institution_name) }}" required>
                </div>
                <div class="field col-6">
                    <label for="faculty_name">Fakultas</label>
                    <input id="faculty_name" name="faculty_name" value="{{ old('faculty_name', $settings->faculty_name) }}">
                </div>
                <div class="field col-6">
                    <label for="study_program_name">Program Studi</label>
                    <input id="study_program_name" name="study_program_name" value="{{ old('study_program_name', $settings->study_program_name) }}">
                </div>
                <div class="field col-3">
                    <label for="document_code_prefix">Prefix Kode Dokumen</label>
                    <input id="document_code_prefix" name="document_code_prefix" value="{{ old('document_code_prefix', $settings->document_code_prefix) }}">
                </div>
                <div class="field col-3">
                    <label for="contact_email">Email Admin</label>
                    <input id="contact_email" name="contact_email" type="email" value="{{ old('contact_email', $settings->contact_email) }}">
                </div>
                <div class="field col-6">
                    <label for="logo">Logo Perguruan Tinggi</label>
                    <input id="logo" name="logo" type="file" accept="image/*">
                    <p class="helper" style="margin-top: 8px;">Logo ini akan tampil di header aplikasi dan dipakai di dokumen RPS.</p>
                </div>
                <div class="field col-6">
                    <label>Preview Logo</label>
                    <div class="repeater-item" style="min-height: 180px; display: flex; align-items: center; justify-content: center;">
                        @if ($settings->logo_path)
                            <img src="{{ asset($settings->logo_path) }}" alt="Logo Perguruan Tinggi" style="max-width: 100%; max-height: 160px; object-fit: contain;">
                        @else
                            <span class="meta">Belum ada logo diunggah.</span>
                        @endif
                    </div>
                </div>
            </div>

            <div class="panel" style="margin-top: 24px;">
                <h3 class="section-title" style="margin-top: 0;">Informasi Pimpinan Fakultas & Kaprodi</h3>
                <p class="helper">Tambahkan pejabat/pimpinan secara dinamis. Data ini bisa dipakai sebagai referensi penandatangan pada dokumen RPS.</p>

                <div class="table-wrap">
                    <table class="manual-rps-table">
                        <colgroup>
                            <col style="width: 6%;">
                            <col style="width: 22%;">
                            <col style="width: 20%;">
                            <col style="width: 14%;">
                            <col style="width: 16%;">
                            <col style="width: 16%;">
                            <col style="width: 6%;">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Jabatan</th>
                                <th>Nama</th>
                                <th>Identitas</th>
                                <th>No. Identitas</th>
                                <th>Tanda Tangan (PNG)</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="leadership-officials-body">
                            @forelse ($leadershipOfficials as $index => $official)
                                <tr class="leadership-row">
                                    <td><span class="manual-rps-row-no">{{ $index + 1 }}</span></td>
                                    <td><input name="leadership_officials[{{ $index }}][position]" value="{{ $official['position'] ?? '' }}" placeholder="Contoh: Wakil Dekan I"></td>
                                    <td><input name="leadership_officials[{{ $index }}][name]" value="{{ $official['name'] ?? '' }}" placeholder="Contoh: Dr. Nama Lengkap, M.Pd."></td>
                                    <td>
                                        <select name="leadership_officials[{{ $index }}][identifier_type]">
                                            @foreach (['NIDN', 'NUPTK'] as $identifierType)
                                                <option value="{{ $identifierType }}" @selected(($official['identifier_type'] ?? 'NIDN') === $identifierType)>{{ $identifierType }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td><input name="leadership_officials[{{ $index }}][identifier_value]" value="{{ $official['identifier_value'] ?? '' }}" placeholder="Contoh: 0012345678"></td>
                                    <td>
                                        <input type="hidden" name="leadership_officials[{{ $index }}][current_signature_path]" value="{{ $official['signature_path'] ?? '' }}">
                                        <input type="file" name="leadership_officials[{{ $index }}][signature]" accept="image/png">
                                        @if (filled($official['signature_path'] ?? ''))
                                            <div style="margin-top: 10px;">
                                                <img src="{{ asset($official['signature_path']) }}" alt="Tanda tangan pejabat" style="max-height: 56px; max-width: 180px; object-fit: contain;">
                                            </div>
                                        @endif
                                    </td>
                                    <td><button class="btn secondary" type="button" data-remove-leadership>&times;</button></td>
                                </tr>
                            @empty
                                <tr class="leadership-row">
                                    <td><span class="manual-rps-row-no">1</span></td>
                                    <td><input name="leadership_officials[0][position]" placeholder="Contoh: Wakil Dekan I"></td>
                                    <td><input name="leadership_officials[0][name]" placeholder="Contoh: Dr. Nama Lengkap, M.Pd."></td>
                                    <td>
                                        <select name="leadership_officials[0][identifier_type]">
                                            <option value="NIDN">NIDN</option>
                                            <option value="NUPTK">NUPTK</option>
                                        </select>
                                    </td>
                                    <td><input name="leadership_officials[0][identifier_value]" placeholder="Contoh: 0012345678"></td>
                                    <td>
                                        <input type="hidden" name="leadership_officials[0][current_signature_path]" value="">
                                        <input type="file" name="leadership_officials[0][signature]" accept="image/png">
                                    </td>
                                    <td><button class="btn secondary" type="button" data-remove-leadership>&times;</button></td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="actions" style="margin-top: 14px;">
                    <button class="btn secondary" type="button" id="add-leadership-official">Tambah Pejabat/Pimpinan</button>
                </div>
            </div>

            <div class="actions" style="margin-top: 20px;">
                <button class="btn" type="submit">Simpan Identitas</button>
                <a class="btn secondary" href="{{ route('admin.curriculum.edit') }}">Buka Informasi Kurikulum</a>
                <a class="btn secondary" href="{{ route('admin.ai-source-priorities.edit') }}">Atur Prioritas Sumber AI</a>
                <a class="btn secondary" href="{{ route('dashboard') }}">Kembali ke Dashboard</a>
            </div>
        </form>
    </div>

    <template id="leadership-official-row-template">
        <tr class="leadership-row">
            <td><span class="manual-rps-row-no"></span></td>
            <td><input data-name="position" placeholder="Contoh: Wakil Dekan I"></td>
            <td><input data-name="name" placeholder="Contoh: Dr. Nama Lengkap, M.Pd."></td>
            <td>
                <select data-name="identifier_type">
                    <option value="NIDN">NIDN</option>
                    <option value="NUPTK">NUPTK</option>
                </select>
            </td>
            <td><input data-name="identifier_value" placeholder="Contoh: 0012345678"></td>
            <td>
                <input type="hidden" data-name="current_signature_path" value="">
                <input type="file" data-name="signature" accept="image/png">
            </td>
            <td><button class="btn secondary" type="button" data-remove-leadership>&times;</button></td>
        </tr>
    </template>

    <script>
        (() => {
            const body = document.getElementById('leadership-officials-body');
            const template = document.getElementById('leadership-official-row-template');
            const addButton = document.getElementById('add-leadership-official');

            if (!body || !template || !addButton) {
                return;
            }

            const refreshRows = () => {
                body.querySelectorAll('.leadership-row').forEach((row, index) => {
                    const number = row.querySelector('.manual-rps-row-no');
                    if (number) {
                        number.textContent = String(index + 1);
                    }

                    row.querySelectorAll('[data-name], input[name^="leadership_officials["], select[name^="leadership_officials["]').forEach((field) => {
                        const dataName = field.getAttribute('data-name');
                        if (!dataName) {
                            const currentName = field.getAttribute('name') || '';
                            const suffixMatch = currentName.match(/\]\[([^\]]+)\]$/);
                            if (!suffixMatch) {
                                return;
                            }
                            field.setAttribute('name', `leadership_officials[${index}][${suffixMatch[1]}]`);
                            return;
                        }

                        field.setAttribute('name', `leadership_officials[${index}][${dataName}]`);
                    });
                });
            };

            addButton.addEventListener('click', () => {
                const fragment = template.content.cloneNode(true);
                body.appendChild(fragment);
                refreshRows();
            });

            body.addEventListener('click', (event) => {
                const removeButton = event.target.closest('[data-remove-leadership]');

                if (!removeButton) {
                    return;
                }

                if (body.querySelectorAll('.leadership-row').length === 1) {
                    const row = removeButton.closest('.leadership-row');
                    row.querySelectorAll('input').forEach((input) => {
                        if (input.type === 'file') {
                            input.value = '';
                        } else {
                            input.value = '';
                        }
                    });
                    row.querySelectorAll('select').forEach((select) => {
                        select.value = 'NIDN';
                    });
                    const image = row.querySelector('img');
                    if (image) {
                        image.remove();
                    }
                    return;
                }

                removeButton.closest('.leadership-row')?.remove();
                refreshRows();
            });

            refreshRows();
        })();
    </script>
@endsection