@extends('dashboard.admin.layouts.master')

@php
    $social = old('social_links', $mdata->social_links ?? []);
    $branches = old('branches', $mdata->branches ?? []);
    $otherLinks = $social['other'] ?? [];
    $socialPlatforms = ['facebook', 'instagram', 'linkedin', 'twitter', 'youtube', 'tiktok', 'snapchat'];
    $socialIcons = ['facebook' => 'bi-facebook', 'instagram' => 'bi-instagram', 'linkedin' => 'bi-linkedin', 'twitter' => 'bi-twitter-x', 'youtube' => 'bi-youtube', 'tiktok' => 'bi-tiktok', 'snapchat' => 'bi-snapchat'];
    $primaryBranch = $branches[0] ?? [];
    $fallbackEmail = $mdata?->email ?: ($primaryBranch['email'] ?? '');
    $fallbackPhone = $mdata?->phone ?: ($primaryBranch['phone'] ?? '');
    $fallbackAddressAr = $mdata?->getTranslation('address', 'ar', false) ?: ($primaryBranch['address'] ?? '');
    $fallbackAddressEn = $mdata?->getTranslation('address', 'en', false) ?: ($primaryBranch['address'] ?? '');
    $fallbackMapLocation = $mdata?->maplocation ?: ($primaryBranch['location_map'] ?? '');
    $visitingHours = old('visiting_hours', $mdata->visiting_hours ?? []);
    $days = \App\Models\Site\SiteData::DAYS;

    // Open the tab that holds the first server-side error, so it is not hidden behind another tab.
    $tabFields = [
        'contact' => ['email', 'phone', 'fax', 'address', 'maplocation', 'branches'],
        'social' => array_merge($socialPlatforms, ['social_links']),
        'hours' => ['visiting_hours'],
        'video' => ['video', 'remove_video_file'],
        'seo' => ['seo_', 'contact_seo_'],
    ];
    $activeTab = 'general';
    foreach ($errors->keys() as $errorKey) {
        foreach ($tabFields as $tab => $prefixes) {
            foreach ($prefixes as $prefix) {
                if (str_starts_with($errorKey, $prefix)) {
                    $activeTab = $tab;
                    break 3;
                }
            }
        }
        break;
    }
@endphp

