@extends('layouts.master')

@section('content')
    <div class="container-xxl">

        <x-breadcrumb listRoute="{{ route('admin.pages.index') }}" model="Page" item="Edit"></x-breadcrumb>

        <div class="card">
            <div class="card-body">
                <ul class="nav nav-tabs nav-pills" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" type="button" role="tab">Page</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="{{ route('admin.pages.seo.index', $page->id) }}" class="nav-link">SEO</a>
                    </li>
                </ul>
                <x-form.wrapper action="{{ route('admin.pages.update', $page->id) }}" method="POST"
                    enctype="multipart/form-data">
                    @method('PATCH')
                    <x-form.row>
                        <x-form.input type="text" col="6" label="Title" :req="true" id="title"
                            name="title" value="{{ old('title', $page->title) }}" />
                        <x-form.input type="text" col="6" label="Slug" :req="true" id="slug"
                            name="slug" value="{{ old('title', $page->slug) }}" />
                    </x-form.row>
                    <x-form.row>
                        <x-form.input type="text" col="6" label="Short Title" :req="true" id="short_title"
                            name="short_title" value="{{ old('short_title', $page->short_title) }}" />

                        <div class="secondary-title">
                            <x-form.input type="text" col="6" label="Secondary Title" :req="true"
                                id="secondary_title" name="secondary_title"
                                value="{{ old('secondary_title', $page->secondary_title) }}" />
                        </div>

                        {{-- <x-form.select :req="true" label="Template" col="6" :options="$templates" name="template"
                        value="{{ old('template',$page->template) }}"></x-form.select> --}}
                    </x-form.row>
                    <x-form.row>
                        @php
                            $isAboutUs =
                                $page->template === \App\Enums\PageTemplateType::about_us->value ? true : false;

                        @endphp

                        <div class="col-lg-{{ $isAboutUs ? '4' : '6' }}">
                            <x-form.input type="file" label="Image" :req="true" id="image" name="image"
                                accept="image/*" onchange="previewThumb(this,'page-thumb')" />
                            <x-form.preview id="page-thumb" url="{{ $page->feature_image->getPath() }}" />
                        </div>

                        <div class="col-lg-{{ $isAboutUs ? '4' : '6' }}">
                            <x-form.input type="file" label="Cover" id="cover" name="cover" accept="image/*"
                                onchange="previewThumb(this,'cover-thumb')" />
                            <x-form.preview id="cover-thumb" url="{{ $page->cover_image->getPath() }}" />
                        </div>

                        {{-- @if ($isAboutUs)
                            <div class="col-lg-{{ $isAboutUs ? '4' : '6' }}">
                                <x-form.input type="file" label="Meta Image" id="meta" name="meta"
                                    accept="image/*" onchange="previewThumb(this,'meta-thumb')" />
                                <x-form.preview id="meta-thumb" url="{{ $page->meta_image->getPath() }}" />
                            </div>
                        @endif --}}
                        @if ($isAboutUs)
                            <div class="col-lg-{{ $isAboutUs ? '4' : '6' }}">
                                <x-form.input type="text" label="Meta Link (Url)" id="meta" name="meta"
                                    value="{{ old('meta', $page->meta) }}" />
                            </div>
                        @endif

                    </x-form.row>

                    <div class="short_description">
                        <x-form.textarea label="Short Description" id="description" :req="true"
                            name="short_description" value="{!! old('title', $page->short_description) !!}" rows="5" cols="5" />
                    </div>

                    <x-form.textarea isEditor="true" label="Description" id="description" :req="true"
                        name="description" value="{!! old('title', $page->description) !!}" rows="5" cols="5" />

                    <br />

                    <div>
                        <x-form.dynamic-fields fieldName="milestone" :min="0" :max="8"
                            label="Add New Milestone" :existingData="$about_us_milestones" :fields="[
                                ['name' => 'name', 'label' => 'name', 'type' => 'text', 'col' => 6, 'required' => true],

                                [
                                    'name' => 'heading',
                                    'label' => 'Fact Value',
                                    'type' => 'text',
                                    'col' => 6,
                                    'required' => true,
                                ],
                                // [
                                //     'name' => 'featured',
                                //     'label' => 'featured',
                                //     'type' => 'checkbox',
                                //     'col' => 2,
                                //     'required' => true,
                                // ],
                            ]" />
                    </div>

                    <div class="mt-4">
                        <x-form.dynamic-fields fieldName="why_choose_us" :min="0" :max="10"
                            label="Add New Why Choose US" :existingData="$why_choose_us" :fields="[
                                [
                                    'name' => 'image',
                                    'label' => 'image',
                                    'type' => 'file',
                                    'col' => 6,
                                    'required' => true,
                                ],
                                ['name' => 'name', 'label' => 'name', 'type' => 'text', 'col' => 6, 'required' => true],
                                [
                                    'name' => 'description',
                                    'label' => 'description',
                                    'type' => 'textarea',
                                    'col' => 12,
                                    'required' => true,
                                ],
                            ]" />
                    </div>

                    <div class="mt-4">
                        <x-form.dynamic-fields fieldName="our_mission_and_vision" :min="0" :max="1"
                            label="Add New Mission and Vision" :existingData="$our_mission_and_vision" :fields="[
                                [
                                    'name' => 'name',
                                    'label' => 'name',
                                    'type' => 'text',
                                    'col' => 12,
                                    'required' => true,
                                ],
                                [
                                    'name' => 'vision_image',
                                    'label' => 'vision_image',
                                    'type' => 'file',
                                    'col' => 6,
                                    'required' => true,
                                ],
                                [
                                    'name' => 'vision_title',
                                    'label' => 'vision_title',
                                    'type' => 'text',
                                    'col' => 6,
                                    'required' => true,
                                ],
                                [
                                    'name' => 'vision_description',
                                    'label' => 'vision_description',
                                    'type' => 'textarea',
                                    'col' => 12,
                                    'required' => true,
                                ],
                                [
                                    'name' => 'mission_image',
                                    'label' => 'mission_image',
                                    'type' => 'file',
                                    'col' => 6,
                                    'required' => true,
                                ],
                                [
                                    'name' => 'mission_title',
                                    'label' => 'mission_title',
                                    'type' => 'text',
                                    'col' => 6,
                                    'required' => true,
                                ],
                                [
                                    'name' => 'mission_description',
                                    'label' => 'mission_description',
                                    'type' => 'textarea',
                                    'col' => 12,
                                    'required' => true,
                                ],
                            ]" />
                    </div>

                    <x-form.row>
                        <x-form.input type="number" col="2" label="Order No." :req="true" id="order"
                            name="order" value="{{ old('order', $page->order) }}" />
                        <x-form.checkbox col="2" isBreak='break' label="Status" id="status" name="status"
                            value="1" class="form-check-input" :isChecked="$page->status ? 'checked' : ''" />
                        <x-form.checkbox col="2" isBreak='break' label="Is Menu" id="isonmenu" name="is_menu"
                            value="1" class="form-check-input" isEditMode="yes" :isChecked="$page->is_menu ? 'checked' : ''" />
                        <x-form.checkbox col="2" isBreak='break' label="Is Main Menu" id="is_main_menu"
                            name="is_main_menu" value="1" class="form-check-input" isEditMode="yes"
                            :isChecked="$page->is_main_menu ? 'checked' : ''" />
                        <x-form.checkbox col="2" isBreak='break' label="Is On Footer" id="isfootermenu"
                            name="is_footer_menu" value="1" class="form-check-input" isEditMode="yes"
                            :isChecked="$page->is_footer_menu ? 'checked' : ''" />
                    </x-form.row>
                    <x-form.button class="btn btn-sm btn-dark" type="submit"><i class='bx bx-save bx-xs'></i> Save
                    </x-form.button>
                </x-form.wrapper>
            </div>
        </div>
    </div>
@endsection

@push('custom_js')
    {{-- @include('_helpers.slugify',['title' => 'title']) --}}
    @include('_helpers.image_preview', ['name' => 'image'])
    @include('_helpers.image_preview', ['name' => 'cover'])
    @include('_helpers.image_preview', ['name' => 'meta'])
    @include('_helpers.ck_editor', ['textarea_id' => 'description'])
    @include('_helpers.ajax_form')

    <script>
        $(document).ready(function() {
            @if ($page->template == \App\Enums\PageTemplateType::about_us->value)
                $('.short-description').show()
                $('.secondary_title')
            @endif
        })
    </script>
@endpush