@extends('admin.layout')
@section('content')
    @php
    $rtl = App\Language::where('code', App::getLocale())->first()->rtl == true ? 'rtl' : 'ltr';
    // dd($currentTheme->searchFilterStyle);
    @endphp
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="page-title"> {{ translate('Customize theme') }}</h3>
                <div class="d-inline-block align-items-center">
                    <nav>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i
                                        class="mdi mdi-home-outline"></i></a></li>
                            <li class="breadcrumb-item" aria-current="page"> {{ translate('Customize theme') }}</li>

                        </ol>
                    </nav>
                </div>

            </div>

            <div class="label-setting">
                <div class="custom-store-outer">
                    <img src="{{ url('images/highbadge.png') }}" alt=""><span
                        class="advanced-badge">{{ translate('Advanced') }}</span>
                    <a target="blank" href="{{ route('ThemeSetting.redirectToThemeSetting') }}"
                        class="btn btn-rounded btn-dark save-store-buttons">{{ translate('Customize your store') }}</a>
                </div>

            </div>
            <div style="float: left;width: 10%;">
                <button class="btn btn-rounded btn-dark save-store-buttons submit-any-form-of-page"
                    style="background-color: #fb763d;">{{ translate('Save') }}</button>
            </div>

        </div>
    </div>
    <link rel="stylesheet" href="{{ url('./Panel/main-semidark/css/file_custom/theme_setting_' . $rtl . '.css') }}">
    <section class="content">
        <div class="box box-slided-up">
            <div class="box-header with-border" style="background-color: #fb763d;color:#FFFFFF">
                <h4 class="box-title">{{ translate('Choose') }} <strong>{{ translate('Store design') }}</strong>
                </h4>
                <ul class="box-controls pull-right">
                    <li><a class="box-btn-slide" href="#" style="color:#FFFFFF !important"></a></li>
                </ul>
            </div>

            <div class="box-body">
                <div class="translate-box theme-categories-box">
                    <ul class="nav nav-tabs justify-content-center" role="tablist">
                        <li class="nav-item">
                            <a id="cat-0" mid="0" class="nav-link temp-cat-nav-link  active" href="#">
                                <span>{{ translate('All') }}</span>
                            </a>
                        </li>
                        @foreach ($templates_categories as $cat)
                            <li class="nav-item">
                                <a id="cat-{{ $cat['id'] }}" mid="{{ $cat['id'] }}"
                                    class="nav-link temp-cat-nav-link" href="#">
                                    <span>{{ $cat['title'] }}</span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <div class="row fx-element-overlay templates-container">

                </div>
            </div>
        </div>
        <div class="translate-box theme-setting-box">
            <ul class="nav nav-tabs justify-content-center" role="tablist">
                <li class="nav-item">
                    <a id="basic-setting" class="nav-link basic-nav-link" href="#">
                        <span>{{ translate('Basic settings') }}</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a id="main-menuu" class="nav-link basic-nav-link" href="#">
                        <span>{{ translate('Customize the main menu') }}</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a id="contact-info" class="nav-link basic-nav-link" href="#">
                        <span>{{ translate('Contact info') }}</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a id="social-networks" class="nav-link basic-nav-link" href="#">
                        <span>{{ translate('social networks') }}</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a id="store-pages" class="nav-link basic-nav-link" href="#">
                        <span>{{ translate('Store pages') }}</span>
                    </a>
                </li>
            </ul>

        </div>
        <div class="basic-setting-container basic-tabs-container">
            {!! Form::open(['method' => 'patch', 'action' => ['Admin\ThemeSettingController@update', $currentTheme->id], 'files' => true, 'id' => 'basic-setting-container']) !!}
            <div class="row">
                <div class="col-md-6 col-lg-6 col-sm-12">
                    <div class="box">
                        <div class="box-body">
                            <div class="translate-box theme-setting-box">
                                <ul class="nav nav-tabs justify-content-center" role="tablist">
                                    <li class="nav-item">
                                        <a id="color-setting" mid="color" class="nav-link theme-nav-link" href="#">
                                            <span>{{ translate('Colors') }}</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a id="button-style" mid="style" class="nav-link theme-nav-link" href="#">
                                            <span>{{ translate('Button style') }}</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a id="font-type" mid="font" class="nav-link theme-nav-link" href="#">
                                            <span>{{ translate('Font type') }}</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a id="upload-logo" mid="logo" class="nav-link theme-nav-link" href="#">
                                            <span>{{ translate('Logo') }}</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a id="title-style" mid="titles" class="nav-link theme-nav-link" href="#">
                                            <span>{{ translate('Titles') }}</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a id="search-methods" mid="search" class="nav-link theme-nav-link" href="#">
                                            <span>{{ translate('search methods') }}</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="color-setting-container theme-tabs-container">
                                <div class="row">
                                    {!! Form::hidden('color_palet_id', $currentTheme->color_palet_id, ['id' => 'color_palet_id']) !!}
                                    {!! Form::hidden('activeThemEdit', 'color', ['id' => 'activeThemEdit']) !!}
                                    @foreach ($color_palets as $palet)
                                        <div class="col-lg-6 col-md-6 col-sm-12">
                                            <h6
                                                class="text-center color-palet-container-h {{ $palet['id'] == $currentTheme->color_palet_id ? 'active-color-palet-container-h' : '' }}">
                                                {{ $palet['title'] }}
                                            </h6>
                                            <div class="color-palet-container {{ $palet['id'] == $currentTheme->color_palet_id ? 'active-color-palet-container' : '' }}"
                                                mid="{{ $palet['id'] }}">
                                                <i class="fa fa-check-circle orang plat-icon"
                                                    id="plat-icon_{{ $palet['id'] }}"></i>
                                                <span class="color-palet-span   bg_primaryـcolor"
                                                    title="{{ translate('Primary color') }}"
                                                    style="background-color: {{ $palet['primary_color'] }}"></span>
                                                <span class="color-palet-span bg_secondary_color"
                                                    title="{{ translate('Secondary color') }}"
                                                    style="background-color: {{ $palet['secondary_color'] }}"></span>
                                                <span class="color-palet-span bg_white_color"
                                                    title="{{ translate('White color') }}"
                                                    style="background-color: {{ $palet['white_color'] }}"></span>
                                                <span class="color-palet-span bg_black_color"
                                                    title="{{ translate('Black color') }}"
                                                    style="background-color: {{ $palet['black_color'] }}"></span>
                                                <span class="color-palet-span bg_grey_color"
                                                    title="{{ translate('Grey color') }}"
                                                    style="background-color: {{ $palet['grey_color'] }}"></span>
                                                <span class="color-palet-span bg_light_grey_color"
                                                    title="{{ translate('Light grey color') }}"
                                                    style="background-color: {{ $palet['light_grey_color'] }}"></span>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <hr>
                                <br>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-12 mx-auto">
                                        <h6
                                            class="text-center color-palet-container-h {{ $currentTheme->color_palet_id == 0 ? 'active-color-palet-container-h' : '' }}">
                                            {{ translate('Customize the color palette') }}</h6>
                                        <div class="color-palet-container {{ $currentTheme->color_palet_id == 0 ? 'active-color-palet-container' : '' }}"
                                            mid="0">
                                            <i class="fa fa-check-circle orang plat-icon" id="plat-icon_0"></i>
                                            {!! Form::color('primary_color', $currentTheme->primary_color, ['class' => 'color-palet-span', 'id' => 'bg_primaryـcolor', 'title' => translate('Primary color')]) !!}
                                            {!! Form::color('secondary_color', $currentTheme->secondary_color, ['class' => 'color-palet-span', 'id' => 'bg_secondary_color', 'title' => translate('Secondary color')]) !!}
                                            {!! Form::color('white_color', $currentTheme->white_color, ['class' => 'color-palet-span', 'id' => 'bg_white_color', 'title' => translate('White color')]) !!}
                                            {!! Form::color('black_color', $currentTheme->black_color, ['class' => 'color-palet-span', 'id' => 'bg_black_color', 'title' => translate('Black color')]) !!}
                                            {!! Form::color('grey_color', $currentTheme->grey_color, ['class' => 'color-palet-span', 'id' => 'bg_grey_color', 'title' => translate('Grey color')]) !!}
                                            {!! Form::color('light_grey_color', $currentTheme->light_grey_color, ['class' => 'color-palet-span', 'id' => 'bg_light_grey_color', 'title' => translate('Light grey color')]) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="button-style-container theme-tabs-container">
                                {!! Form::hidden('btnStyle', $currentTheme->btnStyle, ['id' => 'btnStyle']) !!}
                                <div class="row">
                                    <div class="col-md col-lg col-sm-12">
                                        <div class="form-group">
                                            <input type="button" mid="1"
                                                class="btn btn-rounded btn-dark form-control btn-style {{ $currentTheme->btnStyle == 1 ? 'btn-style-active' : '' }}"
                                                value="{{ translate('Rounded') }}" />
                                        </div>
                                    </div>
                                    <div class="col-md col-lg col-sm-12">
                                        <div class="form-group">
                                            <input type="button" mid="2"
                                                class="btn btn-dark btn-sharp form-control btn-style {{ $currentTheme->btnStyle == 2 ? 'btn-style-active' : '' }}"
                                                value="{{ translate('Sharp') }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="font-type-container theme-tabs-container">
                                {!! Form::hidden('font_id', $currentTheme->font_id, ['id' => 'font_id']) !!}
                                {!! Form::hidden('font_name', $currentTheme->font_name, ['id' => 'font_name']) !!}
                                <div class="row">
                                    @foreach ($fonts as $font)
                                        <div class="col-lg-4 col-md-4 col-sm-6">
                                            <div class="font-box-outer text-center"
                                                style="font-family: {{ $font['font_name'] }} !important">
                                                <div class="font-box-inner text-center {{ $currentTheme->font_id == $font['id'] ? 'font-active' : '' }}"
                                                    mid="{{ $font['id'] }}" mname="{{ $font['font_name'] }}">
                                                    <h5>{{ translate('Try Font') }}</h5>
                                                    <h6>{{ translate('1234') }}</h6>
                                                    <h6>١٢٣٤٥٦</h6>
                                                </div>
                                                <h4 class="text-center">{{ $font['title'] }}</h4>
                                                <br>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                            </div>
                            <div class="title-style-container theme-tabs-container">
                                {!! Form::hidden('titleStyle', $currentTheme->titleStyle, ['id' => 'titleStyle']) !!}
                                <div class="row">
                                    <div class="col-md col-lg col-sm-12">
                                        <div class="form-group">
                                            <input type="button" mid="0"
                                                class="btn btn-dark form-control title-style {{ $currentTheme->titleStyle == 0 ? 'title-style-active' : '' }}"
                                                value="{{ translate('Side') }}" />
                                        </div>
                                    </div>
                                    <div class="col-md col-lg col-sm-12">
                                        <div class="form-group">
                                            <input type="button" mid="1"
                                                class="btn btn-dark form-control title-style {{ $currentTheme->titleStyle == 1 ? 'title-style-active' : '' }}"
                                                value="{{ translate('Centered') }}" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="search-methods-container theme-tabs-container">
                                <h3 class="text-center">{{ translate('Choose a menu format to filter results') }}</h3>
                                <div class="row">
                                    {!! Form::hidden('SearchFilterStyle', $currentTheme->searchFilterStyle, ['id' => 'SearchFilterStyle']) !!}
                                    <div class="col-lg-6 col-md-6 col-sm-12 image-search" mid="1">
                                        <div class="image-small-search search-type">
                                            <h5>{{ translate('Advanced results filter list') }}

                                            </h5>
                                            <div class="in_active" id="image-search-1">
                                                <i class="fa fa-check-circle orang search-icon" style=""></i>
                                                <img style="width:100%;" src="{{ url('/images/filter 2@2x.png') }}"
                                                    alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 image-search" mid="2">
                                        <div class="image-small-search search-type">
                                            <h5>{{ translate('rating list') }}</h5>
                                            <div class="in_active" id="image-search-2">
                                                <i class="fa fa-check-circle orang search-icon" style=""></i>
                                                <img style="width:100%;" src="{{ url('/images/sort 1@2x.png') }}" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <h4 class="text-center">
                                    {{ translate('You can choose between an advanced filter list or a simple classification list as shown above') }}
                                </h4>


                            </div>
                            <div class="upload-logo-container theme-tabs-container">
                                <div class="store-logo-box text-center">
                                    <h4>{{ translate('Add store logo') }}</h4>
                                    @php
                                        if ($settings->main_logo) {
                                            $link_logo = $settings->main_logo;
                                        } else {
                                            $link_logo = '/images/noimg.jpg';
                                        }
                                    @endphp
                                    <div class="custom-file-container custom-file-container-theme-setting">
                                        <div class="bg-lightest p-10 rounded5 dvPreview"
                                            style="width: 100%;margin-top: 1em;height: 10em;">
                                            <img style="width: 100%;height: 100%;object-fit: cover"
                                                src="{{ url($link_logo) }}" alt="" id="main_logo_custem">
                                        </div>
                                        <div class="custom-file">
                                            <input type="file" name="main_logo" class="custom-file-input" id="main_logo">
                                            <label class="custom-file-label" for="main_logo">
                                                <div class="custom-file-input-content">
                                                    <i
                                                        class="fa fa-cloud-upload"></i>&nbsp;&nbsp;&nbsp;{{ translate('Upload') }}
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <hr>
                                <br>
                                <div class="store-fav-icon-box text-center">
                                    <h4>{{ translate('Add favorit icon') }}</h4>
                                    @php
                                        if ($settings->fav_icon) {
                                            $link = $settings->fav_icon;
                                        } else {
                                            $link = '/images/noimg.jpg';
                                        }
                                    @endphp
                                    <div class="custom-file-container custom-file-container-theme-setting">
                                        <div class="bg-lightest p-10 rounded5 dvPreview"
                                            style="width: 100%;margin-top: 1em;height: 10em;">
                                            <img style="width: 100%;height: 100%;object-fit: cover"
                                                src="{{ url($link) }}" alt="">
                                        </div>
                                        <div class="custom-file">
                                            <input type="file" name="fav_icon" class="custom-file-input" id="fav_icon">
                                            <label class="custom-file-label" for="fav_icon">
                                                <div class="custom-file-input-content">
                                                    <i
                                                        class="fa fa-cloud-upload"></i>&nbsp;&nbsp;&nbsp;{{ translate('Upload') }}
                                                </div>

                                            </label>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="sampl-fav text-center">
                                        <h5 class="text-center">
                                            {{ translate('The store icon is indicated in the image below') }}</h5>
                                        <img src="{{ url('images/fav_icon.png') }}" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



                <div class="col-md-6 col-lg-6 col-sm-12">
                    <div class="box">
                        <div class="box-body" style="margin: 0; padding: 0; padding-top: 13px;">
                            <table style="width:100%" class="custem-css-templet">
                                <tbody>
                                    <tr>
                                        <td colspan="2">

                                            <img src="{{ url($link_logo) }}" alt="logo">
                                        </td>
                                        <td colspan="2">
                                            <div class="controls">
                                                <div class="input-group">
                                                    <input type="text" class="form-control"
                                                        style="height: 34px;margin-bottom: 11px;" placeholder="Search"
                                                        required="" aria-invalid="false">
                                                    <span class="input-group-append">
                                                        <button class="btn btn-info btn-sm "
                                                            style="height: 34px;background: #fb763d; color: #fff;"
                                                            type="button">{{ translate('search') }}</button>
                                                    </span>
                                                </div>
                                                <div class="help-block"></div>
                                            </div>

                                        </td>
                                        <td class="shopping-cart"> <i class="fa fa-shopping-cart" aria-hidden="true"
                                                style="margin-right: 40%; font-size: 1.3em;"></i></td>
                                        <td class="login"> {{ translate('login') }}</td>

                                    </tr>
                                    <tr class="templet-navber">
                                        <td></td>
                                        <td> {{ translate('Home') }}</td>
                                        <td> {{ translate('Category') }}</td>
                                        <td>{{ translate('Category') }}</td>
                                        <td>{{ translate('Category') }}</td>
                                        <td>{{ translate('Category') }}</td>

                                    </tr>
                                    <tr class="templet-slider">
                                        <td colspan="6">
                                            <div class="slider-templet">
                                                <div class="custem-h3">
                                                    {{ translate('Special offers on me') }}
                                                </div>
                                                <div class="custem-h1">
                                                    {{ translate('An outstanding product among other stores') }}
                                                </div>
                                                <button type="button"
                                                    class="waves-effect waves-light btn btn-secondary btn-sm no-radius">{{ translate('get now') }}
                                                </button>
                                            </div>
                                        </td>
                                    </tr>

                                    <tr class="templet-footer">
                                        <td>

                                            <img src="{{ url($link_logo) }}" alt="logo">
                                        </td>
                                        <td>
                                            <p>
                                                {{ translate('Main address') }}
                                            </p>
                                            <ul>
                                                <li>{{ translate('Sub-address') }}</li>
                                                <li>{{ translate('Sub-address') }}</li>
                                                <li>{{ translate('Sub-address') }}</li>
                                            </ul>
                                        </td>
                                        <td>
                                            <p>
                                                {{ translate('Main address') }}
                                            </p>
                                            <ul>
                                                <li>{{ translate('Sub-address') }}</li>
                                                <li>{{ translate('Sub-address') }}</li>
                                                <li>{{ translate('Sub-address') }}</li>
                                            </ul>
                                        </td>
                                        <td>
                                            <p>
                                                {{ translate('Main address') }}
                                            </p>
                                            <ul>
                                                <li>{{ translate('Sub-address') }}</li>
                                                <li>{{ translate('Sub-address') }}</li>
                                                <li>{{ translate('Sub-address') }}</li>
                                            </ul>
                                        </td>

                                        <td colspan="2">
                                            <div class="controls">
                                                <div class="input-group">
                                                    <input type="text" class="form-control"
                                                        style="height: 34px;margin-bottom: 11px;"
                                                        placeholder="{{ translate('search') }}" required=""
                                                        aria-invalid="false">
                                                    <span class="input-group-append">
                                                        <button class="btn btn-info btn-sm "
                                                            style="height: 34px;background: #fb763d; color: #fff;"
                                                            type="button">{{ translate('search') }}</button>
                                                    </span>
                                                </div>
                                                <div class="help-block"></div>
                                            </div>

                                        </td>


                                    </tr>
                                    <tr class="templet-sub-footer">
                                        <td colspan="6">
                                            <center>
                                                {{ translate('Made with love') }}

                                            </center>
                                        </td>
                                    </tr>


                                </tbody>


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

                </div>
            </div>
            {!! Form::Close() !!}
        </div>
        <div class="main-menuu-container basic-tabs-container">
            <div class="row">
                {{-- <div class="col-lg-4 col-md-12 col sm-12"></div> --}}
                <div class="col-lg-12 col-md-12 col sm-12">
                    <div class="demo-radio-button">
                        <input name="custom_menu_r" value="basic" type="radio" id="radio_33"
                            class="with-gap radio-col-warning" {{ $custom_menu == 0 ? 'checked' : '' }} />
                        <label for="radio_33">{{ translate('Basic Classification List') }}</label>
                        <input name="custom_menu_r" value="custom" type="radio" id="radio_35"
                            class="with-gap radio-col-warning" {{ $custom_menu == 1 ? 'checked' : '' }} />
                        <label for="radio_35">{{ translate('custom Classification List') }}</label>

                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col sm-12"></div>
            </div>
            <div class="container">

                <div class="box">
                    <div class="box-body">
                        {!! Form::open(['method' => 'post', 'action' => ['Admin\ThemeSettingController@saveOrganizedMenuItem'], 'files' => true, 'id' => 'main-menuu-container']) !!}
                        {!! Form::hidden('serialize_menu', null, ['onChange' => 'changeIsChange(1)', 'id' => 'nestable2-output', 'class' => 'form-control', 'placeholder' => translate('Phone')]) !!}
                        {!! Form::Close() !!}
                        <div class="menu-result-container">

                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="contact-info-container basic-tabs-container">
            <div class="box">
                {!! Form::open(['method' => 'patch', 'action' => ['Admin\settingsController@basicUpdate', 1], 'files' => true, 'id' => 'contact-info-container']) !!}
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-4 col-lg-4 col-sm-12">
                            <div class="form-group">
                                <label for="email">{{ translate('Email') }}
                                </label>
                                <div>
                                    {!! Form::email('email', $settings->email, ['onChange' => 'changeIsChange(1)', 'class' => 'form-control', 'placeholder' => translate('Email')]) !!}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-lg-4 col-sm-12">
                            <div class="form-group">
                                <label for="phone">{{ translate('Phone') }}
                                </label>
                                <div>
                                    {!! Form::text('phone', $settings->phone, ['onChange' => 'changeIsChange(1)', 'class' => 'form-control', 'placeholder' => translate('Phone')]) !!}
                                </div>

                            </div>
                        </div>
                        <div class="col-md-4 col-lg-4 col-sm-12">
                            <div class="form-group">
                                <label for="phone">{{ translate('whatsapp') }}
                                </label>
                                <div>
                                    {!! Form::text('whatsapp', $settings->whatsapp, ['onChange' => 'changeIsChange(1)', 'class' => 'form-control', 'placeholder' => translate('whatsapp')]) !!}
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="site_name">{{ translate('Site name') }}
                        </label>
                        <div>
                            {!! Form::textarea('site_name', $settings->site_name, ['onChange' => 'changeIsChange(1)', 'class' => 'form-control', 'placeholder' => translate('Site name')]) !!}
                        </div>

                    </div>

                </div>
                {!! Form::Close() !!}

            </div>
        </div>
        <div class="social-networks-container basic-tabs-container">
            <div class="box">
                {!! Form::open(['method' => 'patch', 'action' => ['Admin\settingsController@socialUpdate', 1], 'files' => true, 'id' => 'social-networks-container']) !!}
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-6 col-lg-6 col-sm-12">
                            <div class="form-group">
                                <label for="facebook">{{ translate('Facebook') }}
                                </label>
                                <div>
                                    {!! Form::text('facebook', $settings->facebook, ['onChange' => 'changeIsChange(1)', 'class' => 'form-control', 'placeholder' => translate('Facebook')]) !!}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-6 col-sm-12">
                            <div class="form-group">
                                <label for="twitter">{{ translate('Twitter') }}
                                </label>
                                <div>
                                    {!! Form::text('twitter', $settings->twitter, ['onChange' => 'changeIsChange(1)', 'class' => 'form-control', 'placeholder' => translate('Twitter')]) !!}
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-lg-6 col-sm-12">
                            <div class="form-group">
                                <label for="instgram">{{ translate('Instgram') }}
                                </label>
                                <div>
                                    {!! Form::text('instgram', $settings->instgram, ['onChange' => 'changeIsChange(1)', 'class' => 'form-control', 'placeholder' => translate('Instgram')]) !!}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-6 col-sm-12">
                            <div class="form-group">
                                <label for="appstore_link">{{ translate('Appstore') }}
                                </label>
                                <div>
                                    {!! Form::text('appstore_link', $settings->appstore_link, ['onChange' => 'changeIsChange(1)', 'class' => 'form-control', 'placeholder' => translate('Appstore')]) !!}
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-lg-6 col-sm-12">
                            <div class="form-group">
                                <label for="google_play_link">{{ translate('Google play') }}
                                </label>
                                <div>
                                    {!! Form::text('google_play_link', $settings->google_play_link, ['onChange' => 'changeIsChange(1)', 'class' => 'form-control', 'placeholder' => translate('Google play')]) !!}
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                {!! Form::Close() !!}

            </div>
        </div>
        <div class="store-pages-container basic-tabs-container">
            <div class="row">
                <div class="col-md-6">
                    <div class="box">
                        <div class="box-body">
                            <div class="table-responsive">
                                <table id="complex_header" class="table table-lg table-separated" style="width:100%">
                                    <thead>
                                        <tr class="bg-dark">
                                            <th class="text-center">
                                                #
                                            </th>
                                            <th class="text-center">{{ translate('Title') }}</th>
                                            <th class="text-center">{{ translate('Options') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($pages as $key => $d)
                                            <tr class="bg-table-gray changnametr" id="changnametr_{{ $d->id }}">
                                                <td class="text-center">
                                                    <div class="td_dalet form-group">
                                                        <div class="checkbox">
                                                            {{ $key + 1 }}
                                                            {{-- <input type="checkbox" class="type_select_input"
                                                            id="Checkboxs_{{ $d->id }}"
                                                            value="{{ $d->id }}" /> --}}
                                                            <label for="Checkboxs_{{ $d->id }}"></label>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="text-center">{{ $d->getTranslation('title') }}</td>
                                                <td class="text-center">
                                                    <div class="dropdown">
                                                        <a class="text-fade" href="#" data-toggle="dropdown"><i
                                                                class="fa fa-fw fa-list"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a class="dropdown-item" href="#"
                                                                onclick="edit_page({{ $d->id }})"><i
                                                                    class="fa fa-edit"></i>
                                                                {{ translate('Edit') }}</a>
                                                            <a class="dropdown-item"
                                                                href="{{ route('pages.translate', encrypt($d->id)) }}"><i
                                                                    class="fa fa-language"></i>
                                                                {{ translate('Translate') }}</a>
                                                            <a class="sa-warning dropdown-item submit_delete_form"
                                                                data-title="{{ translate('Are you sure?') }}"
                                                                data-no="{{ translate('Cancel') }}"
                                                                data-yes="{{ translate('Yes, delete it!') }}"
                                                                data-desc="{{ translate('You will not be able to recover this!') }}"
                                                                href="#"
                                                                data-href="{{ route('pages.destroy', $d->id) }}"><i
                                                                    class="fa fa-fw fa-trash"></i>{{ translate('Delete') }}
                                                            </a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-md-6">
                    <div class="box" id="page-box-edit">

                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('modal')
    @include('admin.ThemeSetting.partials.css_modal')
    <div class="modal fade bs-example-modal-lg" id="add-custom-item-modal" tabindex="-1" role="dialog"
        aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header">
                    <h4 class="modal-title" id="myLargeModalLabel">{{ translate('Add new Item') }}</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    {!! Form::open(['method' => 'post', 'action' => ['Admin\ThemeSettingController@saveMenuItem'], 'files' => true, 'id' => 'save-menu-item']) !!}
                    <div class="container">
                        <div class="form-group">
                            <label for="name">{{ translate('Type') }}
                            </label>
                            <select name="type" id="item_type" style="width: 100%" class="select2 form-control">
                                <option value="home">{{ translate('Home') }}</option>
                                <option value="category">{{ translate('Category') }}</option>
                                <option value="page">{{ translate('Page') }}</option>
                                <option value="link">{{ translate('External link') }}</option>
                            </select>
                        </div>
                        {!! Form::hidden('menu_id', 0, ['id' => 'menu_id', 'class' => 'form-control']) !!}
                        <div class="after-type-select-container">
                        </div>
                    </div>
                    {!! Form::Close() !!}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">{{ translate('Close') }}</button>
                    <button type="button" onclick="saveMenuItem()"
                        class="btn btn-primary float-right">{{ translate('Save') }}</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <div class="modal fade bs-example-modal-lg" id="translate-custom-item-modal" tabindex="-1" role="dialog"
        aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header">
                    <h4 class="modal-title" id="myLargeModalLabel">{{ translate('Translate Item') }}</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="translate-menu-item-container">

                </div>
            </div>

        </div>
    </div>

@endsection
@section('script')
    <script>
        let bg_primaryـcolor, bg_secondary_color, bg_white_color, bg_grey_color, bg_light_grey_color, bg_black_color;
        let searchFilterStyle = "image-search-" + {{ $currentTheme->searchFilterStyle }};
        $(document).ready(function() {
            $('.search-icon').hide();
            $('#' + searchFilterStyle).addClass('active-search').find('.search-icon').show();
            var url1 = `{{ route('pages.editMain', 1) }}`;
            $.get(url1, {}, function(data) {
                $('#page-box-edit').html(data);
                CKEDITOR.replace('editor1', {
                    language: '{{ App::getLocale() }}'
                })
                $('.textarea').wysihtml5();
            });
        })

        function edit_page(id) {
            var url = `{{ route('pages.editMain', 'page_id') }}`;
            url = url.replace('page_id', id);
            $.get(url, {}, function(data) {
                $('#page-box-edit').html(data);
                CKEDITOR.replace('editor1', {
                    language: '{{ App::getLocale() }}'
                })
                $('.textarea').wysihtml5();
            });
        }
        var customCssId = 0;
        var isChanges = 0;
        var template_category_id = 0;
        var updateOutput = function(e) {
            var list = e.length ? e : $(e.target),
                output = list.data('output');
            if (window.JSON) {
                output.val(window.JSON.stringify(list.nestable(
                    'serialize')));
            } else {
                output.val(
                    'JSON browser support required for this demo.');
            }
        };

        function changeIsChange(isch) {
            isChanges = isch;
        }





        function saveMenuItem() {
            var form_data = $('#save-menu-item').serialize()
            var url = $('#save-menu-item').attr('action')
            $.ajax({
                type: "POST",
                url: url,
                data: form_data,
                success: function(data) {
                    $('#add-custom-item-modal').modal('toggle');
                    $.ajax({
                        type: "POST",
                        url: `{{ route('ThemeSetting.customMenu') }}`,
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(data) {
                            $('.menu-result-container').html(data);
                            $('#nestable2').nestable({
                                maxDepth: 3,
                                group: 1
                            }).on('change', updateOutput);
                            updateOutput($('#nestable2').data('output', $(
                                '#nestable2-output')));
                        }
                    });
                    $.toast({
                        heading: `{{ translate('Notification') }}`,
                        text: `{{ translate('Added successfully') }}`,
                        position: 'top-right',
                        loaderBg: '#ff6849',
                        icon: 'info',
                        hideAfter: 3000,
                        stack: 6
                    });
                }
            });
        }

        function addNewCustomItem() {
            $.ajax({
                type: "POST",
                url: `{{ route('ThemeSetting.checkAddMenuItem') }}`,
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(data) {
                    if (data == true) {
                        $.ajax({
                            type: "POST",
                            url: `{{ route('ThemeSetting.getTypeSelectContainer') }}`,
                            data: {
                                _token: '{{ csrf_token() }}',
                                selectId: $('#item_type').val()
                            },
                            success: function(data) {
                                $('.after-type-select-container').html(data);
                                $('#menu_id').val(0)
                                $('.select2').select2();
                            }
                        });
                        $('#add-custom-item-modal').modal();
                    } else {
                        $('#UpgradLimitModelH41').text(
                            "{{ translate('You have exceeded the maximum number of add-ons') }} " +
                            {{ Session::get('tenant_subscribtion_data')['custom_menu']['quantity'] }} +
                            " {{ translate('of menu items') }}");
                        $('#UpgradLimitModelH42').text("{{ translate('Please Upgrade to add more.') }}");
                        $('#UpgradLimitModel').modal();
                    }
                }
            });
        }

        function editMenuItem(id, type) {
            $('#add-custom-item-modal').modal();
            $('#item_type').val(type);
            $('.select2').select2();
            $.ajax({
                type: "POST",
                url: `{{ route('ThemeSetting.editMenuItem') }}`,
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id,
                    type: type
                },
                success: function(data) {
                    $('#menu_id').val(id)
                    $('.after-type-select-container').html(data);
                    $('.select2').select2();
                }
            });
        }

        function translateMenuItem(id) {
            $.ajax({
                type: "POST",
                url: `{{ route('ThemeSetting.translateMenuItem') }}`,
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id
                },
                success: function(data) {
                    $('.translate-menu-item-container').html(data);
                    var url =
                        `{{ route('ThemeSetting.translateContainer', ['id' => 'menu_id', 'lang' => 'langg']) }}`;
                    url = url.replace('menu_id', id);
                    url = url.replace('langg', '{{ defaultLanguage() }}');
                    $.get(url, {}, function(data) {
                        $('.translator_container').html(data);
                    });
                }
            });
            $('#translate-custom-item-modal').modal();
        }

        function translatMenu(id, lang) {
            $('.nav-link-trans').removeClass('active');
            $('#' + lang).addClass('active');
            var url = `{{ route('ThemeSetting.translateContainer', ['id' => 'menu_id', 'lang' => 'langg']) }}`;
            url = url.replace('menu_id', id);
            url = url.replace('langg', lang);
            $.get(url, {}, function(data) {
                $('.translator_container').html(data);
            });
        }

        function submitAjaxTranslateMenu() {
            var form_data = $('#translate_form').serialize()
            var url = $('#translate_form').attr('action')
            $.ajax({
                type: "POST",
                url: url,
                data: form_data,
                success: function(data) {
                    $.ajax({
                        type: "POST",
                        url: `{{ route('ThemeSetting.customMenu') }}`,
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(data) {
                            $('.menu-result-container').html(data);
                            $('#nestable2').nestable({
                                maxDepth: 3,
                                group: 1
                            }).on('change', updateOutput);
                            updateOutput($('#nestable2').data('output', $(
                                '#nestable2-output')));
                        }
                    });
                    showAjaxsToast(data);
                }
            });
        }

        function deleteMenuItem(id, type) {
            swal({
                title: "{{ translate('Are you sure!') }}",
                text: "{{ translate('You about one click to delete this!') }}",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "{{ translate('Delete') }}",
                cancelButtonText: "{{ translate('Cancel') }}",
                closeOnConfirm: true,
                closeOnCancel: true
            }, function(isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        type: "POST",
                        url: `{{ route('ThemeSetting.deleteMenuItem') }}`,
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: id,
                            type: type
                        },
                        success: function(data) {
                            $.ajax({
                                type: "POST",
                                url: `{{ route('ThemeSetting.customMenu') }}`,
                                data: {
                                    _token: '{{ csrf_token() }}'
                                },
                                success: function(data) {
                                    $('.menu-result-container').html(data);
                                    $('#nestable2').nestable({
                                        maxDepth: 3,
                                        group: 1
                                    }).on('change', updateOutput);
                                    updateOutput($('#nestable2').data('output', $(
                                        '#nestable2-output')));
                                }
                            });
                            $.toast({
                                heading: `{{ translate('Notification') }}`,
                                text: `{{ translate('Deleted successfully') }}`,
                                position: 'top-right',
                                loaderBg: '#ff6849',
                                icon: 'info',
                                hideAfter: 3000,
                                stack: 6
                            });
                        }
                    });
                } else {

                }
            });
        }
        $(document).ready(function() {
            /** 
            Start Cutom Color 
            In  ready page
            ***/
            if ($('.active-color-palet-container').attr('mid') == 0) {
                bg_primaryـcolor = $('.active-color-palet-container > #bg_primaryـcolor').val();
                bg_secondary_color = $('.active-color-palet-container > #bg_secondary_color').val();
                bg_white_color = $('.active-color-palet-container > #bg_white_color').val();
                bg_grey_color = $('.active-color-palet-container > #bg_grey_color').val();
                bg_light_grey_color = $('.active-color-palet-container > #bg_light_grey_color').val();
                bg_black_color = $('.active-color-palet-container > #bg_black_color').val();
            } else {
                bg_primaryـcolor =
                    rgb2hex($('.active-color-palet-container').find('.bg_primaryـcolor').css("background-color"));

                bg_secondary_color = rgb2hex($('.active-color-palet-container').find('.bg_secondary_color').css(
                    "background-color"));
                bg_white_color = rgb2hex($('.active-color-palet-container').find('.bg_white_color').css(
                    "background-color"));
                bg_grey_color = rgb2hex($('.active-color-palet-container').find('.bg_grey_color').css(
                    "background-color"));
                bg_light_grey_color = rgb2hex($('.active-color-palet-container').find('.bg_light_grey_color').css(
                    "background-color"));
                bg_black_color = rgb2hex($('.active-color-palet-container').find('.bg_black_color').css(
                    "background-color"));

            }
            changeColorTheme();

            /** 
            End Cutom Color 
            In  ready page
            ***/

            var sid = "{{ $currentTheme->color_palet_id }}";
            $('.plat-icon').hide();
            $('#plat-icon_' + sid).show();
            $('.select2').select2();

            $.ajax({
                type: "POST",
                url: `{{ route('ThemeSetting.getTypeSelectContainer') }}`,
                data: {
                    _token: '{{ csrf_token() }}',
                    selectId: $('#item_type').val()
                },
                success: function(data) {
                    $('.after-type-select-container').html(data);
                    $('#menu_id').val(0)
                    $('.select2').select2();
                }
            });
            $('#item_type').change(function() {
                selectId = $(this).val();
                $.ajax({
                    type: "POST",
                    url: `{{ route('ThemeSetting.getTypeSelectContainer') }}`,
                    data: {
                        _token: '{{ csrf_token() }}',
                        selectId: selectId
                    },
                    success: function(data) {
                        $('.after-type-select-container').html(data);
                        $('.select2').select2();
                    }
                });
            })
            if ({{ $custom_menu }} == 1) {
                $.ajax({
                    type: "POST",
                    url: `{{ route('ThemeSetting.customMenu') }}`,
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(data) {
                        $('.menu-result-container').html(data);
                        $('#nestable2').nestable({
                            maxDepth: 3,
                            group: 1
                        }).on('change', updateOutput);
                        updateOutput($('#nestable2').data('output', $(
                            '#nestable2-output')));
                    }
                });
            } else {
                $.ajax({
                    type: "POST",
                    url: `{{ route('ThemeSetting.basicMenu') }}`,
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(data) {
                        $('.menu-result-container').html(data);
                    }
                });
            }
            $("input[name='custom_menu_r']").change(function() {
                if ($(this).val() == 'basic') {
                    $.ajax({
                        type: "POST",
                        url: `{{ route('ThemeSetting.basicMenu') }}`,
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(data) {
                            $('.menu-result-container').html(data);
                        }
                    });
                } else {
                    $.ajax({
                        type: "POST",
                        url: `{{ route('ThemeSetting.customMenu') }}`,
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(data) {
                            $('.menu-result-container').html(data);
                            $('#nestable2').nestable({
                                maxDepth: 3,
                                group: 1
                            }).on('change', updateOutput);
                            updateOutput($('#nestable2').data('output', $(
                                '#nestable2-output')));
                        }
                    });
                }
            });
            $('#main_logo').change(function() {
                changeIsChange(1);
                // debugger
            })
            $('#fav_icon').change(function() {
                changeIsChange(1);
            });
            /**
            Start in chang color in coustom ballet 
            **/
            $('.color-palet-container > input').change(function() {
                if ($(this).attr('id') == 'bg_primaryـcolor') {
                    bg_primaryـcolor = $(this).val();
                }
                if ($(this).attr('id') == 'bg_white_color') {
                    bg_white_color = $(this).val();
                }
                if ($(this).attr('id') == 'bg_secondary_color') {
                    bg_secondary_color = $(this).val();
                }
                if ($(this).attr('id') == 'bg_white_color') {
                    bg_white_color = $(this).val();
                }
                if ($(this).attr('id') == 'bg_grey_color') {
                    bg_grey_color = $(this).val();
                }
                if ($(this).attr('id') == 'bg_light_grey_color') {
                    bg_light_grey_color = $(this).val();
                }
                if ($(this).attr('id') == 'bg_black_color') {
                    bg_black_color = $(this).val();
                }
                changeColorTheme();
            });
            /**
            End in chang color in coustom ballet 
            Start In select color ballet
            **/
            $('.color-palet-container').click(function() {
                var mid = $(this).attr('mid');
                if (mid != 0) {
                    bg_primaryـcolor = rgb2hex($(this).find('.bg_primaryـcolor').css("background-color"));
                    bg_secondary_color = rgb2hex($(this).find('.bg_secondary_color').css(
                        "background-color"));
                    bg_white_color = rgb2hex($(this).find('.bg_white_color').css("background-color"));
                    bg_grey_color = rgb2hex($(this).find('.bg_grey_color').css("background-color"));
                    bg_light_grey_color = rgb2hex($(this).find('.bg_light_grey_color').css(
                        "background-color"));
                    bg_black_color = rgb2hex($(this).find('.bg_black_color').css("background-color"));
                    changeColorTheme();
                }

                $('#color_palet_id').val(mid);
                $('.color-palet-container').removeClass('active-color-palet-container');
                $('.color-palet-container-h').removeClass('active-color-palet-container-h');
                $(this).siblings(".color-palet-container-h").addClass('active-color-palet-container-h');
                $(this).addClass('active-color-palet-container');

                $('.plat-icon').hide();
                $('#plat-icon_' + mid).show();



                changeIsChange(1);
            });
            /***
            End In select color ballet
            ***/
            $('.btn-style').click(function() {
                var mid = $(this).attr('mid');
                $('.slider-templet > button').removeClass('btn-rounded').addClass('no-radius');
                if (mid == 1) {
                    $('.slider-templet > button').removeClass('no-radius').addClass('btn-rounded');
                }


                $('#btnStyle').val(mid);
                $('.btn-style').removeClass('btn-style-active');
                $(this).addClass('btn-style-active');
                changeIsChange(1);
            })
            $('.title-style').click(function() {
                var mid = $(this).attr('mid');
                $('#titleStyle').val(mid);
                $('.title-style').removeClass('title-style-active');
                $(this).addClass('title-style-active');
                changeIsChange(1);
            })
            $('.font-box-inner').click(function() {

                var mid = $(this).attr('mid');
                $('#font_id').val(mid);

                var mname = $(this).attr('mname');
                $('#font_name').val(mname);
                $('.font-box-inner').removeClass('font-active');
                $(this).addClass('font-active');

                $('.custem-css-templet').css('font-family', mname);
                changeIsChange(1);
            })
            $.ajax({
                type: "POST",
                url: `{{ route('ThemeSetting.getTemplates') }}`,
                data: {
                    _token: '{{ csrf_token() }}',
                    category_id: template_category_id
                },
                success: function(data) {
                    $('.templates-container').html(data);
                }
            });
            switch ('{{ $key_tap }}') {
                case 'basic':
                    $('.basic-setting-container').show();
                    $('.basic-nav-link').removeClass('active');
                    $('#basic-setting').addClass('active');
                    break;
                case 'menu':
                    $('.main-menuu-container').show();
                    $('.basic-nav-link').removeClass('active');
                    $('#main-menuu').addClass('active');
                    break;
                case 'contact':
                    $('.contact-info-container').show();
                    $('.basic-nav-link').removeClass('active');
                    $('#contact-info').addClass('active');
                    break;
                case 'social':
                    $('.social-networks-container').show();
                    $('.basic-nav-link').removeClass('active');
                    $('#social-networks').addClass('active');
                    break;
                case 'pages':
                    $('.store-pages-container').show();
                    $('.basic-nav-link').removeClass('active');
                    $('#store-pages').addClass('active');
                    break;

                default:
                    break;
            }


            var form_to_submit = $('#basic-setting-container');
            $('.submit-any-form-of-page').click(function() {
                form_to_submit.submit();
            })
            $('.basic-nav-link').click(function() {
                var id = $(this).attr('id');
                var thisElement = $(this);
                if (isChanges == 1) {
                    swal({
                        title: "{{ translate('Leave changes!') }}",
                        text: "{{ translate('you made some changes that you might lose if you leave this. do you want to save it!') }}",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "{{ translate('Save') }}",
                        cancelButtonText: "{{ translate('Cancel') }}",
                        closeOnConfirm: true,
                        closeOnCancel: true
                    }, function(isConfirm) {
                        if (isConfirm) {
                            form_to_submit.submit();
                        } else {
                            changeIsChange(0);
                            form_to_submit = $('#' + id + '-container');
                            $('.basic-nav-link').removeClass('active');
                            thisElement.addClass('active');
                            $('.basic-tabs-container').hide();
                            $('.' + id + '-container').show();
                        }
                    });
                } else {
                    form_to_submit = $('#' + id + '-container');
                    $('.basic-nav-link').removeClass('active');
                    thisElement.addClass('active');
                    $('.basic-tabs-container').hide();
                    $('.' + id + '-container').show();
                }

            })

            $('.temp-cat-nav-link').click(function() {
                var id = $(this).attr('mid');
                template_category_id = id;
                $('.temp-cat-nav-link').removeClass('active');
                $('#cat-' + id).addClass('active');
                $.ajax({
                    type: "POST",
                    url: `{{ route('ThemeSetting.getTemplates') }}`,
                    data: {
                        _token: '{{ csrf_token() }}',
                        category_id: template_category_id
                    },
                    success: function(data) {
                        $('.templates-container').html(data);
                    }
                });
            })
            
            switch ('{{ $basic_active }}') {
                case 'color':
                    $('.color-setting-container').show();
                    $('.theme-nav-link').removeClass('active');
                    $('#color-setting').addClass('active');
                    break;
                case 'style':
                    $('.button-style-container').show();
                    $('.theme-nav-link').removeClass('active');
                    $('#button-style').addClass('active');
                    break;
                case 'font':
                    $('.font-type-container').show();
                    $('.theme-nav-link').removeClass('active');
                    $('#font-type').addClass('active');
                    break;
                case 'logo':
                    $('.upload-logo-container').show();
                    $('.theme-nav-link').removeClass('active');
                    $('#upload-logo').addClass('active');
                    break;
                case 'search':
                    $('.search-methods-container').show();
                    $('.theme-nav-link').removeClass('active');
                    $('#search-methods').addClass('active');
                    break;
                case 'titles':
                    $('.title-style-container').show();
                    $('.theme-nav-link').removeClass('active');
                    $('#title-style').addClass('active');
                    break;
                default:
                    break;
            }
            $('.theme-nav-link').click(function() {
                $('#activeThemEdit').val($(this).attr('mid'));
                var id = $(this).attr('id');
                $('.theme-nav-link').removeClass('active');
                $(this).addClass('active');
                $('.theme-tabs-container').hide();
                $('.' + id + '-container').show();
            })

        })
        var editor = ace.edit("editorCSS");

        function customCss(template_number) {
            $.ajax({
                type: "POST",
                url: `{{ route('ThemeSetting.getCssFileConten') }}`,
                data: {
                    _token: '{{ csrf_token() }}',
                    template_number: template_number
                },
                success: function(data) {
                    editor.setValue(data);
                }
            });
            editor = ace.edit("editorCSS");
            editor.setTheme("ace/theme/sqlserver");
            editor.getSession().setMode("ace/mode/css");
            customCssId = template_number;
            $('#css-editor-modal').modal();
        }

        function saveCssFile() {
            $.ajax({
                type: "POST",
                url: `{{ route('ThemeSetting.saveTemplateCssFile') }}`,
                data: {
                    _token: '{{ csrf_token() }}',
                    template_num: customCssId,
                    content: editor.getValue(),
                },
                success: function(data) {
                    if (data == true) {
                        swal("{{ translate('Good!') }}",
                            "{{ translate('Css code Saved successfully') }}",
                            "success");
                    } else {
                        swal("{{ translate('Warning!') }}",
                            "{{ translate('You need to apply this them first.') }}",
                            "warning");
                    }

                }
            });

        }

        function toSubscribtion(id, title) {
            var url = id;
            var title = title;
            swal({
                title: title,
                text: "{{ translate('You need to subscrib this to enable this theme') }}",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "{{ translate('Subscrib now') }}",
                cancelButtonText: "{{ translate('Cancel') }}",
                closeOnConfirm: false
            }, function() {
                window.location.href = url;
            });
        }

        function applyTheme(front_id) {
            $.ajax({
                type: "POST",
                url: `{{ route('ThemeSetting.applyTheme') }}`,
                data: {
                    _token: '{{ csrf_token() }}',
                    front_id: front_id,
                    category_id: template_category_id
                },
                success: function(data) {
                    $.ajax({
                        type: "POST",
                        url: `{{ route('ThemeSetting.getTemplates') }}`,
                        data: {
                            _token: '{{ csrf_token() }}',
                            category_id: template_category_id
                        },
                        success: function(data) {
                            $('.templates-container').html(data);
                        }
                    });
                    swal("{{ translate('Good!') }}", "{{ translate('Theme applied successfully') }}",
                        "success");
                }
            });
        }


        /** 
        Stat Function Chang Search View
        ***/
        $('.image-search').click(function() {
            $('.search-icon').hide();
            $('.in_active').removeClass('active-search');
            $(this).find('.in_active').addClass('active-search');
            $(this).find('.search-icon').show();
            $('#SearchFilterStyle').val($(this).attr('mid'));
            changeIsChange(1);
        });
        /** 
        End Function Chang Search View
        ***/

        /** 
        Stat Function Chang Color ballet
        ***/
        function changeColorTheme() {
            $('.templet-navber').css('background-color', bg_primaryـcolor);
            $('#bg_primaryـcolor').val(bg_primaryـcolor);
            $('.custem-css-templet').find('.login').css('color', bg_primaryـcolor);
            $('.custem-css-templet').find('button').css('background-color', bg_primaryـcolor);
            $('#bg_primaryـcolor').val(bg_primaryـcolor);

            $('.templet-footer').css('background-color', bg_secondary_color);
            $('#bg_secondary_color').val(bg_secondary_color);

            $('.custem-css-templet').css('color', bg_white_color);
            $('.custem-css-templet').find('button').css('color', bg_white_color);
            $('#bg_white_color').val(bg_white_color);

            $('.custem-css-templet li').css('color', bg_grey_color);
            $('#bg_grey_color').val(bg_grey_color);

            $('.custem-css-templet input').css('background-color', bg_light_grey_color);
            $('#bg_light_grey_color').val(bg_light_grey_color);

            $('.custem-h3').css('color', bg_black_color);
            $('.custem-h1').css('color', bg_black_color);
            $('.shopping-cart').css('color', bg_black_color);
            $('#bg_black_color').val(bg_black_color);

            let lighten_darken_color = lightenDarkenColor(bg_secondary_color, -30);
            $('.templet-sub-footer > td').css({
                'color': bg_white_color,
                'background-color': lighten_darken_color
            });

        }

        function lightenDarkenColor(color, amount) {
            let colorWithoutHash = color.replace("#", "")
            if (colorWithoutHash.length === 3) {
                colorWithoutHash = colorWithoutHash
                    .split("")
                    .map((c) => `${c}${c}`)
                    .join('');
            }

            const getColorChannel = (substring) => {
                let colorChannel = parseInt(substring, 16) + amount
                colorChannel = Math.max(Math.min(255, colorChannel), 0).toString(16)

                if (colorChannel.length < 2) {
                    colorChannel = `0${colorChannel}`
                }

                return colorChannel
            }

            const colorChannelRed = getColorChannel(colorWithoutHash.substring(0, 2))
            const colorChannelGreen = getColorChannel(colorWithoutHash.substring(2, 4))
            const colorChannelBlue = getColorChannel(colorWithoutHash.substring(4, 6))

            return `#${colorChannelRed}${colorChannelGreen}${colorChannelBlue}`
        }


        const rgb2hex = (rgb) =>
            `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`;

        /** 
        End Function Chang Color ballet
        ***/
    </script>
@endsection