@extends('layouts.admin')
@section('title', 'Settings')
@section('admin_content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-10 mx-auto">

                <form id="settingsForm" action="{{ route('admin.settings') }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf

                    {{-- ── Section: Identity ───────────────────────────────── --}}
                    <div class="settings-section">
                        <div class="settings-section-header">
                            <div class="settings-section-icon">
                                <i class="fas fa-building"></i>
                            </div>
                            <div>
                                <h6 class="settings-section-title">Institution Identity</h6>
                                <p class="settings-section-sub">Name, logo and branding information</p>
                            </div>
                        </div>
                        <div class="settings-section-body">
                            <div class="row g-3">

                                {{-- Logo previews --}}
                                <div class="col-md-6">
                                    <label class="form-label">Header Logo</label>
                                    <div class="logo-upload-box">
                                        <img id="headerLogoPreview"
                                            src="{{ storage($settings->get('header_logo', '../assets/images/logo/1.png')) }}"
                                            alt="Header Logo">
                                        <div class="logo-upload-info">
                                            <span>Click to change</span>
                                            <input type="file" name="header_logo" id="header_logo"
                                                accept="image/*"
                                                class="logo-file-input @error('header_logo') is-invalid @enderror">
                                            <small>JPG, PNG, WEBP — max 2MB</small>
                                        </div>
                                    </div>
                                    @error('header_logo')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Institution Logo</label>
                                    <div class="logo-upload-box">
                                        <img id="logoPreview"
                                            src="{{ storage($settings->get('logo', '../assets/images/logo/1.png')) }}"
                                            alt="Logo">
                                        <div class="logo-upload-info">
                                            <span>Click to change</span>
                                            <input type="file" name="logo" id="logo"
                                                accept="image/*"
                                                class="logo-file-input @error('logo') is-invalid @enderror">
                                            <small>JPG, PNG, WEBP — max 2MB</small>
                                        </div>
                                    </div>
                                    @error('logo')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-8">
                                    <label for="institution_name" class="form-label">Institution Name</label>
                                    <input type="text" name="institution_name" id="institution_name"
                                        class="form-control @error('institution_name') is-invalid @enderror"
                                        value="{{ old('institution_name', $settings->get('institution_name', '')) }}"
                                        placeholder="Full institution name">
                                    @error('institution_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-4">
                                    <label for="institution_short_name" class="form-label">Short Name</label>
                                    <input type="text" name="institution_short_name" id="institution_short_name"
                                        class="form-control @error('institution_short_name') is-invalid @enderror"
                                        value="{{ old('institution_short_name', $settings->get('institution_short_name', '')) }}"
                                        placeholder="Abbreviation">
                                    @error('institution_short_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-12">
                                    <label for="institution_quote" class="form-label">Institution Quote / Motto</label>
                                    <input type="text" name="institution_quote" id="institution_quote"
                                        class="form-control @error('institution_quote') is-invalid @enderror"
                                        value="{{ old('institution_quote', $settings->get('institution_quote', '')) }}"
                                        placeholder="Tagline or motto">
                                    @error('institution_quote')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-12">
                                    <label for="institute_short_description" class="form-label">Short Description</label>
                                    <textarea name="institute_short_description" id="institute_short_description"
                                        class="form-control @error('institute_short_description') is-invalid @enderror"
                                        rows="3"
                                        placeholder="Brief description of the institution">{{ old('institute_short_description', $settings->get('institute_short_description', '')) }}</textarea>
                                    @error('institute_short_description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-4">
                                    <label for="established_at" class="form-label">Established Year</label>
                                    <input type="number" min="999" max="9999" name="established_at"
                                        id="established_at"
                                        class="form-control @error('established_at') is-invalid @enderror"
                                        value="{{ old('established_at', $settings->get('established_at', '')) }}"
                                        placeholder="e.g. 1995">
                                    @error('established_at')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-4">
                                    <label for="eiin_number" class="form-label">EIIN Number</label>
                                    <input type="text" name="eiin_number" id="eiin_number"
                                        class="form-control @error('eiin_number') is-invalid @enderror"
                                        value="{{ old('eiin_number', $settings->get('eiin_number', '')) }}"
                                        placeholder="Institute EIIN">
                                    @error('eiin_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-4">
                                    <label for="google_map_location" class="form-label">Google Map URL</label>
                                    <input type="url" name="google_map_location" id="google_map_location"
                                        class="form-control @error('google_map_location') is-invalid @enderror"
                                        value="{{ old('google_map_location', $settings->get('google_map_location', '')) }}"
                                        placeholder="https://maps.google.com/...">
                                    @error('google_map_location')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                            </div>
                        </div>
                    </div>

                    {{-- ── Section: Contact ────────────────────────────────── --}}
                    <div class="settings-section">
                        <div class="settings-section-header">
                            <div class="settings-section-icon">
                                <i class="fas fa-phone-alt"></i>
                            </div>
                            <div>
                                <h6 class="settings-section-title">Contact Information</h6>
                                <p class="settings-section-sub">Phone numbers, emails and address</p>
                            </div>
                        </div>
                        <div class="settings-section-body">
                            <div class="row g-3">

                                <div class="col-md-6">
                                    <label for="contact_number" class="form-label">Contact Number</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-phone"></i></span>
                                        <input type="text" name="contact_number" id="contact_number"
                                            class="form-control @error('contact_number') is-invalid @enderror"
                                            value="{{ old('contact_number', $settings->get('contact_number', '')) }}"
                                            placeholder="01XXXXXXXXX">
                                        @error('contact_number')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label for="admission_support_number" class="form-label">Admission Support Number</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-phone"></i></span>
                                        <input type="text" name="admission_support_number"
                                            id="admission_support_number"
                                            class="form-control @error('admission_support_number') is-invalid @enderror"
                                            value="{{ old('admission_support_number', $settings->get('admission_support_number', '')) }}"
                                            placeholder="01XXXXXXXXX">
                                        @error('admission_support_number')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label for="email" class="form-label">Contact Email</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                        <input type="email" name="email" id="email"
                                            class="form-control @error('email') is-invalid @enderror"
                                            value="{{ old('email', $settings->get('email', '')) }}"
                                            placeholder="info@example.com">
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label for="admission_support_email" class="form-label">Admission Support Email</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                        <input type="email" name="admission_support_email"
                                            id="admission_support_email"
                                            class="form-control @error('admission_support_email') is-invalid @enderror"
                                            value="{{ old('admission_support_email', $settings->get('admission_support_email', '')) }}"
                                            placeholder="admission@example.com">
                                        @error('admission_support_email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <label for="address" class="form-label">Address</label>
                                    <div class="input-group align-items-start">
                                        <span class="input-group-text pt-2"><i class="fas fa-map-marker-alt"></i></span>
                                        <textarea name="address" id="address"
                                            class="form-control @error('address') is-invalid @enderror"
                                            rows="3"
                                            placeholder="Full address">{{ old('address', $settings->get('address', '')) }}</textarea>
                                        @error('address')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    {{-- ── Section: Social ─────────────────────────────────── --}}
                    <div class="settings-section">
                        <div class="settings-section-header">
                            <div class="settings-section-icon">
                                <i class="fas fa-share-alt"></i>
                            </div>
                            <div>
                                <h6 class="settings-section-title">Social Media Links</h6>
                                <p class="settings-section-sub">Facebook, YouTube, LinkedIn</p>
                            </div>
                        </div>
                        <div class="settings-section-body">
                            <div class="row g-3">

                                <div class="col-md-4">
                                    <label for="facebook_page_link" class="form-label">Facebook</label>
                                    <div class="input-group">
                                        <span class="input-group-text text-white" style="background:#1877f2; border-color:#1877f2;">
                                            <i class="fab fa-facebook-f"></i>
                                        </span>
                                        <input type="url" name="facebook_page_link" id="facebook_page_link"
                                            class="form-control @error('facebook_page_link') is-invalid @enderror"
                                            value="{{ old('facebook_page_link', $settings->get('facebook_page_link', '')) }}"
                                            placeholder="https://facebook.com/...">
                                        @error('facebook_page_link')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <label for="youtube_link" class="form-label">YouTube</label>
                                    <div class="input-group">
                                        <span class="input-group-text text-white" style="background:#ff0000; border-color:#ff0000;">
                                            <i class="fab fa-youtube"></i>
                                        </span>
                                        <input type="url" name="youtube_link" id="youtube_link"
                                            class="form-control @error('youtube_link') is-invalid @enderror"
                                            value="{{ old('youtube_link', $settings->get('youtube_link', '')) }}"
                                            placeholder="https://youtube.com/...">
                                        @error('youtube_link')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <label for="linkedin_link" class="form-label">LinkedIn</label>
                                    <div class="input-group">
                                        <span class="input-group-text text-white" style="background:#0a66c2; border-color:#0a66c2;">
                                            <i class="fab fa-linkedin-in"></i>
                                        </span>
                                        <input type="url" name="linkedin_link" id="linkedin_link"
                                            class="form-control @error('linkedin_link') is-invalid @enderror"
                                            value="{{ old('linkedin_link', $settings->get('linkedin_link', '')) }}"
                                            placeholder="https://linkedin.com/...">
                                        @error('linkedin_link')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    {{-- ── Save Button ──────────────────────────────────────── --}}
                    <div class="text-end mb-4">
                        <button type="submit" id="settingsBtn" class="btn btn-primary px-5">
                            <i class="fas fa-save me-2"></i>Save Settings
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    .settings-section {
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .settings-section-header {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 20px;
        background: #f8fafc;
        border-bottom: 1px solid #e9ecef;
    }

    .settings-section-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: #e8f0fe;
        color: #2563eb;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        flex-shrink: 0;
    }

    .settings-section-title {
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
    }

    .settings-section-sub {
        font-size: 12px;
        color: #94a3b8;
        margin: 0;
    }

    .settings-section-body {
        padding: 20px;
    }

    /* Logo upload box */
    .logo-upload-box {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 14px;
        border: 1.5px dashed #cbd5e1;
        border-radius: 10px;
        background: #f8fafc;
        cursor: pointer;
        transition: border-color 0.2s, background 0.2s;
        position: relative;
    }

    .logo-upload-box:hover {
        border-color: #2563eb;
        background: #eff6ff;
    }

    .logo-upload-box img {
        height: 52px;
        width: auto;
        max-width: 80px;
        object-fit: contain;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
        background: #fff;
        padding: 4px;
        flex-shrink: 0;
    }

    .logo-upload-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .logo-upload-info span {
        font-size: 13px;
        font-weight: 500;
        color: #2563eb;
    }

    .logo-upload-info small {
        font-size: 11px;
        color: #94a3b8;
    }

    .logo-file-input {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
    }

    .form-label {
        font-size: 13px;
        font-weight: 500;
        color: #475569;
        margin-bottom: 6px;
    }
</style>
@endpush

@push('scripts')
<script>
    // Logo live preview
    function setupLogoPreview(inputId, previewId) {
        document.getElementById(inputId).addEventListener('change', function () {
            const file = this.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = e => document.getElementById(previewId).src = e.target.result;
            reader.readAsDataURL(file);
        });
    }
    setupLogoPreview('header_logo', 'headerLogoPreview');
    setupLogoPreview('logo', 'logoPreview');

    // AJAX submit
    document.getElementById('settingsForm').addEventListener('submit', function (e) {
        e.preventDefault();

        const form = this;
        const btn  = document.getElementById('settingsBtn');

        form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
        form.querySelectorAll('.invalid-feedback.d-block').forEach(el => el.remove());

        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> Saving...';

        fetch(form.action, {
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            body: new FormData(form)
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                Swal.fire({ icon: 'success', title: 'Saved!', text: data.message, timer: 2000, showConfirmButton: false });
            } else if (data.errors) {
                Object.entries(data.errors).forEach(([field, messages]) => {
                    const input = form.querySelector(`[name="${field}"]`);
                    if (input) {
                        input.classList.add('is-invalid');
                        const div = document.createElement('div');
                        div.className = 'invalid-feedback d-block';
                        div.textContent = messages[0];
                        input.after(div);
                    }
                });
            }
        })
        .catch(() => Swal.fire({ icon: 'error', title: 'Error', text: 'Something went wrong.' }))
        .finally(() => {
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-save me-2"></i> Save Settings';
        });
    });
</script>
@endpush