@extends('backend.layouts.app')

@section('title')
    Edit Setting
@endsection

@section('headerWithButton')
    <h2 class="text-lg font-semibold text-gray-900">@yield('title')</h2>
@endsection

@section('content')
    @php
        $emailCount = $setting->emails != null ? count(json_decode($setting->emails)) : 0;
        $contactCount = $setting->contacts != null ? count(json_decode($setting->contacts)) : 0;
    @endphp

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

        <div class="flex flex-wrap gap-1 border-b border-gray-200 mb-4">
            <button type="button" data-tab="logo"
                class="setting-tab -mb-px px-4 py-2 border-b-2 border-transparent text-sm font-semibold text-gray-500 hover:text-blue-700">Logo</button>
            <button type="button" data-tab="details"
                class="setting-tab -mb-px px-4 py-2 border-b-2 border-transparent text-sm font-semibold text-gray-500 hover:text-blue-700">Details</button>
            <button type="button" data-tab="contact"
                class="setting-tab -mb-px px-4 py-2 border-b-2 border-transparent text-sm font-semibold text-gray-500 hover:text-blue-700">Contact</button>
            <button type="button" data-tab="socials"
                class="setting-tab -mb-px px-4 py-2 border-b-2 border-transparent text-sm font-semibold text-gray-500 hover:text-blue-700">Socials</button>
            <button type="button" data-tab="school-hr"
                class="setting-tab -mb-px px-4 py-2 border-b-2 border-transparent text-sm font-semibold text-gray-500 hover:text-blue-700">School Hr</button>
            <button type="button" data-tab="seo"
                class="setting-tab -mb-px px-4 py-2 border-b-2 border-transparent text-sm font-semibold text-gray-500 hover:text-blue-700">SEO</button>
        </div>

        <div data-panel="logo" class="setting-panel hidden">
            <div class="grid sm:grid-cols-1 md:grid-cols-4 lg:grid-cols-4 gap-4">
                {{-- primary logo --}}
                <x-fields.image-upload-field label="Primary Logo" :data="old('primary_logo', isset($setting) ? $setting->primary_logo : null)" fieldName="primary_logo"
                    currentName="current_primary_logo" :required=true />

                {{-- secondary logo --}}
                <x-fields.image-upload-field label="Secondary Logo" :data="old('secondary_logo', isset($setting) ? $setting->secondary_logo : null)" fieldName="secondary_logo"
                    currentName="current_secondary_logo" :required=true />

                {{-- experience logo --}}
                <x-fields.image-upload-field label="Experience Logo" :data="old('experience_logo', isset($setting) ? $setting->experience_logo : null)" fieldName="experience_logo"
                    currentName="current_experience_logo" :required=true />

                {{-- favicon --}}
                <x-fields.image-upload-field label="Favicon" :data="old('favicon', isset($setting) ? $setting->favicon : null)" fieldName="favicon" currentName="current_favicon"
                    :required=true />

                {{-- school overview image --}}
                <x-fields.image-upload-field label="School Overview Image" :data="old('school_overview_image', isset($setting) ? $setting->school_overview_image : null)" fieldName="school_overview_image"
                    currentName="current_school_overview_image" :required=true />
            </div>
        </div>

        <div data-panel="details" class="setting-panel hidden">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4">
                {{-- title en --}}
                <x-fields.text-field label="Title (English)" :data="old('title_en', isset($setting) ? $setting->title_en : null)" fieldName="title_en" :required=true />

                {{-- title np --}}
                <x-fields.text-field label="Title (Nepali)" :data="old('title_np', isset($setting) ? $setting->title_np : null)" fieldName="title_np" :required=false />

                {{-- address en --}}
                <x-fields.text-field label="Address (English)" :data="old('address_en', isset($setting) ? $setting->address_en : null)" fieldName="address_en" :required=true />

                {{-- address np --}}
                <x-fields.text-field label="Address (Nepali)" :data="old('address_np', isset($setting) ? $setting->address_np : null)" fieldName="address_np" :required=false />
            </div>

            <div class="grid grid-cols-1 gap-4 mt-3">
                {{-- description en --}}
                <x-fields.textarea-summernote-field label="Description (English)" :data="old('description_en', isset($setting) ? $setting->description_en : null)" fieldName="description_en"
                    :required=false />

                {{-- description np --}}
                <x-fields.textarea-summernote-field label="Description (Nepali)" :data="old('description_np', isset($setting) ? $setting->description_np : null)" fieldName="description_np"
                    :required=false />
            </div>
        </div>

        <div data-panel="contact" class="setting-panel hidden">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4">
                {{-- admission notify email --}}
                <x-fields.text-field label="Admission Notify Email" :data="old('admission_notify_email', isset($setting) ? $setting->admission_notify_email : null)" fieldName="admission_notify_email"
                    :required=true />

                {{-- career notify email --}}
                <x-fields.text-field label="Career Notify Email" :data="old('career_notify_email', isset($setting) ? $setting->career_notify_email : null)" fieldName="career_notify_email"
                    :required=true />

                {{-- volunteer Notify Email --}}
                <x-fields.text-field label="Volunteer Notify Email" :data="old('volunteer_notify_email', isset($setting) ? $setting->volunteer_notify_email : null)" fieldName="volunteer_notify_email"
                    :required=true />

                {{-- feedback Notify Email --}}
                <x-fields.text-field label="Feedback Notify Email" :data="old('feedback_notify_email', isset($setting) ? $setting->feedback_notify_email : null)" fieldName="feedback_notify_email"
                    :required=true />
            </div>

            <div class="grid grid-cols-1 gap-4 mt-3">
                {{-- multi email --}}
                <div>
                    <fieldset class="border mb-3 p-3">
                        <legend class="float-none w-auto font-weight-bold">Emails <span class="text-red-600">*</span></legend>

                        @error('email')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror

                        <table class="display table-auto" width="100%" id="emailTable">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th></th>
                                </tr>
                            </thead>

                            <tbody id="emailTableBody">
                                @if (old('emails'))
                                    @foreach ((array) old('emails') as $key => $old)
                                        @include('backend.setting.partials.emails', [
                                            'index' => $loop->index,
                                        ])
                                    @endforeach
                                @elseif($setting->emails)
                                    @foreach (json_decode($setting->emails) as $email)
                                        @include('backend.setting.partials.emails', [
                                            'index' => $loop->index,
                                            'data' => $email,
                                        ])
                                    @endforeach
                                @else
                                    @include('backend.setting.partials.emails', [
                                        'index' => 0,
                                    ])
                                @endif
                            </tbody>

                            <tfoot>
                                <tr>
                                    <td colspan="3" class="text-right mt-2">
                                        <button type="button"
                                            class="mt-3 px-2 py-2 rounded-lg shadow-sm font-semibold text-blue-700 border border-blue-700 hover:bg-blue-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400"
                                            id="add-emails-btn">
                                            <i class="fa fa-plus"></i> &nbsp;Add Email
                                        </button>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </fieldset>
                </div>

                {{-- multi contact --}}
                <div>
                    <fieldset class="border mb-3 p-3">
                        <legend class="float-none w-auto font-weight-bold">Contacts <span class="text-red-600">*</span></legend>

                        @error('contact')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror

                        <table class="display table-auto" width="100%" id="contactTable">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Contact</th>
                                    <th></th>
                                </tr>
                            </thead>

                            <tbody id="contactTableBody">
                                @if (old('contacts'))
                                    @foreach ((array) old('contacts') as $key => $old)
                                        @include('backend.setting.partials.contacts', [
                                            'index' => $loop->index,
                                        ])
                                    @endforeach
                                @elseif($setting->contacts)
                                    @foreach (json_decode($setting->contacts) as $contact)
                                        @include('backend.setting.partials.contacts', [
                                            'index' => $loop->index,
                                            'data' => $contact,
                                        ])
                                    @endforeach
                                @else
                                    @include('backend.setting.partials.contacts', [
                                        'index' => 0,
                                    ])
                                @endif
                            </tbody>

                            <tfoot>
                                <tr>
                                    <td colspan="3" class="text-right mt-2">
                                        <button type="button"
                                            class="mt-3 px-2 py-2 rounded-lg shadow-sm font-semibold text-blue-700 border border-blue-700 hover:bg-blue-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400"
                                            id="add-contacts-btn">
                                            <i class="fa fa-plus"></i> &nbsp;Add Contact
                                        </button>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </fieldset>
                </div>
            </div>
        </div>

        <div data-panel="socials" class="setting-panel hidden">
            <div class="grid grid-cols-1 gap-4">
                {{-- map --}}
                <x-fields.text-field label="Map (Google Maps embed URL)" :data="old('map', isset($setting) ? $setting->map : null)" fieldName="map" :required=true />

                {{-- facebook --}}
                <x-fields.text-field label="Facebook" :data="old('facebook', isset($setting) ? $setting->facebook : null)" fieldName="facebook" :required=true />

                {{-- instagram --}}
                <x-fields.text-field label="Instagram" :data="old('instagram', isset($setting) ? $setting->instagram : null)" fieldName="instagram" :required=true />

                {{-- linkedin --}}
                <x-fields.text-field label="Linkedin" :data="old('linkedin', isset($setting) ? $setting->linkedin : null)" fieldName="linkedin" :required=true />

                {{-- x --}}
                <x-fields.text-field label="X" :data="old('x', isset($setting) ? $setting->x : null)" fieldName="x" :required=false />

                {{-- youtube --}}
                <x-fields.text-field label="Youtube" :data="old('youtube', isset($setting) ? $setting->youtube : null)" fieldName="youtube" :required=true />

                {{-- youtube video --}}
                <x-fields.text-field label="Youtube Video" :data="old('youtube_video', isset($setting) ? $setting->youtube_video : null)" fieldName="youtube_video" :required=true />
            </div>
        </div>

        <div data-panel="school-hr" class="setting-panel hidden">
            @php
                $hourCards = old('school_hours');
                if ($hourCards === null) {
                    $np = $setting->schoolHours('np');
                    $hourCards = collect($setting->schoolHours('en'))->map(fn($card, $i) => [
                        'title_en' => $card['title'] ?? '', 'details_en' => $card['details'] ?? '',
                        'title_np' => $np[$i]['title'] ?? '', 'details_np' => $np[$i]['details'] ?? '',
                    ])->all();
                }
            @endphp

            <div id="school-hour-cards" class="grid grid-cols-1 gap-4">
                @foreach (array_values($hourCards ?: [[]]) as $i => $card)
                    @include('backend.setting.partials.school-hour-card')
                @endforeach
            </div>

            {{-- blank card for the add button; __CARD__ becomes a fresh index --}}
            <template id="tpl-school-hour-card">@include('backend.setting.partials.school-hour-card', ['i' => '__CARD__', 'card' => []])</template>

            <div class="text-right">
                <button type="button" id="add-school-hour-btn"
                    class="mt-3 px-2 py-2 rounded-lg shadow-sm font-semibold text-blue-700 border border-blue-700 hover:bg-blue-700 hover:text-white">
                    <i class="fa fa-plus"></i> &nbsp;Add Card
                </button>
            </div>
        </div>

        <div data-panel="seo" class="setting-panel hidden">
            <div class="grid grid-cols-1 gap-4">
                {{-- schema markup --}}
                <x-fields.text-field label="Schema Markup" :data="old('schema_markup', isset($setting) ? $setting->schema_markup : null)" fieldName="schema_markup" :required=false />

                {{-- canonical url --}}
                <x-fields.text-field label="Canonical Url" :data="old('canonical_url', isset($setting) ? $setting->canonical_url : null)" fieldName="canonical_url" :required=false />

                {{-- keyword --}}
                <x-fields.text-field label="Keyword" :data="old('keyword', isset($setting) ? $setting->keyword : null)" fieldName="keyword" :required=false />
            </div>
        </div>

        <div class="flex mt-6 gap-2">
            <x-buttons.form-save-button type="Update" />
            <x-buttons.form-cancel-button href="{{ route('setting.edit') }}" />
        </div>
    </form>
