@extends('admin.layouts.app')
@section('title')
    {{ __('create_employer') }}
@endsection

@section('content')
    <style>
        .border-red {
        border: 1px solid red !important;
        }
        .remove {
            background: #f1f1f1;

            td {
                font-style: italic;
            }
        }

        .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred {
            height: 400px;
        }

        .table>tbody>tr>td {
            vertical-align: middle;
        }

        .input-group {
            width: 100%;
        }

        .editable {
            border: none;
            padding: 0;
            margin: 0;
            text-shadow: none;
            box-shadow: none;
            height: 80px;
        }

        .addBtn {
            cursor: pointer;
        }

        .sticky-menu {
            position: sticky;
            z-index: 555;
            width: 100%;
            top: 1px;
        }
    </style>
<script>
    function studyImgCheck(event) {
        var studyRadiod = $('.study-img');
        studyRadiod.removeClass("active");
        $(event.target).addClass("active");
        studyRadiod.not(event.target).prop('checked', false);
        // $(".study-img").dblclick(function(events){
        //     $(this).(events.target).prop('checked', false);
        // });
      
    }
    
    </script>

    <div class="container-fluid">
        <form class="form-horizontal" action="{{ route('university.store') }}" method="POST" enctype="multipart/form-data" onsubmit="validateForm(event, 'create')" id="myForm" novalidate>
            @csrf
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title line-height-36">{{ __('university') }} {{ __('create') }}</h4>
                    <button type="submit"
                        class="btn bg-success float-right d-flex align-items-center justify-content-center">
                        <i class="fas fa-plus mr-1"></i>
                        {{ __('save') }}
                    </button>
                </div>
            </div>

            {{-- tabs start --}}
            <ul class="nav nav-tabs" role="tablist" id="myTabs">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#university" role="tab">{{ __('university') }}
                        <span class="form-label-required text-danger">*</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#dashboard" role="tab">{{ __('dashboard') }}
                        <span class="form-label-required text-danger">*</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#coursesFees" role="tab">{{ __('Courses & Fees') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#admissions"  role="tab">{{ __('Admissions') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#accommodation"  role="tab">{{ __('Accommodation') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#gallery"  role="tab">{{ __('Gallery') }}
                        <span class="form-label-required text-danger">*</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#rankings"  role="tab">{{ __('Rankings') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#others"  role="tab">{{ __('Others') }}
                        <span class="form-label-required text-danger">*</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#metaTags"  role="tab">{{ __('Meta Tags') }}
                        <span class="form-label-required text-danger">*</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#publish"  role="tab">{{ __('publish') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#faq"  role="tab">{{ __('faq') }}</a>
                </li>
            </ul>
            {{-- tabs end --}}

            {{-- tabs content start --}}
            <div class="tab-content tab-validate" id="pills-tabContent">
                {{-- university info body --}}
                <div class="tab-pane fade show active" id="university" role="tabpanel" aria-labelledby="pills-university-tab">
                    <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="form-group col-6">
                                                <x-forms.label name="name" />
                                                <x-forms.input type="text" name="name" placeholder="name" id="name"/>
                                                <span class="text-danger"></span>
                                            </div>
                                            <div class="form-group col-6">
                                                <x-forms.label name="address" :required="false" />
                                                <x-forms.input type="text" name="address" placeholder="address"/>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-6">
                                                <x-forms.label name="phone" :required="false" />
                                                <x-forms.input type="text" name="phone" placeholder="phone" />
                                            </div>
                                            <div class="form-group col-6">
                                                <x-forms.label name="email" :required="false" />
                                                <x-forms.input type="email" name="email" placeholder="email" id="email"/>
                                                <span class="text-danger"></span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-6">
                                                <x-forms.label name="Students" :required="false" />
                                                <x-forms.input type="number" name="students" placeholder="Enter Students" value="{{ old('students') }}" />
                                            </div>
                                            <div class="form-group col-6">
                                                <x-forms.label name="Reviews" :required="false" />
                                                <x-forms.input type="number" name="reviews" placeholder="Enter Reviews" value="{{ old('reviews') }}" />
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col">
                                                <x-forms.label name="University Short description" :required="false" />
                                                <textarea type="text" id="editor5" rows="4" class="form-control" name="short_description" placeholder="Enter Short Description">{{ old('short_description') }}</textarea>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-12">
                                                <x-forms.label name="Recruiter Details" :required="false" />
                                                <textarea id="recruiter_details" rows="4" name="recruiter_details" placeholder="Recruiter Details" class="form-control">{{ old('recruiter_details', !empty($universities->recruiter_details) ? $universities->recruiter_details : '') }}</textarea>
                                            </div>
                                        </div>
                                        {{-- due db --}}
                                        {{-- <div class="row">
                                            <div class="form-group col-6">
                                                <x-forms.label name="courses" :required="false"/>
                                                <x-forms.input type="number" name="courses" placeholder="Enter Courses"/>
                                            </div>
                                            <div class="form-group col-6">
                                                <x-forms.label name="recruiters" :required="false"/>
                                                <x-forms.input type="recruiters" name="courses" placeholder="Enter recruiters" value="{{ old('reviews', $universities->recruiters) }}"/>
                                            </div>
                                        </div> --}}
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="form-group col-6">
                                                <x-forms.label name="Header Image Desktop" :required="false" />
                                                <input name="headerImageDesktop" type="file" data-show-errors="true" data-width="50%" data-default-file="" class="dropify">
                                            </div>
                                            <div class="form-group col-6">
                                                <x-forms.label name="Header Image Mobile" :required="false" />
                                                <input name="headerImageMobile" type="file" data-show-errors="true" data-width="100%" data-default-file="" class="dropify">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-4">
                                                <x-forms.label name="University Icon" :required="false" />
                                                <input name="university_icon" type="file" data-show-errors="true" data-width="50%" class="dropify" data-default-file="">
                                            </div>
                                            <div class="form-group col-8">
                                                <x-forms.label name="logo" :required="true" />
                                                <input name="logo" type="file" data-show-errors="true" data-width="50%" data-default-file="" id="logo" class="dropify"/>
                                                <span class="text-danger logoerror"></span>
                                                @error('logo')
                                                        <span class="text-red d-block" role="alert">{{ __($message) }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-4">
                                                <x-forms.label name="Brochure" :required="false" />
                                                <input name="brochure" type="file" data-show-errors="true" data-width="50%" class="dropify" data-default-file="">
                                                <x-forms.error name="brochure" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> 
                    </div>
                    </div>
                </div>
                
                {{-- dashboard body --}}
                <div class="tab-pane fade" id="dashboard" role="tabpanel" aria-labelledby="pills-dashboard-tab">
                    <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="form-group col-6" >
                                                <x-forms.label name="Establishment" :required="false" />
                                                <input type="number" class="form-control" min="0001" max="9999" name="establishment" placeholder="Establishment" value="{{ old('establishment') }}" />
                                            </div> 
                                            <div class="form-group col-6">
                                                <x-forms.label name="Ug Pg Course Ratio" :required="false" />
                                                    <input type="text" step="any" class="form-control" name="ug_pg_course_ratio" placeholder="Enter Ug Pg Course Ratio" value="{{ old('ug_pg_course_ratio') }}" />
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-6">
                                                <x-forms.label name="Male Female Ratio" :required="false" />
                                                <input type="text" class="form-control" step="any" name="male_female_ratio" placeholder="Enter Male Female Ratio" value="{{ old('male_female_ratio') }}" />
                                            </div>
                                            <div class="form-group col-6">
                                                <x-forms.label name="Endowments" :required="false" />
                                                <x-forms.input type="text" name="endowments" placeholder="Endowments" value="{{ old('endowments') }}" />
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-6">
                                                <x-forms.label name="website" :required="true" />
                                                <x-forms.input type="text" name="website" id="website" placeholder="website" />
                                                <span class="text-danger"></span>
                                            </div>
                                            <div class="form-group col-6">
                                                <x-forms.label name="Total Campuses" :required="false" />
                                                <x-forms.input type="number" name="total_campuses" placeholder="Enter Total Campuses" value="{{ old('total_campuses') }}" />
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-6">
                                                <x-forms.label name="Known As" :required="false" />
                                                <x-forms.input type="text" name="known_as" placeholder="Known As" />
                                            </div>
                                            <div class="form-group col-6">
                                                <x-forms.label name="International Students" :required="false" />
                                                <x-forms.input type="number" name="international_students" placeholder="Enter International Students" value="{{ old('international_students') }}" />
                                            </div>
                                        </div>
                                
                                        <div class="row">
                                            <div class="form-group col-12" >
                                                <x-forms.label name="Entrance Requirements Short List" :required="false" />
                                                <textarea name="entrance_requirement" placeholder="Enter Entrance Requirements Short List" class="form-control"> {{ old('entrance_requirement') }} </textarea>
                                            </div> 
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-12">
                                                <x-forms.label name="Rankings Short Description" :required="false" />
                                                    <textarea id="editor8" rows="8" name="rankings_short_desc" placeholder="Rankings Short Description" class="form-control"> {{ old('rankings_short_desc') }} </textarea>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-12">
                                                <x-forms.label name="International Students Content" :required="false" />
                                                <textarea id="editor7" rows="8" name="international_studentsContent" placeholder="International Students Content" class="form-control">{{ old('international_studentsContent') }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                           
                                </div>
                                <div class="row">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="card-header">
                                                Study Details
                                                </div>
                                         
                                    <p class="mb-1"><strong>Study Detail Content</strong></p><textarea placeholder="Put Some Descriptionns here" class="form-control content" name="study_detail"  rows="3" cols="30"></textarea>                                           
                                   
                                  <div class="row">
                                    <div class="col-6">
                                        <p class="mb-1"><strong>Header1</strong></p><input type="text" class="form-control"   name="study_point[0][header]" placeholder="header1">
                                        <p class="mb-1"><strong>first point content</strong></p>  <textarea  class="form-control content"  name ="study_point[0][content]" rows="5" cols="30"></textarea>

                                    </div>
                                    <div class="col-6">
                                        <p class="mb-1"><strong>Header2</strong></p><input type="text" class="form-control"  name="study_point[1][header]" placeholder="header2">
                                        <p class="mb-1"><strong>second point Content</strong></p><textarea  class="form-control content" name ="study_point[1][content]" rows="5" cols="30">
                                       </textarea>
                                    </div>
                                    <div class="col-6">
                                        <p class="mb-1"><strong>Header3</strong></p><input type="text" class="form-control"   name="study_point[2][header]" placeholder="header2">
                                        <p class="mb-1"><strong>third point Content</strong></p><textarea  class="form-control content" name ="study_point[2][content]" rows="5" cols="30">
                                       </textarea>
                                    </div>
                                    <div class="col-6">
                                        <p class="mb-1"><strong>Header4</strong></p><input type="text" class="form-control"   name="study_point[3][header]" placeholder="header4">
                                        <p class="mb-1"><strong>fourth point Content</strong></p><textarea  class="form-control content" name ="study_point[3][content]"rows="5" cols="30"> 
                                        </textarea>
                                    </div>
                                  </div>
                                
                                   
                                </div>
                            </div>
                        </div>
                            </div>
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="form-group col-12">
                                                <x-forms.label name="Scholarships Content" :required="false" />
                                                <textarea id="editor6" rows="8" name="scholarships_content" placeholder="Scholarships Content" class="form-control"> {{ old('scholarships_content') }} </textarea>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-12">
                                                <x-forms.label name="Scholarships Overview" :required="false" />
                                                <textarea id="scholarships_overview" rows="8" name="scholarships_overview" placeholder="Scholarships Overview" class="form-control">{{ old('scholarships_overview') }}</textarea>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-12">
                                                <x-forms.label name="Conclusion" :required="false" />
                                                <textarea id="conclusion" rows="8" name="conclusion" placeholder="Conclusion" class="form-control">{{ old('conclusion') }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                                <div class="form-group col-12">
                                                    <x-forms.label name="Admission short Description" :required="false" />
                                                    <textarea id="editor9" rows="8" name="admission_short_desc" placeholder="Admission short Description" class="form-control">{{ old('admission_short_desc') }}</textarea>
                                                </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-6">
                                                <x-forms.label name="Documents" :required="false" />
                                                <x-forms.input type="text" name="admission_documents" placeholder="Documents" value="{{ old('admission_documents') }}" />
                                            </div>
                                            <div class="form-group col-6">
                                                <x-forms.label name="Application Fees" :required="false" />
                                                <x-forms.input type="text" name="admission_application_fees" placeholder="Application Fees" value="{{ old('admission_application_fees') }}" />
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-6">
                                                <x-forms.label name="Intake Season" :required="false" />
                                                <x-forms.input type="text" name="admission_intake_season" placeholder="Intake Season" value="{{ old('admission_intake_season') }}" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-header">Overview Services</div>
                                        <div class="row">
                                            
                                            <p class=""><strong>Service Description</strong></p>
                                            <textarea name="overview_services" id="overview_services" class="form-control mb-2" cols="30" rows="8"></textarea>
                                            <div class="col-6">
                                                <p><strong>Block 1</strong></p><input class="form-control mt-2"   name="overview_service_block[0][header]" placeholder="Header" type="text">
                                                <textarea placeholder="Content"  class="form-control content  mt-2" name="overview_service_block[0][content]" rows="3" cols="30"></textarea>
                                                {{-- <input class="form-control addMain" type="file" name="Campus_first_image" class="form-control" placeholder="{{ __('url') }}" /> --}}
                                                 
                                            </div>
                                            <div class="col-6">
                                               <p><strong>Block 2</strong></p> <input class="form-control mt-2"  type="text" name="overview_service_block[1][header]" placeholder="Header">
                                                <textarea placeholder="Content"  class="form-control content  mt-2" name="overview_service_block[1][content]" rows="3" cols="30"></textarea>
                                                {{-- <input class="form-control addMain" type="file" name="Campus_second_image" class="form-control" placeholder="{{ __('url') }}" /> --}}
                                            </div>           
                                            <div class="col-6">

                                            <p><strong>Block 3</strong></p><input class="form-control  mt-2"   type="text" name="overview_service_block[2][header]" placeholder="Header">
                                            <textarea placeholder="Content"  class="form-control content  mt-2" name="overview_service_block[2][content]" rows="3" cols="30"></textarea>
                                            {{-- <input class="form-control addMain" type="file" name="campus_third_image" class="form-control" placeholder="{{ __('url') }}" /> --}}
                                            </div>
                                            
                                        </div>
                                        
                                    </div>
                              

                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                {{-- coursesFees body --}}
                <div class="tab-pane fade" id="coursesFees" role="tabpanel" aria-labelledby="pills-coursesFees-tab">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="form-group col-12">
                                            <x-forms.label name="Course Overview" :required="false" />
                                            <textarea id="course_overview" rows="8" name="course_overview" placeholder="Course Overview" class="form-control">{{ old('course_overview') }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- admissions body --}}
                <div class="tab-pane fade" id="admissions" role="tabpanel" aria-labelledby="pills-admissions-tab">
                    <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="form-group col-12">
                                                <x-forms.label name="Admission Overview" :required="false" />
                                                <textarea id="admission_overview" rows="8" name="admission_overview" placeholder="Admission Overview" class="form-control">{{ old('admission_overview') }}</textarea>
                                            </div>                                        
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-12">
                                                <x-forms.label name="Date Deadline Overview" :required="false" />
                                                <textarea id="date_deadline_overview" rows="8" name="date_deadline_overview" placeholder="Date Deadline Overview" class="form-control">{{ old('date_deadline_overview') }}</textarea>
                                            </div>                                        
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="form-group col-6">
                                                <x-forms.label name="Population of city" :required="false" />
                                                <x-forms.input type="text" name="population_of_city" placeholder="Enter population of city" value="{{ old('population_of_city') }}" />
                                            </div>
                                            <div class="form-group col-6">
                                                <x-forms.label name="Size of city" :required="false" />
                                                <x-forms.input type="text" name="size_of_city" placeholder="Enter size of city" value="{{ old('size_of_city') }}" />
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-6">
                                                <x-forms.label name="Admission Dates" :required="false" />
                                                    <input type="date" value="{{ old('admission_dates') }}" class="form-control @error('admission_dates') is-invalid @enderror"
                                                        name="admission_dates" id="admission_dates" placeholder="Admission Dates">
                                                        {{-- {{dd(date('d/m/Y',strtotime($universities->admission_dates)))}} --}}
                                                    @error('admission_dates')
                                                        <span class="invalid-feedback" role="alert">{{ __($message) }}</span>
                                                    @enderror
                                            </div>
                                            <div class="form-group col-6">
                                                <x-forms.label name="Map URL" :required="false" />
                                                <x-forms.input type="text" name="map_link" placeholder="map url" value="{{ old('map_link') }}" />
                                            </div>
                                          
                                        </div>
                                        <div class="row">
                                         
                                            <div class="form-group col-12">
                                                <x-forms.label name="Wikipedia URL" :required="false" />
                                                <x-forms.input type="text" name="wikipedia_url" placeholder="wikipedia url" value="{{ old('wikipedia_url') }}" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                {{-- accommodation body --}}
                <div class="tab-pane fade" id="accommodation" role="tabpanel" aria-labelledby="pills-accommodation-tab">
                    <div class="card">           
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-header">
                                            {{ __('on_campus_accommodation') }}
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-12">
                                                <x-forms.label name="Details" :required="false" />
                                                <textarea id="editor3" rows="8" name="on_campus_accommodation" placeholder="{{ __('Details') }}" class="form-control"> {{ old('on_campus_accommodation') }} </textarea>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-6">
                                                <x-forms.label name="Living Expense Details" :required="false" />
                                                <x-forms.input type="text" name="on_campus_accommodation_livingExpenseDetails" placeholder="Living Expense Details" value="{{ old('on_campus_accommodation_livingExpenseDetails') }}" />
                                            </div>
                                            <div class="form-group col-6">
                                                <x-forms.label name="Living Expense Url" :required="false" />
                                                <x-forms.input type="text" name="on_campus_accommodation_livingExpenseUrl" placeholder="Living Expense Url" value="{{ old('on_campus_accommodation_livingExpenseUrl') }}" />
                                            </div>
                                        </div>   
                                        <div class="row">
                                            <div class="form-group col-6">
                                                <x-forms.label name="Ug Description" :required="false" />
                                                <textarea id="on_campus_accommodation_ugDescription" rows="8" name="on_campus_accommodation_ugDescription" placeholder="Ug Description" class="form-control">{{ old('on_campus_accommodation_ugDescription') }}</textarea>
                                            </div>
                                            <div class="form-group col-6">
                                                <x-forms.label name="Pg Description" :required="false" />
                                                <textarea id="on_campus_accommodation_pgDescription" rows="8" name="on_campus_accommodation_pgDescription" placeholder="Pg Description" class="form-control">{{ old('on_campus_accommodation_pgDescription') }}</textarea>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-12">
                                                <x-forms.label name="Accommodation Website" :required="false" />
                                                <x-forms.input type="text" name="on_campus_accommodation_website" placeholder="Accommodation Website" value="{{ old('on_campus_accommodation_website') }}" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-header">
                                            {{ __('off_campus_accommodation') }}
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-12">
                                                <x-forms.label name="Description" :required="false" />
                                                <textarea id="editor4" rows="8" name="off_campus_accommodation" placeholder="{{ __('Details') }}" class="form-control"> {{ old('off_campus_accommodation') }} </textarea>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-12">
                                                <div id="multiple_feature_part_off_campus_links">
                                                    <div class="row">
                                                        <div class="form-group col-md-6">
                                                            @php
                                                                if( old('off_campus_accommodation_links')!=null){
                                                                    $off_campus_accommodation = (old('off_campus_accommodation_links'));
                                                                }
                                                            @endphp
                                                            @if (!empty($off_campus_accommodation->links[0]))
                                                                <x-forms.label name="Links" :required="false" />
                                                                <x-forms.input type="text" name="off_campus_accommodation_links[]" placeholder="Links" value="{{ !empty($off_campus_accommodation->links[0]) ? $off_campus_accommodation->links[0] : '' }}" />
                                                            @else
                                                                <x-forms.label name="Links" :required="false" />
                                                                <x-forms.input type="text" name="off_campus_accommodation_links[]" placeholder="Links" />
                                                            @endif
                                                        </div>
                                                        <div class="form-group col-md-3">
                                                            <x-forms.label name="Add Links" :required="false" /><br />
                                                            <a role="button" onclick="add_features_field_off_campus_links()" class="btn bg-primary text-light"><i class="fas fa-plus"></i></a>
                                                        </div>
                                                    </div>
                                                    {{-- array_shift()remove the first index (0) from the $off_campus_accommodation->links array in the @foreach loop, --}}

                                                    @if (!empty($off_campus_accommodation))
                                                        {{-- @php
                                                            array_shift($off_campus_accommodation->links);
                                                        @endphp --}}
                                                        @foreach ($off_campus_accommodation as $links)
                                                            <div class="row">
                                                                <div class="form-group col-md-6">
                                                                    <x-forms.label name="Links" :required="false" />
                                                                    <x-forms.input type="text" name="off_campus_accommodation_links[]" placeholder="Links" value="{{ $links }}" />
                                                                </div>
                                                                <div class="form-group col-md-3">
                                                                    <x-forms.label class="mb-4" name=" " :required="false" /><br />
                                                                    <a role="button" id="remove_item_links" class="btn bg-danger text-light"><i class="fas fa-times"></i></a>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-6">
                                <div class="card">                           
                                    <div class="card-body">
                                        <div class="row">
                                        <div class="card-header"> Accommodation Description</div>
                                        
                                    <div class="col-6">
                                        <p class="mt-3"><strong>Accommodation Description</strong></p>
                                        <textarea class="form-control mb-4"  name="accommodation_desc" id="accommodation_desc" cols="30" rows="8"></textarea>
                                    </div>
                                    <div class="col-6">
                                        <p class="mt-3"><strong>Living Cost Description</strong></p>
                                        <textarea class="form-control"  name="calc_living_exp_desc" id="calc_living_exp_desc" cols="30" rows="8"></textarea>
                                    </div>
                                </div>
                            </div>
                              </div>
                            </div>
                        
                        </div>
                        
                    </div>
                    </div>
                </div>
                {{-- gallery body --}}
                <div class="tab-pane fade" id="gallery" role="tabpanel" aria-labelledby="pills-gallery-tab">
                    <div class="card">           
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-header">
                                            {{ __('gallery') }}
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <table class="table">
                                                    <thead>
                                                        <tr>
                                                            <th>Image Panel</th>
                                                            <th>Media Url</th>
                                                            <th>Media Title</th>
                                                            <th>Alt Text</th>
                                                            <th></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr id="addRow">
                                                            <td class="col-xs-2">

                                                                <div class="form-check">
                                                                    <input class="form-check-input overview-img" type="checkbox" id="overview_img" name="newImgs[0][status]" value="1">Overview
                                                                    <label class="form-check-label"></label>
                                                                </div>
                                                                <div class="form-check">
                                                                    <input class="form-check-input study-img" onchange="studyImgCheck(event)"  type="radio" 
                                                                     id="study_img" name="newImgs[0][study_img]]" value="1">Study
                                                                </div>
                                                                <div class="form-check">
                                                                    <input class="form-check-input university-img" type="checkbox" id="university_img" name="newImgs[0][university_img]" value="1">University
                                                                </div>
                                                            </td>
                                                            <td class="col-xs-2">
                                                               
                                                                <input class="form-control addMain" type="file"
                                                                    name="newImgs[0][mediaUrl]" class="form-control" id="img" placeholder="{{ __('url') }}" />
                                                                    <span class="text-danger imageerror"></span>
                                                            </td>
                                                            <td class="col-xs-2">
                                                                <input class="form-control addPrefer" type="text"
                                                                    name="newImgs[0][mediaTitles]" id="img[0][mediaTitles]" placeholder="Media Title" /> 
                                                            </td>
                                                            <td class="col-xs-2">
                                                                <input class="form-control addCommon" type="text"
                                                                    name="newImgs[0][altTexts]" id="img[0][altTexts]" placeholder="Alt Text" /> 
                                                            </td>
                                                            <td class="col-xs-1 text-center">
                                                                <span class="addBtn">
                                                                    <i class="fa fa-plus">
                                                                        
                                                                    </i>
                                                                </span>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-header">
                                            {{ __('videos') }}
                                            <span class="form-label-required text-danger">*</span>
                                        </div>
                                        {{-- start vieos --}}
                                        <div id="multiple_feature_part">
                                            <div class="row justify-content-center">
                                                <div class="form-group col-md-4">
                                                    <select class="form-control @error('social_media') border-danger @enderror"
                                                        name="social_media[]">
                                                        <option value="" class="d-none" disabled>{{ __('select_one') }}
                                                        </option>
                                                        <option {{ old('social_media') == 'youtube' ? 'selected' : '' }}
                                                            value="youtube">{{ __('youtube') }}</option>
                                                    </select>
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <input type="url" name="videos[]" class="form-control" id="videos">
                                                    <span class="text-danger"></span>
                                                </div>
                                                <div class="form-group col-md-2">
                                                    <a role="button" onclick="add_features_field()"
                                                        class="btn bg-primary text-light"><i class="fas fa-plus"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="card-header">
                                                <p>Gallery Description</p>
                                            </div>
                                            <p><strong>Description</strong></p>
                                            <textarea class="form-control" name="gallery_desc" id="gallery_desc" cols="30" rows="8"></textarea>
                                        </div>
                                    </div>  
                                </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
                {{-- rankings body --}}
                <div class="tab-pane fade" id="rankings" role="tabpanel" aria-labelledby="pills-rankings-tab">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="form-group col-12">
                                            <x-forms.label name="Ranking Overview" :required="false" />
                                            <textarea id="ranking_overview" rows="8" name="ranking_overview" placeholder="Ranking Overview" class="form-control">{{ old('ranking_overview') }}</textarea>
                                        </div>
                                        <div class="form-group col-3">
                                            <strong>QS Ranking</strong><input type="number"  name="qs_ranking" placeholder="Put Qs Ranking Numbers" class="form-control">
                                        </div>
                                        {{-- Ranking Overview --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- others body --}}
                <div class="tab-pane fade" id="others" role="tabpanel" aria-labelledby="pills-others-tab">
                    <div class="card"><div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="form-group col-12">
                                                <x-forms.label name="About College" :required="false" />
                                                <textarea id="editor" rows="8" name="aboutCollege" placeholder="{{ __('aboutCollege') }}" class="form-control">{{ old('aboutCollege') }}</textarea>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-12">
                                                <x-forms.label name="About College Placement" :required="false" />
                                                <textarea id="editor2" rows="8" name="aboutCollegePlacement" placeholder="{{ __('aboutCollegePlacement') }}" class="form-control">{{ old('aboutCollegePlacement') }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="form-group col-12">
                                                <x-forms.label name="Page URL" />
                                                <x-forms.input type="text" name="url" placeholder="Page URL" id="url" />
                                                <span class="text-danger"></span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-6">
                                                <x-forms.label name="status" :required="true" />
                                                <select name="status" class="form-control {{ error('status') }}" id="status">
                                                    <option {{ old('status') == '1' ? 'selected' : '' }} value="1">
                                                        {{ __('active') }}</option>
                                                    <option {{ old('status') == '0' ? 'selected' : '' }} value="0">
                                                        {{ __('inactive') }}</option>
                                                </select>
                                            </div>
                                              
                                            <div class="form-group col-6">
                                                <x-forms.label name="country" :required="true" />
                                                <select name="country_id" class="form-control select2bs4 {{ error('country_id') }}"
                                                    id="country_id">
                                                    <option value="" class="d-none">
                                                        {{ __('select_country') }}
                                                    </option>
                                                    @foreach ($countries as $country)
                                                        <option value="{{ $country->id }}" {{ $country->id == old('country_id') ? 'selected' : '' }}>{{ $country->name }}</option>
                                                    @endforeach
                                                </select>
                                                <span class="text-danger countryerror"></span>
                                                <x-forms.error name="country_id" />
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-6">
                                                <x-forms.label name="state" :required="false" />
                                                <select name="state_id" class="form-control select2bs4 {{ error('state_id') }}"
                                                    id="state_id">
                                                    <option value="" class="d-none">
                                                        {{ __('select_state') }}
                                                    </option>
                                                    {{-- @foreach ($states as $state)
                                                        <option {{ $state->id  == old('state_id') ? 'selected' : '' }}
                                                            value="{{ $state->id }}" {{ $state->id == $find_state_id ? 'selected' : '' }}>
                                                            {{ $state->name }}
                                                        </option>
                                                    @endforeach --}}
                                                </select>
                                                <x-forms.error name="state_id" />
                                            </div>
                                            <div class="form-group col-6">
                                                <x-forms.label name="city" :required="true" />
                                                <select name="city_id" class="form-control select2bs4 {{ error('city_id') }}" id="city_id">
                                                    <option value="" class="d-none">
                                                        {{ __('select_city') }}
                                                    </option>
                                                    {{-- @foreach ($citys as $city)
                                                    
                                                        <option {{ $city->id  == old('city_id') ? 'selected' : '' }}
                                                            value="{{ $city->id }}" {{ $city->id == $universities->city_id ? 'selected' : '' }}>
                                                            {{ $city->name }}
                                                        </option>
                                                    @endforeach --}}
                                                </select>
                                                <span class="text-danger cityerror"></span>
                                                <x-forms.error name="city_id" />
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-12">
                                                <x-forms.label name="City Overview" :required="false" />
                                                <textarea id="city_overview" rows="8" name="city_overview" placeholder="Overview" class="form-control">{{ old('city_overview') }}</textarea>
                                            </div>
                                        </div> 
                                        <div class="row">
                                            <div class="form-group col-6">
                                                <x-forms.label name="City Accommodation" :required="false" />
                                                <x-forms.input type="text" name="city_accmmidation" placeholder="Accommodation (eg:5.6 L)" value="{{ old('city_accmmidation') }}" />
                                            </div>    
                                            <div class="form-group col-6">
                                                <x-forms.label name="City Meals" :required="false" />
                                                <x-forms.input type="text" name="city_meals" placeholder="Meals (eg:2.2 L)" value="{{ old('city_meals') }}" />
                                            </div>                     
                                        </div>   
                                        <div class="row">
                                            <div class="form-group col-6">
                                                <x-forms.label name="City Earnings" :required="false" />
                                                <x-forms.input type="text" name="city_earings" placeholder="Earnings (eg:5.6 L)" value="{{ old('city_earings') }}" />
                                            </div>    
                                            <div class="form-group col-6">
                                                <x-forms.label name="City Local Travel" :required="false" />
                                                <x-forms.input type="text" name="city_local_travel" placeholder="Local Travel (eg:2.2 L)" value="{{ old('city_local_travel') }}" />
                                            </div>                     
                                        </div>   
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div></div>
                </div>
                {{-- metaTags body --}}
                <div class="tab-pane fade" id="metaTags" role="tabpanel" aria-labelledby="pills-metaTags-tab">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <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" placeholder="Enter meta Title" />
                                            <span class="text-danger"></span>
                                            {{-- <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') == 'noindex, nofollow' ? 'selected' : '' }}
                                                value="noindex, nofollow">noindex, nofollow</option>
                                                <option {{ old('robots') == 'nofollow, index' ? 'selected' : '' }}
                                                value="nofollow, index">nofollow, index</option>
                                                <option {{ old('robots') == 'noindex, follow' ? 'selected' : '' }}
                                                    value="noindex, follow">noindex, follow</option>
                                                    <option {{ old('robots') == 'index, follow' ? 'selected' : '' }}
                                                    value="index, follow">index, follow</option>
                                            </select>
                                            <span class="text-danger"></span>
                                    </div>
                                    </div>

                                    
                                    
                                    <div class="form-group">
                                        <x-forms.label name="Meta keywords" :required="false" />
                                        <x-forms.input type="text" name="meta_keywords" placeholder="Enter meta keywords" />
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-12">
                                            <x-forms.label name="Meta Description" :required="true" />
                                            <textarea type="text" class="form-control" rows="18" name="meta_description" id="meta_description" placeholder="Enter meta Description">{{ old('meta_description') }}</textarea>
                                            <span class="text-danger"></span>
                                            <x-forms.error name="meta_description" />
                                            @error('meta_description')
                                                <span class="text-red">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- publish body --}}
                <div class="tab-pane fade" id="publish" role="tabpanel" aria-labelledby="pills-publish-tab">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="form-group col-6">
                                            <x-forms.label name="Display Date" :required="false" />
                                            <input type="date" class="form-control @error('display_date') is-invalid @enderror"
                                            value="{{ old('display_date') }}"
                                            name="display_date" placeholder="Display Date">
                                        </div>
                                        <div class="form-group col-6">
                                            <x-forms.label name="Sorting" :required="false" />
                                                <input type="number" class="form-control" name="sorting" placeholder="Enter Sorting" value="{{ old('sorting') }}" />
                                        </div>
                                        {{-- <div class="form-group col-6">
                                            <x-forms.label name="Created Date" :required="false" />
                                            <input type="date" class="form-control @error('created_at') is-invalid @enderror"
                                            value="{{ old('created_at') }}"
                                            name="created_at" placeholder="Display Date">
                                        </div> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                 {{-- FAQ Body --}}
                <div class="tab-pane fade" id="faq" role="tabpanel" aria-labelledby="pills-faq-tab">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-6">
                                            <strong class="">FAQ Description</strong>
                                            <textarea class="form-control mt-2" placeholder="FAQ Descriptions" name="faq_desc" id="faq_desc" cols="30" rows="5"></textarea>                                                           
                                         </div>                                
                                <div class="col-6">                              
                                            <strong class="">Find Your Dream University Description</strong>
                                            <textarea class="form-control mt-2" name="faq_dream_university_desc" id="faq_dream_university_desc" cols="30" rows="5"></textarea>                                 
                                        </div>
                            </div>
                    </div>
                </div>
                </div>
                
            </div>
            {{-- tabs content start --}}

            {{-- <div class="col-6">
                <div class="card">
                    <div class="card-header">
                        {{ __('location') }}
                        <span class="text-red font-weight-bold">*</span>
                        <small class="h6">
                            ({{ __('click_to_add_a_pointer') }})
                        </small>
                    </div>
                    <div class="card-body">
                        <x-website.map.map-warning/>
                        @php
                            $map = setting('default_map');
                        @endphp
                        <div class="map mymap {{ $map == 'map-box' ? '' : 'd-none' }}" id='map-box'>
                        </div>
                        <div id="google-map-div" class="{{ $map == 'google-map' ? '' : 'd-none' }}">
                            <input id="searchInput" class="mapClass" type="text" placeholder="Enter a location">
                            <div class="map mymap" id="google-map"></div>
                        </div>
                        <div class="{{ $map == 'leaflet' ? '' : 'd-none' }}">
                            <input type="text" autocomplete="off" id="leaflet_search" placeholder="{{ __('enter_city_name') }}" class="form-control"/> <br>
                            <div id="leaflet-map"></div>
                        </div>
                        @error('location')
                            <span class="ml-3 text-md text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="form-group col-6">
                                <x-forms.label name="Students" :required="false"/>
                                <x-forms.input type="number" name="students" placeholder="Enter Students" value="{{ old('students') }}"/>
                            </div>
                            <div class="form-group col-6">
                                <x-forms.label name="Reviews" :required="false" />
                                <x-forms.input type="number" name="reviews" placeholder="Enter Reviews" value="{{ old('reviews') }}"/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-6">
                                <x-forms.label name="Recruiters" :required="false"/>
                                <x-forms.input type="number" name="recruiters" placeholder="Enter Recruiters" value="{{ old('recruiters') }}"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div> --}}
            {{-- <div class="col-6">
                <div class="card">
                    <div class="card-header">
                        {{ __('media_details') }}
                    </div>
                    <div class="card-body">
                        <div id="multiple_feature_part">
                            <div class="row justify-content-center">
                                <div class="form-group col-md-4">
                                    <select class="form-control @error('social_media') border-danger @enderror"
                                        name="social_media[]">
                                        <option value="" class="d-none" disabled>{{ __('select_one') }}
                                        </option>
                                            <option {{ old('social_media') == 'facebook' ? 'selected' : '' }}
                                            value="facebook">{{ __('facebook') }}</option>
                                        <option {{ old('social_media') == 'twitter' ? 'selected' : '' }}
                                            value="twitter">{{ __('twitter') }}</option>
                                        <option {{ old('social_media') == 'instagram' ? 'selected' : '' }}
                                            value="instagram">{{ __('instagram') }}
                                        </option>
                                        <option {{ old('social_media') == 'youtube' ? 'selected' : '' }}
                                            value="youtube">{{ __('youtube') }}</option>
                                        <option {{ old('social_media') == 'linkedin' ? 'selected' : '' }}
                                            value="linkedin">{{ __('linkedin') }}</option>
                                        <option {{ old('social_media') == 'pinterest' ? 'selected' : '' }}
                                            value="pinterest">{{ __('pinterest') }}
                                        </option>
                                        <option {{ old('social_media') == 'reddit' ? 'selected' : '' }}
                                            value="reddit">{{ __('reddit') }}</option>
                                        <option {{ old('social_media') == 'github' ? 'selected' : '' }}
                                            value="github">{{ __('github') }}</option>
                                        <option {{ old('social_media') == 'other' ? 'selected' : '' }} value="other">
                                            {{ __('other') }}</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <input >
                                    <x-forms.input type="url" name="videos[]" class="form-control" />
                                    <div class="form-group col-md-6">
                                    <input type="url" name="videos[]" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group col-md-2">
                                    <a role="button" onclick="add_features_field()"
                                        class="btn bg-primary text-light"><i class="fas fa-plus"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> --}}
            {{-- <div class="row">
                <div class="form-group col-6">
                    <x-forms.label name="organization_type" />
                    <select name="organization_type_id"
                        class="form-control select2bs4 {{ error('organization_type_id') }}"
                        id="organization_type_id">
                        <option value="" class="d-none">
                            {{ __('select_one') }}
                        </option>
                        @foreach ($organization_types as $type)
                            <option {{ $type->id == old('organization_type_id') ? 'selected' : '' }}
                                value="{{ $type->id }}">
                                {{ $type->name }}
                            </option>
                        @endforeach
                    </select>
                    <x-forms.error name="organization_type_id" />
                </div>
                <div class="form-group col-6">
                    <x-forms.label name="industry_type" />
                    <select name="industry_type_id"
                        class="form-control select2bs4 {{ error('industry_type_id') }}"
                        id="organization_type_id">
                        <option value="" class="d-none">
                            {{ __('select_one') }}
                        </option>
                        @foreach ($industry_types as $type)
                            <option {{ $type->id == old('industry_type_id') ? 'selected' : '' }}
                                value="{{ $type->id }}">
                                {{ $type->name }}
                            </option>
                        @endforeach
                    </select>
                    <x-forms.error name="industry_type_id" />
                </div>
                <div class="form-group col-6">
                    <x-forms.label name="team_size" :required="false"/>
                    <select name="team_size_id"
                        class="form-control select2bs4 {{ error('team_size_id') }}"
                        id="organization_type_id">
                        <option value="" class="d-none">
                            {{ __('select_one') }}
                        </option>
                        @foreach ($team_sizes as $size)
                            <option {{ $size->id == old('team_size_id') ? 'selected' : '' }}
                                value="{{ $size->id }}">
                                {{ $size->name }}
                            </option>
                        @endforeach
                    </select>
                    <x-forms.error name="team_size_id" />
                </div>
            </div>
            <div class="row">
                <div class="form-group datepicker col-4">
                    <x-forms.label name="establishment_date" :required="false" />
                    <x-forms.input type="text" name="establishment_date" placeholder="select_one"
                        id="establishment_date" />
                    <x-forms.error name="establishment_date" />
                </div>
            </div> --}}
        </form>
    </div>
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/dropify/css/dropify.min.css">

    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="{{ asset('frontend') }}/secondary-theme/assets/css/bootstrap-datepicker.min.css">
    <style>
        .ck-editor__editable_inline {
            min-height: 400px;
        }

        .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;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff;
        }
    </style>
    <!-- >=>Leaflet Map<=< -->
    <x-map.leaflet.map_links />
    <x-map.leaflet.autocomplete_links />
    <!-- >=>Mapbox<=< -->
    @include('map::links')
    <!-- >=>Mapbox<=< -->
@endsection

@section('script')
    <script src="{{ asset('frontend/secondary-theme/assets/js/bootstrap-datepicker.min.js')}}"></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('backend') }}/js/universityFormValidation.js"></script>

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

        //Initialize Select2 Elements
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })

        ClassicEditor
            .create(document.querySelector('#editor'))
            .catch(error => {
                console.error(error);
            });
        ClassicEditor
            .create(document.querySelector('#editor2'))
            .catch(error => {
                console.error(error);
            });
        ClassicEditor
            .create(document.querySelector('#editor3'))
            .catch(error => {
                console.error(error);
            });
        ClassicEditor
            .create(document.querySelector('#editor4'))
            .catch(error => {
                console.error(error);
            });
        ClassicEditor
            .create(document.querySelector('#editor5'))
            .catch(error => {
                console.error(error);
            });
        ClassicEditor
            .create(document.querySelector('#editor6'))
            .catch(error => {
                console.error(error);
            });
        ClassicEditor
            .create(document.querySelector('#editor7'))
            .catch(error => {
                console.error(error);
            });
        ClassicEditor
            .create(document.querySelector('#editor8'))
            .catch(error => {
                console.error(error);
            });
        ClassicEditor
            .create(document.querySelector('#editor9'))
            .catch(error => {
                console.error(error);
            });
        ClassicEditor
            .create(document.querySelector('#editor10'))
            .catch(error => {
                console.error(error);
            });

        //init datepicker
        $(document).ready(function() {
            $('#establishment_date').datepicker({
                format: 'dd-mm-yyyy'
            });
        });

        $(document).on("click", "#remove_item", function() {
            $(this).parent().parent('div').remove();
        });
        $(document).on("click", "#remove_item_links", function() {
            $(this).parent().parent('div').remove();
        });
        $('#country_id').on('change', function() {
            var country_id = this.value;
            $.ajax({
                url: "{{ route('admin.universityGetStateByCountry') }}",
                type: "POST",
                data: {
                    country_id: country_id,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(result) {
                    $('#state_id').html(
                            '<option value="">{{ __('select_one') }}</option>')
                        .removeAttr(
                            'disabled');
                    $.each(result.states, function(key, value) {
                        $("#state_id").append('<option value="' +
                            value.id + '">' + value.name +
                            '</option>');
                    });
                }
            });
        });
        $('#state_id').on('change', function() {
            var state_id = this.value;
            $.ajax({
                url: "{{ route('admin.universityGetCityByCountry') }}",
                type: "POST",
                data: {
                    state_id: state_id,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(result) {
                    $('#city_id').html(
                            '<option value="">{{ __('select_one') }}</option>')
                        .removeAttr(
                            'disabled');
                    $.each(result.cities, function(key, value) {
                        $("#city_id").append('<option value="' +
                            value.id + '">' + value.name +
                            '</option>');
                    });
                }
            });

        });

        var currentIndex = 1;

        function addRow() {
            var mainInput = $('.addMain')[0];
            var main = mainInput.files[0];
            var preferred = $('.addPrefer').val();
            var common = $('.addCommon').val();
            var reader = new FileReader();
            reader.onload = function(e) {
                var mainUrl = e.target.result;
                $(formatRows(mainUrl, preferred, common, currentIndex)).insertAfter('#addRow');
                $('.addMain').val(''); // Clear the input field
                $('.addPrefer').val(''); // Clear the input field
                $('.addCommon').val(''); // Clear the input field
                currentIndex++;
            }

            if (main) {
                reader.readAsDataURL(main);
            }
        }
        var count = 1;
        $('.addBtn').click(function() {
            var newRow = '<tr>'+
                         
                '<td class="col-xs-2">' +
                '<div class="form-check">'+
                '<input class="form-check-input overview-img" type="checkbox" id="overview_img" name="newImgs['+count+'][overview]" value="1">'+'Overview' +
                '<label class="form-check-label"></label>'+
                '</div>' +
                '<div class="form-check">' +
                '<input class="form-check-input study-img"  onchange="studyImgCheck(event)" type="radio" id="study_img" name="newImgs['+count+'][study]]" value="1">' + 'Study' +
                '</div>' +
                '<div class="form-check">' + 
                '<input class="form-check-input university-img" type="checkbox" id="university_img" name="newImgs['+count+'][university]" value="1">' + 'University' +
                '</div>' +
                '<td class ="col-xs-2">' +
                '<input class="form-control addMain" type="file" name="newImgs[' + count +
                '][mediaUrl]" class="form-control" placeholder="{{ __('url') }}" />' +
                '</td>' +
                '<td class="col-xs-2">' +
                '<input class="form-control addPrefer" type="text" name="newImgs[' + count +
                '][mediaTitles]" placeholder="Media Title" />' +
                '</td>' +
                '<td class="col-xs-2">' +
                '<input class="form-control addCommon" type="text" name="newImgs[' + count +
                '][altTexts]" placeholder="Alt Text" />' +
                '</td>' +
                '<td class="col-xs-1 text-center">' +
                '<a href="#" onClick="deleteRow(this, ' + count + ')">' +
                '<i class="fas fa-times"></i>' +
                '</a>' +
                '</td>' +
                '</tr>';
            count++;
            $('#addRow').after(newRow);
        });

             // if You dbl click on radio button then button will be unchecked
     $(document).ready(function(){
        $(".study-img").dblclick(function(event){
            // alert();
        $(this).prop('checked', false); // Uncheck the double-clicked radio button
        });
    });

//  four image validation of overview img
$(document).ready(function() {
    var overviewCheckboxes = $('.overview-img');
    $(document).on('change', '.overview-img', function() {
        var checkedCheckboxes = $('.overview-img:checked');

        if (checkedCheckboxes.length > 4) {
            $(this).prop('checked', false); 
            $(this).prop('checked', false); 
            Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: 'You can select only Four image for the Overview Panel!',
        });
            
        }
    });
});


