@extends('layouts.app')

@section('title')
    Edit Setting
@endsection

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

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

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {{-- gef logo --}}
            <div>
                <label class="block text-sm font-medium text-gray-700" for="gef_logo">GEF Logo <span
                        class="text-red-600">*</span></label>
                <input type="file" name="gef_logo" id="gef_logo" accept="image/*" accept=".jpg, .jpeg, .png"
                    class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('gef_logo') border-red-500 @enderror">

                @error('gef_logo')
                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                @enderror

                @if (isset($setting) && $setting->gef_logo)
                    <div class="mt-4" id="currentGefLogoDiv">
                        <input type="hidden" name="current_gef_logo" value="{{ $setting->gef_logo }}" id="currentGifLogo">

                        <div
                            class="w-24 h-24 rounded-xl overflow-hidden shadow-md ring-1 ring-gray-300 hover:ring-blue-400 transition-all duration-300">
                            <img src="{{ asset($setting->gef_logo) }}" alt="Current Gef Logo"
                                class="w-full h-full object-cover">
                        </div>
                    </div>
                @endif
            </div>

            {{-- kvda logo --}}
            <div>
                <label class="block text-sm font-medium text-gray-700" for="kvda_logo">KVDA Logo <span
                        class="text-red-600">*</span></label>
                <input type="file" name="kvda_logo" id="kvda_logo" accept="image/*" accept=".jpg, .jpeg, .png"
                    class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('kvda_logo') border-red-500 @enderror">

                @error('kvda_logo')
                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                @enderror

                @if (isset($setting) && $setting->kvda_logo)
                    <div class="mt-4" id="currentKvdaLogoDiv">
                        <input type="hidden" name="current_kvda_logo" value="{{ $setting->kvda_logo }}"
                            id="currentKvdaLogo">

                        <div
                            class="w-24 h-24 rounded-xl overflow-hidden shadow-md ring-1 ring-gray-300 hover:ring-blue-400 transition-all duration-300">
                            <img src="{{ asset($setting->kvda_logo) }}" alt="Current KVDA Logo"
                                class="w-full h-full object-cover">
                        </div>
                    </div>
                @endif
            </div>

            {{-- UN logo --}}
            <div>
                <label class="block text-sm font-medium text-gray-700" for="un_logo">UN Logo <span
                        class="text-red-600">*</span></label>
                <input type="file" name="un_logo" id="un_logo" accept="image/*" accept=".jpg, .jpeg, .png"
                    class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('un_logo') border-red-500 @enderror">

                @error('un_logo')
                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                @enderror

                @if (isset($setting) && $setting->un_logo)
                    <div class="mt-4" id="currentUnLogoDiv">
                        <input type="hidden" name="current_un_logo" value="{{ $setting->un_logo }}" id="currentUnLogo">

                        <div
                            class="w-24 h-24 rounded-xl overflow-hidden shadow-md ring-1 ring-gray-300 hover:ring-blue-400 transition-all duration-300">
                            <img src="{{ asset($setting->un_logo) }}" alt="Current UN Logo"
                                class="w-full h-full object-cover">
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <div class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 mt-3">
            {{-- company name en --}}
            <div>
                <label class="block text-sm font-medium text-gray-700" for="company_name_en">Company Name EN <span
                        class="text-red-600">*</span></label>
                <input type="text" id="company_name_en" name="company_name_en"
                    value="{{ old('company_name_en', isset($setting) ? $setting->company_name_en : null) }}"
                    class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('company_name_en') border-red-500 @enderror">

                @error('company_name_en')
                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- company name np --}}
            <div>
                <label class="block text-sm font-medium text-gray-700" for="company_name_np">Company Name NP</label>
                <input type="text" id="company_name_np" name="company_name_np"
                    value="{{ old('company_name_np', isset($setting) ? $setting->company_name_np : null) }}"
                    class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('company_name_np') border-red-500 @enderror">

                @error('company_name_np')
                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- project name en --}}
            <div>
                <label class="block text-sm font-medium text-gray-700" for="project_name_en">Company Name EN <span
                        class="text-red-600">*</span></label>
                <input type="text" id="project_name_en" name="project_name_en"
                    value="{{ old('project_name_en', isset($setting) ? $setting->project_name_en : null) }}"
                    class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('project_name_en') border-red-500 @enderror">

                @error('project_name_en')
                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- project name np --}}
            <div>
                <label class="block text-sm font-medium text-gray-700" for="project_name_np">Company Name NP</label>
                <input type="text" id="project_name_np" name="project_name_np"
                    value="{{ old('project_name_np', isset($setting) ? $setting->project_name_np : null) }}"
                    class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('project_name_np') border-red-500 @enderror">

                @error('project_name_np')
                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-3">
            {{-- Email --}}
            <div>
                <label class="block text-sm font-medium text-gray-700" for="email">Email <span
                        class="text-red-600">*</span></label>
                <input type="text" id="email" name="email"
                    value="{{ old('email', isset($setting) ? $setting->email : null) }}"
                    class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('email') border-red-500 @enderror">

                @error('email')
                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- phone no --}}
            <div>
                <label class="block text-sm font-medium text-gray-700" for="phone_no">Phone No. <span
                        class="text-red-600">*</span></label>
                <input type="tel" id="phone_no" name="phone_no"
                    value="{{ old('phone_no', isset($setting) ? $setting->phone_no : null) }}"
                    class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('phone_no') border-red-500 @enderror">

                @error('phone_no')
                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- address --}}
            <div>
                <label class="block text-sm font-medium text-gray-700" for="address">Address <span
                        class="text-red-600">*</span></label>
                <input type="text" id="address" name="address"
                    value="{{ old('address', isset($setting) ? $setting->address : null) }}"
                    class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('address') border-red-500 @enderror">

                @error('address')
                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- location --}}
            <div class="col-span-3">
                <label class="block text-sm font-medium text-gray-700" for="location">Location <span
                        class="text-red-600">*</span></label>
                <input type="url" id="location" name="location"
                    value="{{ old('location', isset($setting) ? $setting->location : null) }}"
                    class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('location') border-red-500 @enderror">

                @error('location')
                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- facebook --}}
            <div class="col-span-3">
                <label class="block text-sm font-medium text-gray-700" for="facebook">Facebook </label>
                <input type="url" id="facebook" name="facebook"
                    value="{{ old('facebook', isset($setting) ? $setting->facebook : null) }}"
                    class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('facebook') border-red-500 @enderror">

                @error('facebook')
                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- linkedin --}}
            <div class="col-span-3">
                <label class="block text-sm font-medium text-gray-700" for="linkedin">Linkedin</label>
                <input type="url" id="linkedin" name="linkedin"
                    value="{{ old('linkedin', isset($setting) ? $setting->linkedin : null) }}"
                    class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('linkedin') border-red-500 @enderror">

                @error('linkedin')
                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- instagram --}}
            <div class="col-span-3">
                <label class="block text-sm font-medium text-gray-700" for="instagram">Instagram</label>
                <input type="url" id="instagram" name="instagram"
                    value="{{ old('instagram', isset($setting) ? $setting->instagram : null) }}"
                    class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('instagram') border-red-500 @enderror">

                @error('instagram')
                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- youtube --}}
            <div class="col-span-3">
                <label class="block text-sm font-medium text-gray-700" for="youtube">Youtube</label>
                <input type="url" id="youtube" name="youtube"
                    value="{{ old('youtube', isset($setting) ? $setting->youtube : null) }}"
                    class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('youtube') border-red-500 @enderror">

                @error('youtube')
                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Meta Description -->
            <div class="lg:col-span-3">
                <label for="meta_description" class="block text-sm font-medium text-gray-700">Meta Description</label>
                <textarea id="meta_description" name="meta_description"
                    class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 editor">{{ old('meta_description', isset($setting) ? $setting->meta_description : null) }}</textarea>
                @error('meta_description')
                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="col-span-3">
                <fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4">
                    <legend class="fieldset-legend">Type Mapping</legend>
                    <!-- Notice -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        {{-- notice --}}
                        <div>
                            <label for="noticeId" class="block text-sm font-medium text-gray-700">Notice <span
                                    class="text-red-600">*</span></label>
                            <select name="notice_id" id="noticeId"
                                class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm bg-white focus:ring-blue-500 focus:border-blue-500 @error('notice_id') border-red-500 @enderror">
                                <option value="">Select Notice</option>
                                @foreach ($types as $type)
                                    <option value="{{ $type->id }}"
                                        {{ old('notice_id', isset($setting) && $setting->notice_id == $type->id ? 'selected' : '') }}>
                                        {{ $type->name_en . (isset($type->name_np) ? ' | ' . $type->name_np : '') }}
                                    </option>
                                @endforeach
                            </select>
                            @error('notice_id')
                                <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- publication --}}
                        <div>
                            <label for="publicationId" class="block text-sm font-medium text-gray-700">Publication <span
                                    class="text-red-600">*</span></label>
                            <select name="publication_id" id="publicationId"
                                class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm bg-white focus:ring-blue-500 focus:border-blue-500 @error('publication_id') border-red-500 @enderror">
                                <option value="">Select Publication</option>
                                @foreach ($types as $type)
                                    <option value="{{ $type->id }}"
                                        {{ old('publication_id', isset($setting) && $setting->publication_id == $type->id ? 'selected' : '') }}>
                                        {{ $type->name_en . (isset($type->name_np) ? ' | ' . $type->name_np : '') }}
                                    </option>
                                @endforeach
                            </select>
                            @error('publication_id')
                                <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- event --}}
                        <div>
                            <label for="eventId" class="block text-sm font-medium text-gray-700">Event <span
                                    class="text-red-600">*</span></label>
                            <select name="event_id" id="eventId"
                                class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm bg-white focus:ring-blue-500 focus:border-blue-500 @error('event_id') border-red-500 @enderror">
                                <option value="">Select Event</option>
                                @foreach ($types as $type)
                                    <option value="{{ $type->id }}"
                                        {{ old('event_id', isset($setting) && $setting->event_id == $type->id ? 'selected' : '') }}>
                                        {{ $type->name_en . (isset($type->name_np) ? ' | ' . $type->name_np : '') }}
                                    </option>
                                @endforeach
                            </select>
                            @error('event_id')
                                <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- activity --}}
                        <div>
                            <label for="activityId" class="block text-sm font-medium text-gray-700">Activity <span
                                    class="text-red-600">*</span></label>
                            <select name="activity_id" id="activityId"
                                class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm bg-white focus:ring-blue-500 focus:border-blue-500 @error('activity_id') border-red-500 @enderror">
                                <option value="">Select Activity</option>
                                @foreach ($types as $type)
                                    <option value="{{ $type->id }}"
                                        {{ old('activity_id', isset($setting) && $setting->activity_id == $type->id ? 'selected' : '') }}>
                                        {{ $type->name_en . (isset($type->name_np) ? ' | ' . $type->name_np : '') }}
                                    </option>
                                @endforeach
                            </select>
                            @error('activity_id')
                                <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- media --}}
                        <div>
                            <label for="mediaId" class="block text-sm font-medium text-gray-700">Media <span
                                    class="text-red-600">*</span></label>
                            <select name="media_id" id="mediaId"
                                class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm bg-white focus:ring-blue-500 focus:border-blue-500 @error('media_id') border-red-500 @enderror">
                                <option value="">Select Media</option>
                                @foreach ($types as $type)
                                    <option value="{{ $type->id }}"
                                        {{ old('media_id', isset($setting) && $setting->media_id == $type->id ? 'selected' : '') }}>
                                        {{ $type->name_en . (isset($type->name_np) ? ' | ' . $type->name_np : '') }}
                                    </option>
                                @endforeach
                            </select>
                            @error('media_id')
                                <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- story --}}
                        <div>
                            <label for="storyId" class="block text-sm font-medium text-gray-700">Story <span
                                    class="text-red-600">*</span></label>
                            <select name="story_id" id="storyId"
                                class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm bg-white focus:ring-blue-500 focus:border-blue-500 @error('story_id') border-red-500 @enderror">
                                <option value="">Select Story</option>
                                @foreach ($types as $type)
                                    <option value="{{ $type->id }}"
                                        {{ old('story_id', isset($setting) && $setting->story_id == $type->id ? 'selected' : '') }}>
                                        {{ $type->name_en . (isset($type->name_np) ? ' | ' . $type->name_np : '') }}
                                    </option>
                                @endforeach
                            </select>
                            @error('story_id')
                                <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </fieldset>
            </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>
        $('#gef_logo').on('change', function() {
            if (this.files.length > 0) {
                $('#currentGefLogoDiv').addClass('hidden'); // Hide the primary logo preview
                $('#currentGefLogo').val(null); // Clear the current primary logo value
            }
        });

        $('#kvda_logo').on('change', function() {
            if (this.files.length > 0) {
                $('#currentKvdaLogoDiv').addClass('hidden'); // Hide the primary logo preview
                $('#currentKvdaLogo').val(null); // Clear the current primary logo value
            }
        });

        $('#un_logo').on('change', function() {
            if (this.files.length > 0) {
                $('#currentUnLogoDiv').addClass('hidden'); // Hide the primary logo preview
                $('#currentUnLogo').val(null); // Clear the current primary logo value
            }
        });
    </script>
@endpush