@php
    $quick_links = !empty($page->quick_links) ? json_decode($page->quick_links) : [];
@endphp
@extends('admin.layouts.app')
@section('title')
    {{ __('edit') }}
@endsection
@php
@endphp
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form class="" action="{{ route('module.blog.update', $page->id) }}" method="POST"
                        enctype="multipart/form-data" onsubmit="validateForm(event, this)">
                        @csrf
                        @method('PUT')
                        <div class="card-header">
                            <h3 class="card-title line-height-36">{{ __('edit') }}</h3>
                            <button type="submit" class="btn bg-success float-right" value="submit_button"
                                name="submit_button">
                                <i class="fas fa-plus mr-1"></i>
                                {{ __('update') }}
                            </button>
                            <a href="{{ route('module.blog.index') }}" class="btn mr-2 bg-primary float-right"><i
                                    class="fas fa-arrow-left"></i>&nbsp;{{ __('back') }}
                            </a>

                            <a href="/blog/{{ @$page->category->url }}/{{ @$page->url }}"
                                class="optional-field blog btn mr-2 bg-warning float-right"><i
                                    class="fas fa-link"></i>&nbsp;{{ __('blog') }}{{ __('url') }}
                            </a>
                            <button type="submit" class="btn bg-danger float-right mr-2" value="save_close_button"
                                name="save_close_button">
                                <i class="fas fa-check mr-1"></i>
                                {{ __('save_and_close') }}
                            </button>

                            @if (userCan('page.history.view'))
                                <a href="{{ route('module.blog.history.index', $page->id) }}"
                                    class="btn mr-2 bg-primary float-right"><i class="fas fa-plus mr-1"></i>&nbsp; History
                                </a>
                            @endif




                        </div>
                        <div class="container-fluid mt-3">
                            <input value="submit_button" name="button_type" type="hidden" id="button_type">
                            <div class="row">
                                <div class="form-group col-6">
                                    <label class="form-lebel">
                                        {{ __('title') }}
                                        <small class="text-danger">*</small>
                                    </label>
                                    <input value="{!! old('title', $page->title) !!}" name="title" type="text" id="title"
                                        class="form-control @error('title') is-invalid @enderror"
                                        placeholder="{{ __('enter') }} {{ __('title') }}">
                                    <small class="text-danger"></small>
                                    @error('title')
                                        <span class="invalid-feedback"
                                            role="alert"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>

                                <div class="form-group col-6">
                                    <label class="form-lebel">
                                        {{ __('url') }}
                                        <small class="text-danger">*</small>
                                    </label>
                                    <input type="text" id="url" name="url" value="{!! old('url', $page->url) !!}"
                                        class="form-control @error('url') is-invalid @enderror" placeholder="Url" />
                                    <small class="text-danger"></small>
                                    @error('url')
                                        <span class="invalid-feedback"
                                            role="alert"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-6">
                                    <label class="form-lebel">
                                        {{ __('category') }}
                                        <small class="text-danger">*</small>
                                    </label>
                                    <select name="category_id" id="category_id"
                                        class="@error('category_id') is-invalid @enderror w-100-p form-control">
                                        <option value="">{{ __('select_category') }}</option>
                                        @foreach ($categories as $category)
                                            <option {{ old('category_id') == $category['id'] ? 'selected' : '' }}
                                                data-class="{{ get_str($category['name']) }}"
                                                {{ $page->category_id == $category['id'] ? 'selected' : '' }}
                                                value="{{ $category['id'] }}" data-url="{{ $category['url'] }}" >{{ $category['name'] }}</option>
                                            @if (!empty($category['recursive_sub_categories']))
                                                @foreach ($category['recursive_sub_categories'] as $sub_category)
                                                    <option
                                                        {{ old('category_id') == $sub_category['id'] ? 'selected' : '' }}
                                                        data-class="{{ get_str($category['name']) }}"
                                                        {{ $page->category_id == $sub_category['id'] ? 'selected' : '' }}
                                                        value="{{ $sub_category['id'] }}" data-url="{{ $sub_category['url'] }}">
                                                        [{{ $category['name'] }}]-{{ $sub_category['name'] }} </option>
                                                    @if (!empty($sub_category['recursive_sub_categories']))
                                                        @foreach ($sub_category['recursive_sub_categories'] as $sub_category2)
                                                            <option
                                                                {{ old('category_id') == $sub_category2['id'] ? 'selected' : '' }}
                                                                data-class="{{ get_str($category['name']) }}"
                                                                {{ $page->category_id == $sub_category2['id'] ? 'selected' : '' }}
                                                                value="{{ $sub_category2['id'] }}" data-url="{{ $sub_category2['url'] }}">
                                                                [{{ $category['name'] }}]-{{ $sub_category2['name'] }}
                                                            </option>
                                                            @if (!empty($sub_category2['recursive_sub_categories']))
                                                                @foreach ($sub_category2['recursive_sub_categories'] as $sub_category3)
                                                                    <option
                                                                        {{ old('category_id') == $sub_category3['id'] ? 'selected' : '' }}
                                                                        data-class="{{ get_str($category['name']) }}"
                                                                        {{ $page->category_id == $sub_category3['id'] ? 'selected' : '' }}
                                                                        value="{{ $sub_category3['id'] }}" data-url="{{ $sub_category2['url'] }}">
                                                                        [{{ $category['name'] }}]-{{ $sub_category3['name'] }}
                                                                    </option>
                                                                @endforeach
                                                            @endif
                                                        @endforeach
                                                    @endif
                                                @endforeach
                                            @endif
                                        @endforeach
                                    </select>
                                    <small class="text-danger"></small>
                                    @error('category_id')
                                        <span class="invalid-feedback"
                                            role="alert"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>

                                <div class="form-group col-6">
                                    <label class="form-lebel">
                                        {{ __('status') }}
                                        <small class="text-danger">*</small>
                                    </label>
                                    <select name="status" class="form-control {{ error('status') }}" id="status">
                                        <option {{ old('status') == 'draft' ? 'selected' : '' }}
                                            {{ $page->status == 'draft' ? 'selected' : '' }} value="draft">
                                            {{ __('draft') }}</option>
                                        <option {{ old('status') == 'published' ? 'selected' : '' }}
                                            {{ $page->status == 'published' ? 'selected' : '' }} value="published">
                                            {{ __('published') }}</option>
                                        <option {{ old('status') == 'unpublished' ? 'selected' : '' }}
                                            {{ $page->status == 'unpublished' ? 'selected' : '' }} value="unpublished">
                                            {{ __('unpublished') }}</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                {{-- select Category --}}
                                <div class="form-group col-6 optional-field category-page">
                                    <label class="form-lebel">
                                        {{ __('select_category') }}
                                    </label>
                                    <select name="parent_category_id" id="parent_category_id"
                                        class="@error('parent_category_id') is-invalid @enderror w-100-p form-control">
                                        <option value="">{{ __('select_category') }}</option>

                                        @foreach ($categories as $category)
                                            <option {{ old('parent_category_id') == $category['id'] ? 'selected' : '' }}
                                                {{ $page->parent_category_id == $category['id'] ? 'selected' : '' }}
                                                value="{{ $category['id'] }}">{{ $category['name'] }}</option>
                                            @if (!empty($category['sub_category']))
                                                @foreach ($category['sub_category'] as $sub_category)
                                                    <option
                                                        {{ old('parent_category_id') == $sub_category['id'] ? 'selected' : '' }}
                                                        {{ $page->parent_category_id == $sub_category['id'] ? 'selected' : '' }}
                                                        value="{{ $sub_category['id'] }}">
                                                        [{{ $category['name'] }}]-{{ $sub_category['name'] }} </option>
                                                @endforeach
                                            @endif
                                        @endforeach
                                    </select>
                                    <small class="text-danger"></small>
                                    @error('parent_category_id')
                                        <span class="invalid-feedback"
                                            role="alert"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>
                            </div>
                            <div class="row">

                                {{-- Country And University --}}
                                <div class="form-group col-6 optional-field country-page test-preparation lpt-page blog select_country_show"
                                    id="select_country_show">
                                    <x-forms.label name="{{ __('Select Country') }}" :required="false" />
                                    <select name="country_id"
                                        class="form-control select2bs4 test-preparation lpt-page {{ error('country_id') }}"
                                        id="country_id">
                                        <option value="" class="d-none">
                                            {{ __('select_country') }}
                                        </option>
                                        @foreach ($countries as $country)
                                            <option {{ $country->id == old('country_id') ? 'selected' : '' }}
                                                {{ $country->id == $page->country_id ? 'selected' : '' }}
                                                value="{{ $country->id }}">
                                                {{ $country->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <small class="text-danger"></small>
                                </div>

                                <div class="form-group col-6 optional-field blog relative_university">
                                    <x-forms.label name="{{ __('select_university') }}" :required="false" />
                                    <select name="relative_university"
                                        class="form-control select2bs4 {{ error('relative_university') }}"
                                        id="relative_university">
                                        <option value="" class="d-none">
                                            {{ __('select_university') }}
                                        </option>
                                        @foreach (@$universities as $universitie)
                                            <option {{ $universitie->id == old('relative_university') ? 'selected' : '' }}
                                                value="{{ $universitie->id }}"
                                                {{ $universitie->id == $page->relative_university ? 'selected' : '' }}>
                                                {{ $universitie->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <small class="text-danger"></small>
                                    <x-forms.error name="relative_university" />
                                </div>
                            </div>
                            <div class="row">

                                <div class="col-12">
                                    <div class="">
                                        <ul class="nav nav-tabs" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active" data-toggle="tab" href="#tabs-1"
                                                    role="tab">
                                                    {{ __('Desktop') }}</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" href="#tabs-7"
                                                    role="tab">{{ __('Mobile') }}</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" href="#tabs-2"
                                                    role="tab">{{ __('images') }}</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" href="#tabs-3"
                                                    role="tab">{{ __('meta_tags') }}</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" href="#tabs-5"
                                                    role="tab">{{ __('publish') }}</a>
                                            </li>
                                            <li class="nav-item optional-field blog">
                                                <a class="nav-link" data-toggle="tab" href="#tabs-6" role="tab">Blog
                                                    Banner</a>
                                            </li>
                                            <li>
                                            <li class="nav-item ">
                                                <a class="nav-link" data-toggle="tab" href="#tabs-9"
                                                    role="tab">Quick links</a>
                                            </li>
                                            </li>
                                        </ul>
                                        <div class="body tab-content">
                                            <div class="card tab-pane active" id="tabs-1" role="tabpanel">
                                                <div class="card-body">
                                                    <div class="row optional-field blog consultancy category-page">
                                                        <div class="form-group col-6">
                                                            <x-forms.label name="Header Title (H1)" :required="false" />
                                                            <x-forms.input type="text" name="header_title"
                                                                id="header_title" value="{!! old('header_title', $page->header_title) !!}"
                                                                placeholder="Enter Header Title" />
                                                            <small class="text-danger"></small>
                                                        </div>
                                                        <div class="form-group col-6">
                                                            <x-forms.label name="Introduction" :required="false" />
                                                            <textarea type="text" class="form-control header_description" id="editor17" name="header_description"
                                                                placeholder="Enter Short Description">{{ old('header_description', $page->header_description) }}</textarea>
                                                            <small class="text-danger"></small>
                                                            <x-forms.error name="header_description" />
                                                        </div>
                                                    </div>
                                                    <div class="row optional-field">
                                                        <div class="form-group col-6">
                                                            <x-forms.label name="Summary" :required="false" />
                                                            <textarea type="text" id="summary" class="form-control required blog " name="summary"
                                                                placeholder="Enter Summary">{{ old('summary', $page->summary) }}</textarea>
                                                            <small class="text-danger"></small>
                                                            <x-forms.error name="summary" />
                                                        </div>
                                                    </div>

                                                    <div class="row optional-field consultancy country-page test-preparation lpt-page">
                                                        <div class="form-group col-12">
                                                            <label class="form-lebel">
                                                                {{ __('page') }} {{ __('header') }}
                                                            </label>
                                                            <textarea id="editor1" type="text" class="form-control" name="page_header"
                                                                placeholder="{{ __('page') }} {{ __('header') }}">{{ old('page_header', $page->page_header) }}</textarea>
                                                            @error('page_header')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div
                                                        class="row optional-field consultancy  university-list-page country-page generic-pages category-page lpt-page">
                                                        <div class="form-group col-12">
                                                            <label class="form-lebel">
                                                                {{ __('middle_content') }}
                                                            </label>
                                                            <textarea id="editor2" type="text" class="form-control" name="middle_content"
                                                                placeholder="{{ __('middle_content') }}">{{ old('middle_content', $page->middle_content) }}</textarea>
                                                            @error('middle_content')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="row descriptionBlock">
                                                        <div class="form-group col-12">
                                                            <label class="form-lebel">
                                                                {{ __('description') }}
                                                                <small class="text-danger">*</small>
                                                            </label>
                                                            <textarea id="editor3" type="text" class="form-control" name="description"
                                                                placeholder="{{ __('enter') }}  {{ __('description') }}" required>{{ old('description', $page->description) }}</textarea>
                                                            <div id="description_iidd" class="editor3"></div>
                                                            <small class="text-danger"></small>
                                                            @error('description')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>

                                                    <div
                                                        class="row optional-field country-page generic-pages category-page admission_desc blog">

                                                        <div class="form-group col-12">
                                                            <label class="form-lebel" id="admission_desc">
                                                                {{ __('admission_desc') }}
                                                            </label>
                                                            <textarea id="editor4" type="text" class="form-control" name="admission_desc"
                                                                placeholder="{{ __('enter') }}  {{ __('admission_desc') }}">{{ old('admission_desc', $page->admission_desc) }}</textarea>
                                                            @error('admission_desc')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>



                                                    <div class="row optional-field consultancy country-page blog">
                                                        <div class="form-group col-12">
                                                            <label class="form-lebel" id="city_desc">
                                                                {{ __('city_desc') }}
                                                            </label>
                                                            <textarea id="editor5" type="text" class="form-control" name="city_desc"
                                                                placeholder="{{ __('enter') }}  {{ __('city_desc') }}">{{ old('city_desc', $page->city_desc) }}</textarea>
                                                            @error('city_desc')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>

                                                    <div class="row optional-field country-page blog">

                                                        <div class="form-group col-12">
                                                            <label class="form-lebel" id="cost_of_living_desc">
                                                                {{ __('cost_of_living_desc') }}
                                                            </label>
                                                            <textarea id="editor6" type="text" class="form-control" name="cost_of_living_desc"
                                                                placeholder="{{ __('enter') }}  {{ __('cost_of_living_desc') }}">{{ old('cost_of_living_desc', $page->cost_of_living_desc) }}</textarea>
                                                            @error('cost_of_living_desc')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>



                                                    <div class="row optional-field country-page">

                                                        <div class="form-group col-12">
                                                            <label class="form-lebel">
                                                                {{ __('scholarship_desc') }}
                                                            </label>
                                                            <textarea id="editor7" type="text" class="form-control" name="scholarship_desc"
                                                                placeholder="{{ __('enter') }}  {{ __('scholarship_desc') }}">{{ old('scholarship_desc', $page->scholarship_desc) }}</textarea>
                                                            @error('scholarship_desc')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>


                                                    <div class="row optional-field country-page">

                                                        <div class="form-group col-12">
                                                            <label class="form-lebel">
                                                                {{ __('visa_desc') }}
                                                            </label>
                                                            <textarea id="editor8" type="text" class="form-control" name="visa_desc"
                                                                placeholder="{{ __('enter') }}  {{ __('visa_desc') }}">{{ old('visa_desc', $page->visa_desc) }}</textarea>
                                                            @error('visa_desc')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>

                                                    <div class="row optional-field country-page city-page">

                                                        <div class="form-group col-12">
                                                            <label class="form-lebel">
                                                                {{ __('course_overview') }}
                                                            </label>
                                                            <textarea id="editor9" type="text" class="form-control" name="course_overview"
                                                                placeholder="{{ __('enter') }}  {{ __('course_overview') }}">{{ old('course_overview', $page->course_overview) }}</textarea>
                                                            @error('course_overview')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>


                                                    <div class="row optional-field country-page">

                                                        <div class="form-group col-12">
                                                            <label class="form-lebel">
                                                                {{ __('similar_countries') }}
                                                            </label>
                                                            <textarea id="editor10" type="text" class="form-control" name="similar_countries"
                                                                placeholder="{{ __('enter') }}  {{ __('similar_countries') }}">{{ old('similar_countries', $page->similar_countries) }}</textarea>
                                                            @error('similar_countries')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>

                                                    <div class="row university_overview country-page">
                                                        <div class="form-group col-12 ">
                                                            <label class="form-lebel">
                                                                {{ __('University Overview') }}
                                                            </label>
                                                            <textarea id="editor12" type="text" class="form-control" name="university_overview"
                                                                placeholder="{{ __('university_overview') }}">{{ $page->university_overview }}</textarea>
                                                            @error('university_overview')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="row ">
                                                        <div class="form-group col-12 ">
                                                            <label class="form-lebel">
                                                                {{ __('Links Description') }}
                                                            </label>
                                                            <textarea id="editor14" type="text" class="form-control" name="links_desc"
                                                                placeholder="{{ __('Links Description') }}">{{ $page->links_desc }}</textarea>
                                                            @error('link_desc')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="form-group col-6">
                                                            <label class="form-lebel">
                                                                {{ __('tag') }}
                                                            </label>
                                                            <select name="tag_id[]" id="tag_id"
                                                                class="@error('tag_id') is-invalid @enderror w-100-p select2bs44"
                                                                multiple>
                                                                <option value="" class="d-none" disabled>
                                                                    {{ __('select_tag') }}</option>
                                                                @foreach ($tags as $tag)
                                                                    <option
                                                                        {{ old('tag_id') == $tag->id ? 'selected' : '' }}
                                                                        @if (!empty($tag_ids)) @foreach ($tag_ids as $tag_id) {{ $tag_id == $tag->id ? 'selected' : '' }} @endforeach @endif
                                                                        value="{{ $tag->id }}">{{ $tag->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                            <small class="text-danger"></small>
                                                            @error('tag_id')
                                                                <span class="invalid-feedback"
                                                                    role="alert"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                        <div
                                                            class="form-group col-6 optional-field test-preparation lpt-page">
                                                            <x-forms.label name="{{ __('Plans') }}"
                                                                :required="false" />
                                                            @foreach ($plans as $plan)
                                                            @endforeach
                                                            <select name="plan_id[]" id="plan_id"
                                                                class="@error('plan_id') is-invalid @enderror w-100-p select2bs44"
                                                                multiple>
                                                                <option value="" class="d-none" disabled>
                                                                    {{ __('Select Plan') }}</option>
                                                                @foreach ($plans as $plan)
                                                                    <option
                                                                        {{ old('plan_id') == $plan->id ? 'selected' : '' }}
                                                                        @if (!empty($plan_ids)) @foreach ($plan_ids as $plan_id) {{ $plan_id == $plan->id ? 'selected' : '' }} @endforeach @endif
                                                                        value="{{ $plan->id }}">{{ $plan->title }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                            @error('plan_id')
                                                                <span class="invalid-feedback"
                                                                    role="alert"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="card tab-pane" id="tabs-7" role="tabpanel">
                                                <div class="card-body">
                                                    <div class="row optional-field consultancy country-page test-preparation lpt-page">
                                                        <div class="form-group col-12">
                                                            <label class="form-lebel">
                                                                {{ __('page') }} {{ __('header') }}
                                                            </label>
                                                            <textarea id="mobile_editor1" type="text" class="form-control" name="mobile_page_header"
                                                                placeholder="{{ __('page') }} {{ __('header') }}">{{ old('mobile_page_header', $page->mobile_page_header) }}</textarea>
                                                            @error('mobile_page_header')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div
                                                        class="row optional-field consultancy  university-list-page country-page generic-pages category-page lpt-page">
                                                        <div class="form-group col-12"> 
                                                            <label class="form-lebel">
                                                                {{ __('Middle content') }}
                                                            </label>
                                                            <textarea id="mobile_editor2" type="text" class="form-control" name="mobile_middle_content"
                                                                placeholder="{{ __('Middle Content') }}">{{ old('mobile_middle_content', $page->mobile_middle_content) }}</textarea>
                                                            @error('mobile_middle_content')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="row descriptionBlock">

                                                        <div class="form-group col-12 description_textarea">
                                                            <label class="form-lebel">
                                                                {{ __('Description') }}
                                                                <small class="text-danger">*</small>
                                                            </label>
                                                            <textarea id="mobile_editor3" type="text" class="form-control" name="mobile_description"
                                                                placeholder="{{ __('enter') }}  {{ __('Description') }}">{{ old('mobile_description', $page->mobile_description) }}</textarea>
                                                            <div id="description_iidd" class="editor3"></div>
                                                            <small class="text-danger"></small>
                                                            @error('mobile_description')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong>
                                                                </span>
                                                            @enderror
                                                        </div>
                                                    </div>

                                                    <hr>
                                                    <div class="row blog blog_strips_dropdown">
                                                        <div class="d-flex justify-content-between mb-3">
                                                            <label class="form-lebel">Blog Description</label>
                                                            <div class="d-flex justify-content-end" style="width: 67%">
                                                                <select class="form-control me-3" id="selectSection"
                                                                    style="width: 15%;">
                                                                    <option value="BlogDropdown">Blog Dropdown</option>
                                                                    <option value="BlogStrip"> Blog Strip</option>
                                                                </select>
                                                                <select class="form-control" id="stripPosition"
                                                                    style="width: 15%;">
                                                                    <option value="start">Strip in Starting</option>
                                                                    <option value="end" selected>Strip in End</option>
                                                                </select>
                                                                <button type="button" class="btn btn-primary addScore ml-3" style="width: 150px;">Add More <iclass="fa fa-plus ml-2"></i></button>
                                                            </div>
                                                        </div>

                                                        @php
                                                            $indexCount = 0;
                                                            $dropdown_strips = json_decode(@$page->mobile_description);
                                                        @endphp
                                                        @if ($dropdown_strips)
                                                            <div class="row appendBlogDescription">
                                                                @foreach ($dropdown_strips as $strip)
                                                                    @if ($strip->blog_type == 'BlogDropdown')
                                                                        <div class="col-6 countBlogArray"
                                                                            id="block{{ $indexCount }}">
                                                                            <input type="hidden"
                                                                                value="{{ $strip->blog_type }}"
                                                                                name="blog_array[{{ $indexCount }}][blog_type]">
                                                                            <div class="form-group"
                                                                                style="position: relative;">
                                                                                <input type="text"
                                                                                    class="form-control blog_header"
                                                                                    name="blog_array[{{ $indexCount }}][blog_header]"
                                                                                    value="{{ $strip->blog_header }}"
                                                                                    placeholder="Enter Header Title" />
                                                                                <i class="fa fa-times removeButton"
                                                                                    onclick="removeBlock('block{{ $indexCount }}')"
                                                                                    style="position: absolute; top: 50%; transform: translateY(-50%); right: 10px;"></i>
                                                                            </div>
                                                                            <div class="form-group">
                                                                                <textarea id="newEditor{{ $indexCount }}" type="text"
                                                                                    name="blog_array[{{ $indexCount }}][blog_description]" class="form-control blog_description"
                                                                                    placeholder="Enter Blog Descrition">{{ $strip->blog_description }}</textarea>
                                                                            </div>
                                                                            <small class="text-danger"></small>
                                                                        </div>
                                                                    @elseif ($strip->blog_type == 'BlogStrip')
                                                                        <div class="col-6 countBlogStripArray d-flex flex-column"
                                                                            id="block{{ $indexCount }}">
                                                                            <input type="hidden"
                                                                                value="{{ $strip->blog_type }}"
                                                                                name="blog_array[{{ $indexCount }}][blog_type]">
                                                                            <div class="form-group"
                                                                                style="position: relative;">
                                                                                <input type="text"
                                                                                    class="form-control "
                                                                                    placeholder="Enter Header Title"
                                                                                    readonly />
                                                                                <i class="fa fa-times removeButton"
                                                                                    onclick="removeBlock('block{{ $indexCount }}')"
                                                                                    style="position: absolute; top: 50%; transform: translateY(-50%); right: 10px;"></i>
                                                                            </div>
                                                                            <div class="form-group">
                                                                                <textarea id="newEditor{{ $indexCount }}" type="text" name="blog_array[{{ $indexCount }}][blog_strip]"
                                                                                    class="form-control blog_strip" placeholder="Enter Blog Strip">{{ $strip->blog_strip }}</textarea>
                                                                            </div>
                                                                            <small class="text-danger"></small>
                                                                        </div>
                                                                    @endif
                                                                    @php
                                                                        $indexCount += 1;
                                                                    @endphp
                                                                @endforeach
                                                            </div>
                                                        @else
                                                            <div class="row appendBlogDescription">
                                                                <div class="col-6 countBlogArray">
                                                                    <input type="hidden" value="BlogDropdown"
                                                                        name="blog_array[{{ $indexCount }}][blog_type]">
                                                                    <div class="form-group">
                                                                        <input type="text"
                                                                            class="form-control blog_header"
                                                                            value=""
                                                                            name="blog_array[{{ $indexCount }}][blog_header]"
                                                                            placeholder="Enter Header Title" />
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <textarea id="editor13" type="text" name="blog_array[{{ $indexCount }}][blog_description]"
                                                                            class="form-control" placeholder="Enter Blog Descrition"></textarea>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                    <hr>

                                                    <div 
                                                        class="row optional-field country-page generic-pages category-page admission_desc blog">

                                                        <div class="form-group col-12">
                                                            <label class="form-lebel" id="mobile_admission_desc">
                                                                {{ __('Admission Description') }}
                                                            </label>
                                                            <textarea id="mobile_editor4" type="text" class="form-control" name="mobile_admission_desc"
                                                                placeholder="{{ __('enter') }}  {{ __('Admission Description') }}">{{ old('mobile_admission_desc', $page->mobile_admission_desc) }}</textarea>
                                                            @error('mobile_admission_desc')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>

                                                    <div class="row optional-field consultancy  country-page blog">

                                                        <div class="form-group col-12">
                                                            <label class="form-lebel" id="mobile_city_desc">
                                                                {{ __('City Description') }}
                                                            </label>
                                                            <textarea id="mobile_editor5" type="text" class="form-control" name="mobile_city_desc"
                                                                placeholder="{{ __('enter') }}  {{ __('City Description') }}">{{ old('mobile_city_desc', $page->mobile_city_desc) }}</textarea>
                                                            @error('mobile_city_desc')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>

                                                    <div class="row optional-field country-page ">

                                                        <div class="form-group col-12">
                                                            <label class="form-lebel">
                                                                {{ __('Cost Of Living Description') }}
                                                            </label>
                                                            <textarea id="mobile_editor6" type="text" class="form-control" name="mobile_cost_of_living_desc"
                                                                placeholder="{{ __('enter') }}  {{ __('Cost Of Living Description') }}">{{ old('mobile_cost_of_living_desc', $page->mobile_cost_of_living_desc) }}</textarea>
                                                            @error('mobile_cost_of_living_desc')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>

                                                    <div class="row optional-field country-page">

                                                        <div class="form-group col-12">
                                                            <label class="form-lebel">
                                                                {{ __('Scholarship Description') }}
                                                            </label>
                                                            <textarea id="mobile_editor7" type="text" class="form-control" name="mobile_scholarship_desc"
                                                                placeholder="{{ __('enter') }}  {{ __('Scholarship Description') }}">{{ old('mobile_scholarship_desc', $page->mobile_scholarship_desc) }}</textarea>
                                                            @error('mobile_scholarship_desc')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="row optional-field country-page">

                                                        <div class="form-group col-12">
                                                            <label class="form-lebel">
                                                                {{ __('Visa Desc') }}
                                                            </label>
                                                            <textarea id="mobile_editor8" type="text" class="form-control" name="mobile_visa_desc"
                                                                placeholder="{{ __('enter') }}  {{ __('Visa Description') }}">{{ old('mobile_visa_desc', $page->mobile_visa_desc) }}</textarea>
                                                            @error('mobile_visa_desc')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="row optional-field country-page city-page">
                                                        <div class="form-group col-12">
                                                            <label class="form-lebel">
                                                                {{ __('Course Overview') }}
                                                            </label>
                                                            <textarea id="mobile_editor9" type="text" class="form-control" name="mobile_course_overview"
                                                                placeholder="{{ __('enter') }}  {{ __('Course Overview') }}">{{ old('mobile_course_overview', $page->mobile_course_overview) }}</textarea>
                                                            @error('mobile_course_overview')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="row optional-field country-page">
                                                        <div class="form-group col-12">
                                                            <label class="form-lebel">
                                                                {{ __('Similar Countries') }}
                                                            </label>
                                                            <textarea id="mobile_editor10" type="text" class="form-control" name="mobile_similar_countries"
                                                                placeholder="{{ __('enter') }}  {{ __('Similar Countries') }}">{{ old('mobile_similar_countries', $page->mobile_similar_countries) }}</textarea>
                                                            @error('mobile_similar_countries')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="row mobile_university_overview country-page">
                                                        <div class="form-group col-12 ">
                                                            <label class="form-lebel">
                                                                {{ __('University Overview') }}
                                                            </label>
                                                            <textarea id="mobile_editor12" type="text" class="form-control" name="mobile_university_overview"
                                                                placeholder="{{ __('university_overview') }}">{{ $page->mobile_university_overview }}</textarea>
                                                            @error('mobile_university_overview')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="row ">
                                                        <div class="form-group col-12 ">
                                                            <label class="form-lebel">
                                                                {{ __('Links Description') }}
                                                            </label>
                                                            <textarea id="mobile_editor13" type="text" class="form-control" name="mobile_link_desc"
                                                                placeholder="{{ __('Mobile links descption') }}">{{ $page->mobile_link_desc }}</textarea>
                                                            @error('mobile_link_desc')
                                                                <span
                                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card tab-pane" id="tabs-2" role="tabpanel">
                                                <div class="card-body">

                                                    <div class="row ">
                                                        <div class="form-group col-6">
                                                            <x-forms.label name="Image Title" :required="false" />
                                                            <x-forms.input type="text" name="imageTitle"
                                                                id="imageTitle" value="{!! old('imageTitle', $page->imageTitle) !!}"
                                                                placeholder="Enter Image Title" />
                                                            <small class="text-danger"></small>
                                                        </div>
                                                        <div class="form-group col-6">
                                                            <x-forms.label name="Image AltText" :required="false" />
                                                            <x-forms.input type="text" name="imageAltText"
                                                                id="imageAltText" value="{!! old('imageAltText', $page->imageAltText) !!}"
                                                                placeholder="Enter Image AltText" />
                                                            <small class="text-danger"></small>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="form-group col-12">
                                                            <label class="form-lebel">
                                                                {{ __('image') }}
                                                                <small class="text-danger">*</small>
                                                            </label>
                                                            <div class="upload-btn-wrapper">
                                                                <input type="file" id="image"
                                                                    class="form-control dropify"
                                                                    data-default-file="{{ $page->image_url }}"
                                                                    name="image"
                                                                    accept="image/png, image/jpg, image/jpeg, image/gif"
                                                                    data-allowed-file-extensions='["jpg", "jpeg","png", "gif"]'
                                                                    data-max-file-size="3M">

                                                            </div>
                                                            <small class="image text-danger"></small>
                                                            @error('image')
                                                                <span class="invalid-feedback d-block"
                                                                    role="alert"><strong>{{ $message }}</strong>
                                                                </span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="form-group col-12">
                                                            <label class="form-lebel">
                                                                YouTube Video Key
                                                            </label>
                                                            <input type="text" class="form-control" name="youtube_key"
                                                                value="{{ @$page->youtube_key }}">
                                                            <small class="youtube_key text-danger"></small>
                                                            @error('youtube_key')
                                                                <span class="invalid-feedback d-block"
                                                                    role="alert"><strong>{{ $message }}</strong>
                                                                </span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="card tab-pane" id="tabs-3" role="tabpanel">
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="form-group col-6">
                                                            <x-forms.label name="Meta title" :required="false" />
                                                            <x-forms.input type="text" name="meta_title"
                                                                id="meta_title" value="{!! old('meta_title', $page->meta_title) !!}"
                                                                placeholder="Enter meta Title" />
                                                            <x-forms.error name="meta_title" />
                                                        </div>
                                                        <div class="form-group col-6">
                                                            <x-forms.label name="Robots" />
                                                            <select name="robots"
                                                                class="form-control {{ error('robots') }}"
                                                                id="robots">
                                                                <option value="">{{ __('select_robots') }}</option>
                                                                <option
                                                                    {{ old('robots', $page->robots) == 'noindex, nofollow' ? 'selected' : '' }}
                                                                    value="noindex, nofollow">noindex, nofollow</option>
                                                                <option
                                                                    {{ old('robots', $page->robots) == 'nofollow, index' ? 'selected' : '' }}
                                                                    value="nofollow, index">nofollow, index</option>

                                                                <option
                                                                    {{ old('robots', $page->robots) == 'noindex, follow' ? 'selected' : '' }}
                                                                    value="noindex, follow">noindex, follow</option>
                                                                <option
                                                                    {{ old('robots', $page->robots) == 'index, follow' ? 'selected' : '' }}
                                                                    value="index, follow">index, follow</option>
                                                            </select>
                                                            @error('robots')
                                                                <span class="invalid-feedback d-block"
                                                                    role="alert"><strong>{{ $message }}</strong>
                                                                </span>
                                                            @enderror
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="form-group col-12">
                                                            <x-forms.label name="Meta Description" :required="false" />
                                                            <textarea type="text" class="form-control" name="meta_description" placeholder="Enter meta Description">{{ old('meta_description', $page->meta_description) }}</textarea>
                                                            <x-forms.error name="meta_description" />
                                                        </div>

                                                    </div>

                                                    <div class="row">
                                                        <div class="form-group col-12">
                                                            <x-forms.label name="Meta keywords" :required="false" />
                                                            <x-forms.input type="text" name="meta_keywords"
                                                                value="{!! old('meta_keywords', $page->meta_keywords) !!}"
                                                                placeholder="Enter meta keywords" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card tab-pane" id="tabs-5" role="tabpanel">
                                                <div class="card-body">
                                                    <div class="row">

                                                        <div class="form-group col-6">
                                                            <x-forms.label
                                                                name="{{ __('publish') }} {{ __('date') }}"
                                                                :required="false" />
                                                            <input type="date" id="display_date" class="form-control @error('display_date') is-invalid @enderror"
                                                                @if (!empty($page->display_date)) value="{{ date('Y-m-d', strtotime($page->display_date)) }}" @endif
                                                                name="display_date" placeholder="Display Date">
                                                        </div>
                                                        <div class="form-group col-6">
                                                            <x-forms.label name="Header Strip" :required="false" />
                                                            <x-forms.input type="text" name="header_strip"
                                                                id="header_strip" value="{!! old('header_strip', $page->header_strip) !!}"
                                                                placeholder="Enter Header Strip" />
                                                            <x-forms.error name="header_strip" />
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="form-group col-6">
                                                            <x-forms.label name="Created By" :required="false" />
                                                            <input type="text" class="form-control"
                                                                name="created_by_name"
                                                                value="{{ @$page->author->name }}"
                                                                placeholder="Enter Created By" readonly />
                                                        </div>
                                                        <div class="form-group col-6">
                                                            <x-forms.label name="Modified By" :required="false" />
                                                            <input type="text" class="form-control"
                                                                name="modified_by_name"
                                                                value="{{ @$page->modified->name }}"
                                                                placeholder="Modified By" readonly />
                                                        </div>
                                                    </div>

                                                    <div class="row blog">
                                                        <div class="form-check form-switch form-group col-6 p-2">
                                                            <div class="form-check form-switch ps-0">
                                                                <label class="form-check-label "
                                                                    for="Tranding"><strong>Trending</strong></label>
                                                                <input class="form-check-input ms-3" type="checkbox"
                                                                    role="switch" name="tranding" id="Tranding"
                                                                    value="1"{{ $page->trending_blog == 1 ? 'checked' : '' }}>

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

                                            <div class="card tab-pane" id="tabs-6" role="tabpanel">
                                                <div class="card-body">

                                                    <div class="row ">
                                                        <div class="form-group col-6">
                                                            <x-forms.label name="Banner Title" :required="false" />
                                                            <x-forms.input type="text" name="bannerTitle"
                                                                id="bannerTitle" value="{!! old('bannerTitle', $page->bannerTitle) !!}"
                                                                placeholder="Enter Banner Title" />
                                                            <small class="text-danger"></small>
                                                        </div>
                                                        <div class="form-group col-6">
                                                            <x-forms.label name="Banner Button Name" :required="false" />
                                                            <x-forms.input type="text" name="bannerButtonName"
                                                                id="bannerButtonName" value="{!! old('bannerButtonName', $page->bannerButtonName) !!}"
                                                                placeholder="Enter Banner Button Name" />
                                                            <small class="text-danger"></small>
                                                        </div>

                                                    </div>
                                                    <div class="row">
                                                        <div class="form-group col-6">
                                                            <x-forms.label name="Banner Description" :required="false" />
                                                            <textarea rows="7" type="text" class="form-control" name="bannerDescription" spellcheck="true"
                                                                placeholder="Enter Banner Description">{!! old('bannerDescription', @$page->bannerDescription) !!}</textarea>

                                                        </div>
                                                        <div class="form-group col-6">
                                                            <label class="form-lebel">
                                                                Banner Pdf
                                                                @if (!empty(@$page->bannerPdf))
                                                                    <button type="button"
                                                                        class="round-3 btn btn-outline-info border-secondary"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#banner_pdf_modal">
                                                                        <i class="fas fa-eye"></i>
                                                                    </button>
                                                                @endif

                                                            </label>

                                                            <div class="upload-btn-wrapper">
                                                                <input type="file" id="bannerPdf"
                                                                    class="form-control dropify"
                                                                    data-default-file="{{ @$page->banner_pdf_url }}"
                                                                    name="bannerPdf"
                                                                    accept="image/png, image/jpg, image/jpeg, image/gif, application/pdf"
                                                                    data-allowed-file-extensions='["jpg", "jpeg","png", "gif","pdf"]'
                                                                    data-max-file-size="6M">

                                                            </div>

                                                            <small class="bannerPdf text-danger"></small>
                                                            @error('bannerPdf')
                                                                <span class="invalid-feedback d-block"
                                                                    role="alert"><strong>{{ $message }}</strong>
                                                                </span>
                                                            @enderror
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="card tab-pane" id="tabs-9" role="tabpanel">
                                                <div class="card-body">
                                                    <div id="links">
                                                        <div class="row ">
                                                            <div class="form-group col-5">
                                                                <x-forms.label name="link Name" :required="false" />
                                                                <x-forms.input type="text"
                                                                    name="quick_links[0][link_name]"
                                                                    id="quick_links[0][link_name]"
                                                                    value="{{ !empty($quick_links[0]) ? $quick_links[0]->link_name : '' }}"
                                                                    placeholder="Enter Link Name" />
                                                                <small class="text-danger"></small>
                                                            </div>
                                                            <div class="form-group col-5">
                                                                <x-forms.label name="Link Url" :required="false" />
                                                                <x-forms.input type="text"
                                                                    name="quick_links[0][link_url]"
                                                                    id="quick_links[0][link_url]"
                                                                    value="{{ !empty($quick_links[0]) ? $quick_links[0]->link_url : '' }}"
                                                                    placeholder="Enter Url Name" />
                                                                <small class="text-danger"></small>
                                                            </div>
                                                            <div class="form-group col-1 mt-4 d-flex align-items-end">
                                                                <a role="button" onclick="add_features_field()"
                                                                    class="btn bg-primary text-light"><i
                                                                        class="fas fa-plus"></i></a>

                                                            </div>
                                                        </div>

                                                        @if (isset($quick_links))
                                                            @foreach ($quick_links as $index => $links)
                                                                @if ($index != 0)
                                                                    <div class="row ">
                                                                        <div class="form-group col-5">
                                                                            <x-forms.label name="link Name"
                                                                                :required="false" />
                                                                            <x-forms.input type="text"
                                                                                name="quick_links[{{ $index }}][link_name]"
                                                                                id="quick_links[{{ $index }}][link_name]"
                                                                                value="{{ $links->link_name }}"
                                                                                placeholder="Enter Link Name" />
                                                                            <small class="text-danger"></small>
                                                                        </div>
                                                                        <div class="form-group col-5">
                                                                            <x-forms.label name="Link Url"
                                                                                :required="false" />
                                                                            <x-forms.input type="text"
                                                                                name="quick_links[{{ $index }}][link_url]"
                                                                                id="quick_links[{{ $index }}][link_url]"
                                                                                value="{{ $links->link_url }}"
                                                                                placeholder="Enter Url Name" />
                                                                            <small class="text-danger"></small>
                                                                        </div>
                                                                        <div
                                                                            class="form-group col-1 mt-4 d-flex align-items-end">
                                                                            <a role="button" id="remove_item"
                                                                                class="btn bg-danger text-light">
                                                                                <i class="fas fa-times"></i>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                            @endforeach
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @php
        $quick_links_array = (array) $quick_links; // Convert the object to an array
        $last_key = array_key_last($quick_links_array);
    @endphp
    <input type="hidden" name="" value="{{ $last_key }}" id="last_key">
    </div>

    <div class="modal fade" id="banner_pdf_modal" tabindex="-1" aria-labelledby="exampleModal2Label"
        aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <!-- Close button at the top right corner -->
                <div class="d-flex align-items-center justify-content-end">
                    <button type="button" class="float-right btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="ratio ratio-4x3">
                    <iframe src="{{ @$page->banner_pdf_url }}" title="Banner Pdf Viewer" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="{{ asset('backend/plugins/dropify/css/dropify.min.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

    <style>
        .ck-editor__editable_inline {
            min-height: 160px;
        }

        .select2-results__option[aria-selected=true] {
            display: none;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
            color: #fff;
            border: 1px solid #fff;
            background: #007bff;
            border-radius: 30px;
        }

        .height-124px {
            height: 124px !important
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff;
        }

        .align-items-center {
            -ms-flex-align: center !important;
            align-items: center !important;
        }

        .d-flex {
            display: -ms-flexbox !important;
            display: flex !important;
        }

        .addScore {
            cursor: pointer;
        }

        .removeButton {
            cursor: pointer;
        }
    </style>
@endsection

@section('script')
    <script src="{{ asset('backend') }}/plugins/select2/js/select2.full.min.js"></script>
    <script src="{{ asset('backend/plugins/dropify/js/dropify.min.js') }}"></script>

    <script src="{{ asset('tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>
    <link rel="stylesheet" href="{{ asset('backend/plugins/dropify/css/dropify.min.css') }}">

    <script>
        $(document).on("click", "#remove_item", function() {
            var confirmed = confirm('Are you sure you want to delete this item?');
            if (confirmed) {

                $(this).parent().parent('div').remove();
            }
        });
        var last_key = $("#last_key").val();
        var count = ++last_key;

        function add_features_field() {
            $('#links').append(
                `
                    <div class="" id="links">
                        <div class="row ">
                        <div class="form-group col-5">
                            <x-forms.label name="link Name" :required="false" />
                            <x-forms.input type="text" name="quick_links[${count}][link_name]" id="quick_links"
                            value="{!! old('link_name') !!}"
                            placeholder="Enter Link Name" />
                            <small class="text-danger"></small>
                        </div>
                        <div class="form-group col-5">
                            <x-forms.label name="link url" :required="false" />
                        <x-forms.input type="text" name="quick_links[${count}][link_url]" id="quick_links"
                            value="{!! old('link_url') !!}"
                            placeholder="Enter Url Name" />
                            <small class="text-danger"></small>
                        </div>
                        <div class="form-group col-2 mt-4 d-flex align-items-end">
                            <a role="button" id="remove_item"
                            class="btn bg-danger text-light"><i class="fas fa-times"></i></a>
                        </div>
                        </div>                                      
                    </div>
                `
            )
            count++;
        }
        $(document).ready(function() {
            $("#remove_quick_link").click(function() {

                var index = $(this).val();
                // alert(index);
                var confirmed = confirm('Are you sure you want to delete this item?');
                if (confirmed) {
                    $.ajax({
                        url: {{ 'module.blog.delete' }},
                        type: "POST",
                        data: {
                            index: index
                        },
                        dataType: "json",
                        success: function(response) {},
                        error: function(xhr, status, error) {
                            console.error("Error:", status, error);
                        }
                    });
                }
            });
        });



        for (var i = 0; i < 20; i++) {
            tinymce.init({
                selector: `#editor${i}`,
                plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount code imagetools fontawesome',
                toolbar: 'fontawesome | searchreplace | code |undo redo | blocks |bold italic underline strikethrough | align | link image media table | numlist bullist indent outdent',
                image_advtab: true,
                valid_elements: '*[*]',
                valid_children: '*[*]',
                extended_valid_elements: '*[*]',
                images_upload_handler: function(blobInfo, success, failure) {
                    return new Promise(function(resolve, reject) {
                        var xhr = new XMLHttpRequest();
                        xhr.withCredentials = false;
                        xhr.open('POST', "{{ route('module.blog.upload') }}", true);
                        xhr.onload = function() {
                            var response = JSON.parse(xhr.responseText);
                            if (response.status === 200) {
                                var serverURL = window.location.protocol + '//' + window.location
                                    .hostname + ':' + window.location.port;
                                var imageURL = serverURL + '/' + response.location;
                                success(imageURL);
                                resolve(imageURL);
                            } else if (response.status === 403) {
                                reject(response.message);
                            }
                        };
                        xhr.onerror = function() {
                            reject('An error occurred during the image upload.');
                        };
                        var formData = new FormData();
                        formData.append('file', blobInfo.blob(), blobInfo.filename());
                        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
                        xhr.send(formData);
                    });
                }
            });
        }

        for (var i = 0; i < 20; i++) {
            tinymce.init({
                selector: `#newEditor${i}`,
                plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount code imagetools fontawesome',
                toolbar: 'fontawesome | searchreplace | code |undo redo | blocks |bold italic underline strikethrough | align | link image media table | numlist bullist indent outdent',
                image_advtab: true,
                valid_elements: '*[*]',
                valid_children: '*[*]',
                extended_valid_elements: '*[*]',
                images_upload_handler: function(blobInfo, success, failure) {
                    return new Promise(function(resolve, reject) {
                        var xhr = new XMLHttpRequest();
                        xhr.withCredentials = false;
                        xhr.open('POST', "{{ route('module.blog.upload') }}", true);
                        xhr.onload = function() {
                            var response = JSON.parse(xhr.responseText);
                            if (response.status === 200) {
                                var serverURL = window.location.protocol + '//' + window.location
                                    .hostname + ':' + window.location.port;
                                var imageURL = serverURL + '/' + response.location;
                                success(imageURL);
                                resolve(imageURL);
                            } else if (response.status === 403) {
                                reject(response.message);
                            }
                        };
                        xhr.onerror = function() {
                            reject('An error occurred during the image upload.');
                        };
                        var formData = new FormData();
                        formData.append('file', blobInfo.blob(), blobInfo.filename());
                        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
                        xhr.send(formData);
                    });
                }
            });
        }

        function editor(id) {
            tinymce.init({
                selector: `#newEditor${id}`,
                plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount code imagetools fontawesome',
                toolbar: 'fontawesome | searchreplace | code |undo redo | blocks |bold italic underline strikethrough | align | link image media table | numlist bullist indent outdent',
                image_advtab: true,
                valid_elements: '*[*]',
                valid_children: '*[*]',
                extended_valid_elements: '*[*]',
                images_upload_handler: function(blobInfo, success, failure) {
                    return new Promise(function(resolve, reject) {
                        var xhr = new XMLHttpRequest();
                        xhr.withCredentials = false;
                        xhr.open('POST', "{{ route('module.blog.upload') }}", true);
                        xhr.onload = function() {
                            var response = JSON.parse(xhr.responseText);
                            if (response.status === 200) {
                                var serverURL = window.location.protocol + '//' + window.location
                                    .hostname + ':' + window.location.port;
                                var imageURL = serverURL + '/' + response.location;
                                success(imageURL);
                                resolve(imageURL);
                            } else if (response.status === 403) {
                                reject(response.message);
                            }
                        };
                        xhr.onerror = function() {
                            reject('An error occurred during the image upload.');
                        };
                        var formData = new FormData();
                        formData.append('file', blobInfo.blob(), blobInfo.filename());
                        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
                        xhr.send(formData);
                    });
                }
            });
        }

        for (var i = 0; i < 20; i++) {
            tinymce.init({
                selector: `#mobile_editor${i}`,
                plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount code imagetools fontawesome',
                toolbar: 'fontawesome | searchreplace | code |undo redo | blocks |bold italic underline strikethrough | align | link image media table | numlist bullist indent outdent',
                image_advtab: true,
                valid_elements: '*[*]',
                valid_children: '*[*]',
                extended_valid_elements: '*[*]',
                images_upload_handler: function(blobInfo, success, failure) {
                    return new Promise(function(resolve, reject) {
                        var xhr = new XMLHttpRequest();
                        xhr.withCredentials = false;
                        xhr.open('POST', "{{ route('module.blog.upload') }}", true);
                        xhr.onload = function() {
                            var response = JSON.parse(xhr.responseText);
                            if (response.status === 200) {
                                var serverURL = window.location.protocol + '//' + window.location
                                    .hostname + ':' + window.location.port;
                                var imageURL = serverURL + '/' + response.location;
                                success(imageURL);
                                resolve(imageURL);
                            } else if (response.status === 403) {
                                reject(response.message);
                            }
                        };
                        xhr.onerror = function() {
                            reject('An error occurred during the image upload.');
                        };
                        var formData = new FormData();
                        formData.append('file', blobInfo.blob(), blobInfo.filename());
                        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
                        xhr.send(formData);
                    });
                }
            });
        }


        $('.select2bs4').select2({
            theme: 'bootstrap4'
        });
        //Initialize Select2 Elements
        $('.select2bs44').select2({
            theme: 'bootstrap4',
            multiple: true,
            placeholder: 'Select Tags'
        })

        $('.dropify').dropify();
    </script>

    <script>
        $(document).ready(function() {
            $(".optional-field").hide();
            $(".category-page").hide();
            $(".country-page").hide();
            var selectElement = document.getElementById("category_id");
            var categoryId = selectElement.value;
            var dataClass = $('option:selected', selectElement).data('class');
            var className = $('option:selected', this).data('class').trim();
            let url = $('option:selected', this).data('url');            
            categoryHideShowFunction(className, url);            
        });


        $("#category_id").change(function() {            
            $(".optional-field").hide();
            $(".category-page").hide();
            $(".country-page").hide();
            let url = $('option:selected', this).data('url');            
            var className = $('option:selected', this).data('class').trim();
            categoryHideShowFunction(className, url);
        });

        function categoryHideShowFunction(className, url) {
            $('.blog_strips_dropdown').hide();
            $('.description_textarea').hide();
            $(".optional-field").hide();
            $(".category-page").hide();
            $(".country-page").hide();
            if(url == 'city-page'){
                $('.consultancy').show();
                $('.admission_desc').hide();
                $('.city-page').show();
            }else{
                $("." + className).show();
            }
            if (className != 'blog') {
                $('.description_textarea').show();               
            }
            if(className == 'blog'){
                $('#admission_desc').text('Exam Strip');
                $('#mobile_admission_desc').text('Exam Strip');
                $('#city_desc').text('Course Strip');
                $('#mobile_city_desc').text('Course Strip');
                $('#cost_of_living_desc').text('Interactive Strip');
            }
            else if(className == 'consultancy'){
                $('.descriptionBlock').hide();
                $('#city_desc').text('Lower Content');
                $('#mobile_city_desc').text('Lower Content');
            }
            else{
                $('#admission_desc').text('Admission Description');
                $('#mobile_admission_desc').text('Admission Description');
                $('#city_desc').text('City Description');
                $('.descriptionBlock').show();
                $('#mobile_city_desc').text('City Description');
                $('#cost_of_living_desc').text('Cost of Living Description');
            }
        }
    </script>

    <script>
        function validateForm(event, form) {
            event.preventDefault();

            var category_ids = $('#category_id').val();
            var title = $('#title').val();
            var url = $('#url').val();
            var description = tinymce.get("editor3").getContent();
            var relative_university = $('#relative_university').val();
            var header_description = $('.header_description').val();
            var header_title = $('#header_title').val();
            var images = $('#image').val();
            var imageTitle = $('#imageTitle').val();
            var imageAltText = $('#imageAltText').val();
            $('.text-danger').text('');
            var isValid = true;

            if (title.trim() === '') {
                $('#title').next('.text-danger').text('Please enter a title.');
                $('#title').focus();
                isValid = false;
                return;
            }

            if (url.trim() === '') {
                $('#url').next('.text-danger').text('Please enter a URL.');
                $('#url').focus();
                isValid = false;
                return;
            }

            if (category_ids === null || category_ids === undefined || category_ids === '') {
                $('#category_id').nextAll('.text-danger').first().text('Please select a category.');
                $('#category_id').focus();
                isValid = false;
                return;
            }

            if (description == '') {
                $('#description_iidd').next('.text-danger').text('Please enter a description.');
                $('#description_iidd').focus();
                $('html, body').animate({
                    scrollTop: $('#description_iidd').offset().top
                }, 500);
                isValid = false;
                return;
            }

            var selectElement = document.getElementById("category_id");
            var categoryId = selectElement.value;
            var className = $('option:selected', selectElement).data('class').trim();
            if (className) {
                if (className == "blog") {
                    if (header_title.trim() === '') {
                        $('a[href="#tabs-1').click();
                        $('#header_title').nextAll('.text-danger').first().text('Please enter a Header Title.');
                        $('#header_title').focus();
                        isValid = false;

                    } else if (header_description.trim() === '') {

                        $('a[href="#tabs-1').click();
                        $('.header_description').nextAll('.text-danger').first().text('Please enter a Header Title.');
                        $('.header_description').focus();
                        isValid = false;

                    } else if (imageTitle.trim() === '') {
                        $('a[href="#tabs-2"]').click();
                        $('#imageTitle').nextAll('.text-danger').first().text('Please enter a Image Title.');
                        $('#imageTitle').focus();
                        isValid = false;
                    } else if (imageAltText.trim() === '') {
                        $('a[href="#tabs-2"]').click();
                        $('#imageAltText').nextAll('.text-danger').first().text('Please enter a Image AltText.');
                        $('#imageAltText').focus();
                        isValid = false;
                    } else if (images === null || images === undefined || images === '') {

                        var imagess = $('#image').data('default-file');
                        if (imagess.includes("default-post.png") || imagess === null) {
                            $('a[href="#tabs-2"]').click();
                            $('.image').text('Please select an image.');
                            $('#image').focus();
                            isValid = false;
                        }


                    }

                    let blog_array = $('.countBlogArray');
                    if (blog_array.length > 1) {
                        blog_array.each(function(index, element) {
                            let blog_header = $(this).find('.blog_header').val();
                            let editor_id = $(this).find('textarea').attr('id');
                            let blog_description = tinymce.get(editor_id).getContent();
                            if (blog_header != '' || blog_description != '') {
                                if (blog_header == '') {
                                    isValid = false;
                                    $(this).find('.text-danger').text('Please enter above Blog Header.');
                                    $(this).find('.text-danger')[0].scrollIntoView({
                                        behavior: 'smooth',
                                        block: 'end'
                                    });
                                    return false;
                                } else if (blog_description == '') {
                                    isValid = false;
                                    $(this).find('.text-danger').text('Please enter above Blog Description.');
                                    $(this).find('.text-danger')[0].scrollIntoView({
                                        behavior: 'smooth',
                                        block: 'end'
                                    });
                                    return false;
                                }
                            }
                        });
                    }

                    let blog_strip_array = $('.countBlogStripArray');
                    if (blog_strip_array.length > 1) {
                        blog_strip_array.each(function(index, element) {
                            let editor_id = $(this).find('textarea').attr('id');
                            let blog_strip = tinymce.get(editor_id).getContent();
                            if (blog_strip == '') {
                                $(this).find('.text-danger').text('Please enter Blog Strip.');
                                $(this).find('.text-danger')[0].scrollIntoView({
                                    behavior: 'smooth',
                                    block: 'end'
                                });
                                isValid = false;
                                return false;
                            }
                        });
                    }
                } else if (className == "country-page") {
                    if ($('#country_id').val() === null || $('#country_id').val() === undefined || $('#country_id')
                        .val() === '') {
                        $('#country_id').nextAll('.text-danger').first().text('Please select country.');
                        $('#country_id').focus();
                        isValid = false;
                    }
                } else if (className == "category-page") {
                    if ($('#parent_category_id').val() === null || $('#parent_category_id').val() === undefined || $(
                            '#parent_category_id').val() === '') {
                        $('#parent_category_id').nextAll('.text-danger').first().text('Please select category.');
                        $('#parent_category_id').focus();
                        isValid = false;
                    }

                } else if (className == "consultancy") {
                    if (header_title.trim() === '') {
                        $('#header_title').nextAll('.text-danger').first().text('Please enter a Header Title.');
                        $('#header_title').focus();
                        isValid = false;

                    } else if (header_description.trim() === '') {
                        $('.header_description').nextAll('.text-danger').first().text('Please enter a Header Title.');
                        $('.header_description').focus();
                        isValid = false;
                    }

                }
            }
            if (isValid) {

                var buttonName = event.submitter.name;

                if (buttonName === 'save_close_button') {
                    $('#button_type').val(buttonName);
                } else if (buttonName === 'submit_button') {
                    $('#button_type').val(buttonName);
                }

                event.target.submit();
            }
        }

        var indexCount = {{ $indexCount }};
        $('.addScore').on('click', function() {
            indexCount++;
            let section = $('#selectSection').val();
            let position = $('#stripPosition').val();
            console.log(position);

            let sectionHtml = '';
            if (section == 'BlogDropdown') {
                sectionHtml =
                    `                    
                    <div class="col-6 countBlogArray" id="block${indexCount}">
                        <input type="hidden" value="${section}" name="blog_array[${indexCount}][blog_type]">
                        <div class="form-group" style="position: relative;">
                            <input type="text" class="form-control blog_header" name="blog_array[${indexCount}][blog_header]"  placeholder="Enter Header Title" />
                            <i class="fa fa-times removeButton" onclick="removeBlock('block${indexCount}')" style="position: absolute; top: 50%; transform: translateY(-50%); right: 10px;"></i>
                        </div>
                        <div class="form-group">                                                            
                            <textarea type="text" class="form-control blog_description" id="newEditor${indexCount}" name="blog_array[${indexCount}][blog_description]" placeholder="Enter Blog Descrition"></textarea>
                        </div>
                        <small class="text-danger"></small>
                    </div>
                `
            } else if (section == 'BlogStrip') {
                sectionHtml =
                    `
                    <div class="col-6 countBlogStripArray" id="block${indexCount}">
                        <input type="hidden" value="${section}" name="blog_array[${indexCount}][blog_type]">
                        <div class="form-group" style="position: relative;">
                            <input type="text" class="form-control" placeholder="Enter Header Title" readonly/>
                            <i class="fa fa-times removeButton" onclick="removeBlock('block${indexCount}')" style="position: absolute; top: 50%; transform: translateY(-50%); right: 10px;"></i>
                        </div>
                        <div class="form-group">                                                            
                            <textarea type="text" class="form-control blog_strip" id="newEditor${indexCount}" name="blog_array[${indexCount}][blog_strip]" placeholder="Enter Blog Descrition"></textarea>
                        </div>
                        <small class="text-danger"></small>
                    </div>
                `
            }

            if(position == 'start'){
                $('.appendBlogDescription').prepend(sectionHtml);
            }else{
                $('.appendBlogDescription').append(sectionHtml);
            }
            editor(indexCount);
        });

        function removeBlock(id) {
            $('#' + id).remove();
            let count = $('.countBlogArray').length;
            if (count == 0) {
                $('.addScore').trigger('click');
            }
        }        

        $(document).on('change', '#status', function () {
            let statusValue = $(this).val();
            console.log(statusValue);
            if(statusValue == 'published'){
                let displayDateValue = $('#display_date').val();
                if (!displayDateValue) { // Check if display_date is empty
                    let today = new Date();
                    let dd = String(today.getDate()).padStart(2, '0');
                    let mm = String(today.getMonth() + 1).padStart(2, '0');
                    let yyyy = today.getFullYear();

                    let todayStr = yyyy + '-' + mm + '-' + dd;
                    console.log(todayStr);
                    $('#display_date').val(todayStr);
                }
            }
        });


        $(document).ready(function() {

            $('#status').trigger('change');

            $('#category_id').on('change', function() {

                var selectedCategory = $(this).val();

                if (selectedCategory) {
                    $('.select_country_show').show();
                }
            });


            $('#country_id').on('change', function() {
                var selectedCountry = $(this).val();
                var university_id = "";
                var university_name = "";

                $('#relative_university').empty();
                $('#relative_university').append($('<option>').val('').text('Select University'));

                $.ajax({
                    url: "{{ route('module.blog.get-universities') }}",
                    type: 'GET',
                    data: {
                        country_id: selectedCountry
                    },
                    dataType: 'json',
                    success: function(data) {

                        $.each(data, function(index, university) {
                            university_id = university.id;
                            university_name = university.name;

                            $('#relative_university').append($('<option>').val(
                                university_id).text(university_name));
                        });

                        $('.relative_university').show();
                    },
                    error: function() {

                        console.error('Failed to fetch universities.');
                    }
                });
            });
        });
    </script>
@endsection