//  four image validation of university img
$(document).ready(function() {
    var universityCheckboxes = $('.university-img');

    $(document).on('change', '.university-img', function() {
        var checkedCheckboxes = $('.university-img:checked');

        if (checkedCheckboxes.length > 4) {
            $(this).prop('checked', false); 
            Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: 'You can select only Four image for the University Panel!',
        });
        }
    });
});







        function deleteRow(element, rowNumber) {
            $(element).closest('tr').remove();
            count--; // Decrement the count variable

            // Adjust the name attribute of the remaining rows
            $('input[name^="img"]').each(function() {
                var nameAttr = $(this).attr('name');
                var regex = /\[(\d+)\]/;
                var match = regex.exec(nameAttr);
                if (match && parseInt(match[1]) > rowNumber) {
                    var updatedRowNumber = parseInt(match[1]) - 1;
                    var updatedNameAttr = nameAttr.replace(regex, '[' + updatedRowNumber + ']');
                    $(this).attr('name', updatedNameAttr);
                }
            });
        };

        //     // reader.readAsDataURL(main);
        //     $('table').on('click', '.addBtn', function() {
        //     var icon = $(this).find('i');

        //     if (icon.hasClass('fa-plus')) {
        //         var newRow = $('#addRow').clone(); // Clone the row with id "addRow"
        //         newRow.find('.addBtn i').removeClass('fa-plus').addClass('fa-times'); // Change the icon class
        //         newRow.find('input').val(''); // Clear the input values in the cloned row
        //         $('table').append(newRow); // Append the cloned row to the table
        //     } else if (icon.hasClass('fa-times')) {
        //         $(this).closest('tr').remove(); // Remove the closest row when "fa-times" icon is clicked
        //     }

        //     var formData = {}; // Object to store the form data
        //     $('input').each(function(index, element) {
        //         var inputName = $(element).attr('name');
        //         var inputValue = $(element).val();
        //         formData[inputName] = inputValue;
        //     });
        // });

        function add_features_field() {
            $("#multiple_feature_part").append(`
            <div class="row justify-content-center">
                <div class="form-group col-md-4">
                    <select class="form-control @error('social_media') border-danger @enderror"
                        name="social_media[]">
                        <option value="" class="d-none" disabled>{{ __('select_one') }}
                        </option>
                        <option {{ old('social_media') == 'youtube' ? 'selected' : '' }}
                            value="youtube">{{ __('youtube') }}</option>
                    </select>
                </div>
                <div class="form-group col-md-6">
                    <input type="url" name="videos[]" class="form-control">
                </div>
                <div class="form-group col-md-2">
                    <a role="button" id="remove_item"
                        class="btn bg-danger text-light"><i class="fas fa-times"></i></a>
                </div>
            </div>
            `);
        }

        function add_features_field_off_campus_links() {
            $("#multiple_feature_part_off_campus_links").append(`
            <div class="row">
                <div class="form-group col-md-6">
                    <x-forms.label name="Links" :required="false" />
                    <x-forms.input type="text" name="off_campus_accommodation_links[]" placeholder="Links" />
                </div>
                <div class="form-group col-md-3">
                    <x-forms.label class="mb-4" name=" " :required="false" /><br/>
                    <a role="button" id="remove_item_links"
                        class="btn bg-danger text-light"><i class="fas fa-times"></i></a>
                </div>
            </div>
            `);
        }

        // form validation 
        // function validateForm(event) {
        //     event.preventDefault();

        //     // Reset any previous error messages
        //     $('.text-danger').text('');

        //     var inputIds = ['name', 'email', 'logo', 'website', 'img', 'videos','url', 'country_id', 'city_id', 'meta_title', 'meta_description'];
        //     var isValid = true;

        //     var firstEmptyField = '';

        //     for (var i = 0; i < inputIds.length; i++) {
        //         var id = inputIds[i];
        //         var input = $('#' + id);
        //         if (input.is('select')) { 
        //             if (input.val() === null || input.val() === '') {
        //                 isValid = false;
        //                 if (firstEmptyField === '') {
        //                     firstEmptyField = id;
        //                     $('#' + id).focus(); 
        //                 }
        //                 $('#' + id).addClass('border-red'); 
        //                 if (id === 'country_id') {
        //                     $('.countryerror').text('Please select a country'); 
        //                 } else {
        //                     $('#' + id).next('.text-danger').text('Please select an option for ' + id); 
        //                 }
        //                 if (id === 'city_id') {
        //                     $('.cityerror').text('Please select a city');
        //                 } else {
        //                     $('#' + id).next('.text-danger').text('Please select an option for ' + id); 
        //                 }
        //             } else {
        //                 $('#' + id).removeClass('border-red');
        //                 $('#' + id).next('.text-danger').empty();
        //             }
        //         } else if (input.attr('type') === 'file') {
        //             if (input[0].files.length === 0) {
        //                 isValid = false;
        //                 if (firstEmptyField === '') {
        //                     firstEmptyField = id;
        //                     $('#' + id).focus();
        //                 }
        //                 $('#' + id).next('.text-danger').text('Please upload a file for ' + id);
        //             } else {
        //                 $('#' + id).next('.text-danger').empty();
        //             }
        //             if (id === 'logo') {
        //                     $('.logoerror').text('Please upload a file for ' + id);
        //                 }
        //             if (id === 'image') {
        //                     $('.imageerror').text('Please upload a file for ' + id);
        //                 }
        //         } else {
        //             if (input.val().trim() === '') {
        //                 isValid = false;
        //                 if (firstEmptyField === '') {
        //                     firstEmptyField = id;
        //                     $('#' + id).focus();
        //                 }
        //                 $('#' + id).next('.text-danger').text('Please enter a ' + id);
        //             } else {
        //                 $('#' + id).next('.text-danger').empty();
        //             }
        //         }
        //     }

        //     if (firstEmptyField !== '') {
        //         var tabId = $('#' + firstEmptyField).closest('.tab-pane').attr('id'); // Get the parent tab's ID of the first empty field
        //         $('a[href="#' + tabId + '"]').tab('show'); // Switch to the tab with the first empty field
        //     }
        //     if (isValid) {
        //         event.target.submit();
        //     }
        // }
        
    </script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    {{-- Leaflet  --}}
    @include('map::set-leafletmap')
    @include('map::set-googlemap')
    @include('map::set-mapbox')
@endsection