@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">{{ trans('dash_site.site_data') }}</h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted"><a href="{{ route('admin.dashboard') }}" class="text-muted text-hover-primary">{{ trans('dash_site.home') }}</a></li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted">{{ trans('dash_site.maindata') }}</li>
            </ul>
        </div>
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxxl">
        @if ($errors->any())
            <div class="alert alert-danger"><ul class="mb-0">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
        @endif

        <form method="POST" action="{{ route('admin.mdata.store') }}" class="form" id="mainDataForm" enctype="multipart/form-data">
            @csrf

            <div class="card">
                <div class="card-header card-header-stretch">
                    <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold" role="tablist">
                        @foreach ([
                            'general' => ['bi-info-circle', trans('dash_site.tab_general')],
                            'contact' => ['bi-telephone', trans('dash_site.tab_contact')],
                            'social' => ['bi-share', trans('dash_site.tab_social')],
                            'hours' => ['bi-clock', trans('dash_site.visiting_hours')],
                            'video' => ['bi-camera-video', trans('dash_site.tab_video')],
                            'seo' => ['bi-search', trans('dash_site.tab_seo')],
                        ] as $tab => [$icon, $label])
                            <li class="nav-item" role="presentation">
                                <a class="nav-link text-active-primary py-5 me-6 {{ $activeTab === $tab ? 'active' : '' }}" data-bs-toggle="tab" href="#mdata_tab_{{ $tab }}" role="tab">
                                    <i class="bi {{ $icon }} fs-4 me-2"></i>{{ $label }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <div class="card-body">
                    <div class="tab-content">

                        {{-- General --}}
                        <div class="tab-pane fade {{ $activeTab === 'general' ? 'show active' : '' }}" id="mdata_tab_general" role="tabpanel">
                            <div class="row g-5">
                                <div class="col-md-6">
                                    <label class="required form-label">{{ trans('dash_site.name') }} (AR)</label>
                                    <input type="text" name="name[ar]" value="{{ old('name.ar', $mdata?->getTranslation('name', 'ar', false) ?? '') }}" class="form-control @error('name.ar') is-invalid @enderror">
                                    @error('name.ar')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="required form-label">{{ trans('dash_site.name') }} (EN)</label>
                                    <input type="text" name="name[en]" value="{{ old('name.en', $mdata?->getTranslation('name', 'en', false) ?? '') }}" class="form-control @error('name.en') is-invalid @enderror">
                                    @error('name.en')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">{{ trans('dash_site.short_description') }} (AR)</label>
                                    <textarea name="short_description[ar]" class="form-control @error('short_description.ar') is-invalid @enderror" rows="5">{{ old('short_description.ar', $mdata?->getTranslation('short_description', 'ar', false) ?: $mdata?->getTranslation('short_about', 'ar', false)) }}</textarea>
                                    @error('short_description.ar')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">{{ trans('dash_site.short_description') }} (EN)</label>
                                    <textarea name="short_description[en]" class="form-control @error('short_description.en') is-invalid @enderror" rows="5">{{ old('short_description.en', $mdata?->getTranslation('short_description', 'en', false) ?: $mdata?->getTranslation('short_about', 'en', false)) }}</textarea>
                                    @error('short_description.en')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>

                            <div class="separator my-8"></div>

                            <div class="row g-5">
                                <div class="col-md-6 col-xl-3">
                                    <label class="form-label d-block">{{ trans('dash_site.main_logo') }}</label>
                                    @include('dashboard.admin.Site.partials.image-input', [
                                        'name' => 'main_logo',
                                        'id' => 'site_main_logo',
                                        'preview' => $mdata?->main_logo_path ?? asset('assets/media/svg/files/blank-image.svg'),
                                    ])
                                    @error('main_logo')<div class="text-danger fs-7">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6 col-xl-3">
                                    <label class="form-label d-block">{{ trans('dash_site.footer_logo') }}</label>
                                    @include('dashboard.admin.Site.partials.image-input', [
                                        'name' => 'footer_logo',
                                        'id' => 'site_footer_logo',
                                        'preview' => $mdata?->logo_footer_path ?? asset('assets/media/svg/files/blank-image.svg'),
                                    ])
                                    @error('footer_logo')<div class="text-danger fs-7">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-12 col-xl-6">
                                    <label class="form-label">{{ trans('dash_site.profile_pdf') }}</label>
                                    <input type="file" name="profile_pdf" class="form-control @error('profile_pdf') is-invalid @enderror" accept=".pdf">
                                    @error('profile_pdf')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    @if (!empty($mdata?->profile_pdf_url))
                                        <div class="mt-3">
                                            <a href="{{ $mdata->profile_pdf_url }}" target="_blank" rel="noopener"><i class="bi bi-file-earmark-pdf me-1"></i>{{ trans('dash_site.profile_pdf') }}</a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        {{-- Contact --}}
                        <div class="tab-pane fade {{ $activeTab === 'contact' ? 'show active' : '' }}" id="mdata_tab_contact" role="tabpanel">
                            <div class="row g-5">
                                <div class="col-md-4">
                                    <label class="form-label">{{ trans('dash_site.email') }}</label>
                                    <input type="email" name="email" value="{{ old('email', $fallbackEmail) }}" class="form-control @error('email') is-invalid @enderror">
                                    @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">{{ trans('dash_site.phone') }}</label>
                                    <input type="text" name="phone" value="{{ old('phone', $fallbackPhone) }}" class="form-control @error('phone') is-invalid @enderror">
                                    @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">{{ trans('dash_site.fax') }}</label>
                                    <input type="text" name="fax" value="{{ old('fax', $mdata?->fax) }}" class="form-control @error('fax') is-invalid @enderror">
                                    @error('fax')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">{{ trans('dash_site.address') }} (AR)</label>
                                    <input type="text" name="address[ar]" value="{{ old('address.ar', $fallbackAddressAr) }}" class="form-control @error('address.ar') is-invalid @enderror">
                                    @error('address.ar')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">{{ trans('dash_site.address') }} (EN)</label>
                                    <input type="text" name="address[en]" value="{{ old('address.en', $fallbackAddressEn) }}" class="form-control @error('address.en') is-invalid @enderror">
                                    @error('address.en')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label">{{ trans('dash_site.maplocation') }}</label>
                                    <textarea name="maplocation" class="form-control @error('maplocation') is-invalid @enderror" rows="4">{{ old('maplocation', $fallbackMapLocation) }}</textarea>
                                    @error('maplocation')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>

                            <div class="separator my-8"></div>

                            <div id="branches-repeater">
                                <h3 class="fw-bold mb-5">{{ trans('dash_site.branches') }}</h3>
                                <div data-repeater-list="branches">
                                    @foreach(count($branches) ? $branches : [[]] as $branch)
                                        <div data-repeater-item class="border border-dashed rounded p-5 mb-5">
                                            <div class="row g-4 align-items-end">
                                                <div class="col-md-6 col-xl-3"><label class="form-label">{{ trans('dash_site.address') }}</label><input type="text" name="address" value="{{ $branch['address'] ?? '' }}" class="form-control"></div>
                                                <div class="col-md-6 col-xl-2"><label class="form-label">{{ trans('dash_site.phone') }}</label><input type="text" name="phone" value="{{ $branch['phone'] ?? '' }}" class="form-control"></div>
                                                <div class="col-md-6 col-xl-3"><label class="form-label">{{ trans('dash_site.email') }}</label><input type="email" name="email" value="{{ $branch['email'] ?? '' }}" class="form-control"></div>
                                                <div class="col-md-5 col-xl-3"><label class="form-label">{{ trans('dash_site.location_map') }}</label><input type="text" name="location_map" value="{{ $branch['location_map'] ?? '' }}" class="form-control"></div>
                                                <div class="col-md-1 col-xl-1 text-end"><button type="button" data-repeater-delete class="btn btn-icon btn-light-danger" title="{{ trans('forms.delete_btn') }}"><i class="bi bi-trash"></i></button></div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <button type="button" data-repeater-create class="btn btn-light-primary"><i class="bi bi-plus-lg"></i>{{ trans('dash_site.add_branch') }}</button>
                            </div>
                        </div>

                        {{-- Social --}}
                        <div class="tab-pane fade {{ $activeTab === 'social' ? 'show active' : '' }}" id="mdata_tab_social" role="tabpanel">
                            <div class="row g-5">
                                @foreach($socialPlatforms as $platform)
                                    <div class="col-md-6">
                                        <label class="form-label">{{ trans('dash_site.' . $platform) }}</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bi {{ $socialIcons[$platform] }} fs-4"></i></span>
                                            <input type="url" name="{{ $platform }}" value="{{ old($platform, $mdata?->{$platform} ?? ($social[$platform] ?? '')) }}" class="form-control @error($platform) is-invalid @enderror" placeholder="https://">
                                        </div>
                                        @error($platform)<div class="text-danger fs-7 mt-1">{{ $message }}</div>@enderror
                                    </div>
                                @endforeach
                            </div>

                            <div class="separator my-8"></div>

                            <div id="other-links-repeater">
                                <h3 class="fw-bold mb-5">{{ trans('dash_site.other_links') }}</h3>
                                <div data-repeater-list="social_links[other]">
                                    @foreach(count($otherLinks) ? $otherLinks : [[]] as $link)
                                        <div data-repeater-item class="row g-4 align-items-end mb-5">
                                            <div class="col-md-4"><label class="form-label">{{ trans('dash_site.name') }}</label><input type="text" name="label" value="{{ $link['label'] ?? '' }}" class="form-control"></div>
                                            <div class="col-md-7"><label class="form-label">{{ trans('dash_site.link') }}</label><input type="url" name="url" value="{{ $link['url'] ?? '' }}" class="form-control" placeholder="https://"></div>
                                            <div class="col-md-1 text-end"><button type="button" data-repeater-delete class="btn btn-icon btn-light-danger" title="{{ trans('forms.delete_btn') }}"><i class="bi bi-trash"></i></button></div>
                                        </div>
                                    @endforeach
                                </div>
                                <button type="button" data-repeater-create class="btn btn-light-primary"><i class="bi bi-plus-lg"></i>{{ trans('dash_site.add_link') }}</button>
                            </div>
                        </div>

                        {{-- Visiting hours --}}
                        <div class="tab-pane fade {{ $activeTab === 'hours' ? 'show active' : '' }}" id="mdata_tab_hours" role="tabpanel">
                            <div class="notice d-flex bg-light-primary rounded border-primary border border-dashed p-5 mb-8">
                                <i class="bi bi-info-circle fs-2 text-primary me-4"></i>
                                <div class="fs-6 text-gray-700">{{ trans('dash_site.visiting_hours_hint') }}</div>
                            </div>

                            <div id="visiting-hours-repeater">
                                <div data-repeater-list="visiting_hours">
                                    @foreach(count($visitingHours) ? array_values($visitingHours) : [[]] as $i => $row)
                                        <div data-repeater-item class="row g-4 align-items-start mb-5">
                                            <div class="col-md-3">
                                                <label class="required form-label">{{ trans('dash_site.day_from') }}</label>
                                                <select name="day_from" class="form-select @error("visiting_hours.$i.day_from") is-invalid @enderror">
                                                    <option value="">{{ trans('dash_site.choose_day') }}</option>
                                                    @foreach($days as $day)
                                                        <option value="{{ $day }}" @selected(($row['day_from'] ?? '') === $day)>{{ trans('site.days.' . $day) }}</option>
                                                    @endforeach
                                                </select>
                                                @error("visiting_hours.$i.day_from")<div class="invalid-feedback">{{ $message }}</div>@enderror
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label">{{ trans('dash_site.day_to') }}</label>
                                                <select name="day_to" class="form-select @error("visiting_hours.$i.day_to") is-invalid @enderror">
                                                    <option value="">{{ trans('dash_site.single_day') }}</option>
                                                    @foreach($days as $day)
                                                        <option value="{{ $day }}" @selected(($row['day_to'] ?? '') === $day)>{{ trans('site.days.' . $day) }}</option>
                                                    @endforeach
                                                </select>
                                                @error("visiting_hours.$i.day_to")<div class="invalid-feedback">{{ $message }}</div>@enderror
                                            </div>
                                            <div class="col-md-2">
                                                <label class="required form-label">{{ trans('dash_site.time_in') }}</label>
                                                <input type="time" name="time_in" value="{{ substr($row['time_in'] ?? '', 0, 5) }}" class="form-control @error("visiting_hours.$i.time_in") is-invalid @enderror">
                                                @error("visiting_hours.$i.time_in")<div class="invalid-feedback">{{ $message }}</div>@enderror
                                            </div>
                                            <div class="col-md-2">
                                                <label class="required form-label">{{ trans('dash_site.time_out') }}</label>
                                                <input type="time" name="time_out" value="{{ substr($row['time_out'] ?? '', 0, 5) }}" class="form-control @error("visiting_hours.$i.time_out") is-invalid @enderror">
                                                @error("visiting_hours.$i.time_out")<div class="invalid-feedback">{{ $message }}</div>@enderror
                                            </div>
                                            <div class="col-md-2 text-end pt-md-8">
                                                <button type="button" data-repeater-delete class="btn btn-icon btn-light-danger" title="{{ trans('forms.delete_btn') }}"><i class="bi bi-trash"></i></button>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <button type="button" data-repeater-create class="btn btn-light-primary"><i class="bi bi-plus-lg"></i>{{ trans('dash_site.add_hours') }}</button>
                            </div>
                        </div>

                        {{-- Video (home About section) --}}
                        <div class="tab-pane fade {{ $activeTab === 'video' ? 'show active' : '' }}" id="mdata_tab_video" role="tabpanel">
                            <div class="notice d-flex bg-light-primary rounded border-primary border border-dashed p-5 mb-8">
                                <i class="bi bi-info-circle fs-2 text-primary me-4"></i>
                                <div class="fs-6 text-gray-700">{{ trans('dash_site.video_help') }}</div>
                            </div>
                            <div class="row g-8">
                                <div class="col-lg-6">
                                    <label class="form-label">{{ trans('dash_site.video_file') }}</label>
                                    <input type="file" name="video_file" id="video_file" class="form-control @error('video_file') is-invalid @enderror" accept="video/mp4,video/webm">
                                    <div class="form-text">{{ trans('dash_site.video_file_hint') }}</div>
                                    @error('video_file')<div class="invalid-feedback">{{ $message }}</div>@enderror

                                    @if ($mdata?->video_file_url)
                                        <div class="mt-5">
                                            <video src="{{ $mdata->video_file_url }}" class="w-100 rounded border" style="max-height: 260px" controls preload="metadata"></video>
                                            <label class="form-check form-check-custom form-check-solid form-check-danger mt-3">
                                                <input class="form-check-input" type="checkbox" name="remove_video_file" value="1">
                                                <span class="form-check-label text-danger">{{ trans('dash_site.video_remove') }}</span>
                                            </label>
                                        </div>
                                    @endif
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label">{{ trans('dash_site.video_link') }}</label>
                                    <input type="url" name="video" id="video" dir="ltr" placeholder="https://www.youtube.com/watch?v=..." value="{{ old('video', $mdata?->video) }}" class="form-control @error('video') is-invalid @enderror">
                                    <div class="form-text">{{ trans('dash_site.video_link_hint') }}</div>
                                    @error('video')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    @if ($mdata?->video)
                                        <a href="{{ $mdata->video }}" target="_blank" rel="noopener" class="btn btn-sm btn-light-primary mt-4"><i class="bi bi-play-circle"></i>{{ trans('dash_site.video_open_link') }}</a>
                                    @endif
                                </div>
                            </div>
                        </div>

                        {{-- SEO --}}
                        <div class="tab-pane fade {{ $activeTab === 'seo' ? 'show active' : '' }}" id="mdata_tab_seo" role="tabpanel">
                            <div class="row g-5 mb-8">
                                <div class="col-md-4 col-xl-3">
                                    <label class="form-label d-block">{{ trans('dash_site.seo_image') }}</label>
                                    @include('dashboard.admin.Site.partials.image-input', [
                                        'name' => 'seo_image',
                                        'id' => 'site_seo_image',
                                        'preview' => $mdata?->seo_image_path ?? asset('assets_web/img/hero/img1.webp'),
                                    ])
                                    @error('seo_image')<div class="text-danger fs-7">{{ $message }}</div>@enderror
                                </div>
                            </div>

                            @foreach (['' => trans('dash_site.home_seo'), 'contact_' => trans('dash_site.contact_seo')] as $prefix => $heading)
                                <h3 class="fw-bold mb-5">{{ $heading }}</h3>
                                <div class="row g-5 mb-8">
                                    @foreach (['ar', 'en'] as $locale)
                                        <div class="col-md-6">
                                            <label class="form-label">{{ trans('dash_site.seo_title') }} ({{ strtoupper($locale) }})</label>
                                            <input type="text" name="{{ $prefix }}seo_title[{{ $locale }}]" value="{{ old("{$prefix}seo_title.$locale", $mdata?->getTranslation("{$prefix}seo_title", $locale, false) ?? '') }}" class="form-control @error("{$prefix}seo_title.$locale") is-invalid @enderror">
                                            @error("{$prefix}seo_title.$locale")<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                    @endforeach
                                    @foreach (['ar', 'en'] as $locale)
                                        <div class="col-md-6">
                                            <label class="form-label">{{ trans('dash_site.seo_description') }} ({{ strtoupper($locale) }})</label>
                                            <textarea name="{{ $prefix }}seo_description[{{ $locale }}]" class="form-control @error("{$prefix}seo_description.$locale") is-invalid @enderror" rows="3">{{ old("{$prefix}seo_description.$locale", $mdata?->getTranslation("{$prefix}seo_description", $locale, false) ?? '') }}</textarea>
                                            @error("{$prefix}seo_description.$locale")<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                    @endforeach
                                    @foreach (['ar', 'en'] as $locale)
                                        <div class="col-md-6">
                                            <label class="form-label">{{ trans('dash_site.seo_keywords') }} ({{ strtoupper($locale) }})</label>
                                            <input type="text" name="{{ $prefix }}seo_keywords[{{ $locale }}]" value="{{ old("{$prefix}seo_keywords.$locale", $mdata?->getTranslation("{$prefix}seo_keywords", $locale, false) ?? '') }}" class="form-control @error("{$prefix}seo_keywords.$locale") is-invalid @enderror">
                                            @error("{$prefix}seo_keywords.$locale")<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                    @endforeach
                                </div>
                            @endforeach
                        </div>

                    </div>
                </div>

                <div class="card-footer d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary">{{ trans('dash_site.Save') }}</button>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('js')
    <script src="{{ asset('assets/plugins/custom/formrepeater/formrepeater.bundle.js') }}"></script>
    <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>
    {{-- Fields in inactive tabs are display:none, so validate hidden fields too (the default ignores them). --}}
    {!! JsValidator::formRequest('App\Http\Requests\Site\MainRequest', '#mainDataForm')->ignore("[contenteditable='true']") !!}
    <script>
        $(document).ready(function () {
            $('#other-links-repeater, #branches-repeater, #visiting-hours-repeater').repeater({
                initEmpty: false,
                defaultValues: {},
                show: function () {
                    $(this).slideDown();
                },
                hide: function (deleteElement) {
                    $(this).slideUp(deleteElement);
                }
            });

            // A client-side error inside an inactive tab would be invisible, so switch to that tab.
            $('#mainDataForm').on('invalid-form.validate', function (event, validator) {
                var first = validator.errorList.length ? validator.errorList[0].element : null;
                var pane = first ? $(first).closest('.tab-pane') : $();
                if (pane.length && !pane.hasClass('active')) {
                    bootstrap.Tab.getOrCreateInstance(document.querySelector('a[href="#' + pane.attr('id') + '"]')).show();
                }
            });
        });
    </script>
@endsection