@endsection

@push('scripts')
    <script>
        // Tabs: open the first tab with a validation error, else the last one used
        (function() {
            const $tabs = $('.setting-tab');
            const show = (key) => {
                $tabs.removeClass('border-blue-700 text-blue-700').addClass('border-transparent text-gray-500')
                    .filter(`[data-tab="${key}"]`).addClass('border-blue-700 text-blue-700').removeClass('border-transparent text-gray-500');
                $('.setting-panel').addClass('hidden').filter(`[data-panel="${key}"]`).removeClass('hidden');
                try { sessionStorage.setItem('settingTab', key); } catch (e) {}
            };

            let start = null;
            $('.setting-panel').each(function() {
                if ($(this).find('.border-red-500, .text-danger').length) {
                    const key = $(this).data('panel');
                    $tabs.filter(`[data-tab="${key}"]`).append(' <span class="inline-block w-2 h-2 rounded-full bg-red-600 align-middle"></span>');
                    start = start || key;
                }
            });
            try { start = start || sessionStorage.getItem('settingTab'); } catch (e) {}
            if (!$tabs.filter(`[data-tab="${start}"]`).length) start = $tabs.first().data('tab');

            $tabs.on('click', function() { show($(this).data('tab')); });
            show(start);
        })();

        // School hours: new cards come from the template, with the same editor setup as the rest of admin
        let schoolHourIndex = $('.school-hour-card').length;
        $('#add-school-hour-btn').on('click', function() {
            const $card = $(document.getElementById('tpl-school-hour-card').innerHTML.replace(/__CARD__/g, schoolHourIndex++));
            $('#school-hour-cards').append($card);
            $card.find('.summernote').summernote(summernoteOptions);
        });
        $(document).on('click', '.school-hour-remove', function() {
            const $card = $(this).closest('.school-hour-card');
            if ($card.siblings('.school-hour-card').length) $card.remove();
            else {
                $card.find('input').val('');
                $card.find('.summernote').summernote('code', '');
            }
        });

        $(document).ready(function() {
            checkRowNumber('email-remove');
            checkRowNumber('contact-remove');
        });
        $('.image').on('change', function() {
            fieldId = $(this).attr('id');

            if (this.files.length > 0) {
                $('#current_' + fieldId + '_div').addClass('hidden'); // Hide the primary logo preview
                $('#current_' + fieldId + '_value').val(null); // Clear the current primary logo value
            }
        });

        emailsCount = {{ isset($emailCount) ? $emailCount - 1 : 0 }};
        $(document).on('click', '#add-emails-btn', function() {
            emailsCount = emailsCount + 1;

            $.ajax({
                type: "GET",
                url: "{{ route('setting.emails') }}",
                data: {
                    type: 'en',
                },
                success: function(response) {
                    $('#emailTableBody').append(response);
                }
            });
            checkRowNumber('email-remove');
        });

        $(document).on("click", ".email-remove", function() {
            $(this).closest("tr").remove();

            checkRowNumber('email-remove');
        });

        contactsCount = {{ isset($contactCount) ? $contactCount - 1 : 0 }};
        $(document).on('click', '#add-contacts-btn', function() {
            contactsCount = contactsCount + 1;

            $.ajax({
                type: "GET",
                url: "{{ route('setting.contacts') }}",
                data: {
                    type: 'en',
                },
                success: function(response) {
                    $('#contactTableBody').append(response);
                }
            });

            checkRowNumber('contact-remove');
        });

        $(document).on("click", ".contact-remove", function() {
            $(this).closest("tr").remove();

            checkRowNumber('contact-remove');
        });

        function checkRowNumber(field) {
            if ($('.' + field).length === 1) {
                $('.' + field).hide();
            }
        }
    </script>
@endpush