@extends('layouts/layoutMaster')

@section('title', 'Edit Home Page')
@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/tagify/tagify.css') }}" />
    <link rel="stylesheet" href="{{ asset('/assets/vendor/libs/select2/select2.css') }}" />
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/tagify/tagify.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/select2/select2.js') }}"></script>

@endsection

@section('page-script')
    @if ($activeTab === 'scripts')
        @include('seller.pages.edit-home.script_js')
    @elseif ($activeTab === 'config')
        @include('seller.pages.edit-home.config_js')
    @elseif ($activeTab === 'proxy')
        @include('seller.pages.edit-home.proxy_js')
    @endif
@endsection

@section('page-style')
    <style>
        .select2-container--default .select2-results>.select2-results__options {
            max-height: 200px;
            overflow-y: auto;
        }

        html,
        body {
            overflow-x: hidden;
        }
    </style>
@endsection


@section('content')
    <h4 class="fw-bold py-3 mb-4">
        {{-- <span class="text-muted fw-light">DataTables /</span>  --}}
        Edit Home Page
    </h4>

    <div class="nav-align-top mb-4">
        <ul class="nav nav-pills mb-3 nav-fill" role="tablist">
            <li class="nav-item">
                <a href="{{ route('admin.edit-home.manager', ['tab' => 'scripts']) }} "
                    class="nav-link{{ $activeTab === 'scripts' ? ' active' : '' }}" role="tab"
                    aria-controls="navs-pills-justified-home" aria-selected="true">
                    scripts
                </a>
            </li>

            <li class="nav-item">
                <a href="{{ route('admin.edit-home.manager', ['tab' => 'config']) }} "
                    class="nav-link{{ $activeTab === 'config' ? ' active' : '' }}" role="tab"
                    aria-controls="navs-pills-justified-profile" aria-selected="false">
                    config
                </a>
            </li>

            <li class="nav-item">
                <a href="{{ route('admin.edit-home.manager', ['tab' => 'proxy']) }} "
                    class="nav-link{{ $activeTab === 'proxy' ? ' active' : '' }}" role="tab"
                    aria-controls="navs-pills-justified-messages" aria-selected="false">
                    Optimize Proxy
                </a>
            </li>

        </ul>
        <div class="tab-content">
            <div class="tab-pane fade{{ $activeTab === 'scripts' ? ' show active' : '' }}"
                id="navs-pills-justified-scripts" role="tabpanel">
                <div class="mt-4">
                    <div class="col-md-12">
                        <small class="text-light fw-semibold d-block">Popular</small>
                        <div class="position-relative form-floating form-floating-outline">
                            <select class="form-select" name="popular-scripts[]" multiple="multiple"
                                id="formtabs-popular-scripts">

                            </select>
                            <span id="number-input-char-popular-scripts"
                                style="position: absolute; right:0; bottom:-20px;"><span
                                    id="count-popular-scripts">0</span>/4</span>
                            <span id="popular-scripts-error" class="text-danger"></span>
                        </div>
                    </div>
                </div>

                <div class="mt-4">
                    <div class="col-md-12">
                        <small class="text-light fw-semibold d-block">Newest</small>
                        <div class="position-relative form-floating form-floating-outline">
                            <select class="form-select" name="spotlight-scripts[]" multiple="multiple"
                                id="formtabs-spotlight-scripts">

                            </select>
                            <span id="number-input-char-spotlight-scripts"
                                style="position: absolute; right:0; bottom:-20px;"><span
                                    id="count-spotlight-scripts">0</span>/4</span>
                            <span id="spotlight-scripts-error" class="text-danger"></span>
                        </div>
                    </div>
                </div>
                <div class="mt-4 mb-4">
                    <div class="col-md-12">
                        <small class="text-light fw-semibold d-block">Top view</small>
                        <div class="position-relative form-floating form-floating-outline">
                            <select class="form-select" name="view-scripts[]" multiple="multiple"
                                id="formtabs-view-scripts">

                            </select>
                            <span id="number-input-char-view-scripts"
                                style="position: absolute; right:0; bottom:-20px;"><span
                                    id="count-views-scripts">0</span>/6</span>
                            <span id="view-scripts-error" class="text-danger"></span>
                        </div>
                    </div>
                </div>

                <div class="mt-4 d-flex justify-content-end">
                    <button type="button" id="edit-scripts-submit"
                        class="btn btn-primary waves-effect waves-light">Save</button>
                </div>
            </div>

            <div class="tab-pane fade{{ $activeTab === 'config' ? ' show active' : '' }}" id="navs-pills-justified-config"
                role="tabpanel">
                <div class="card-datatable table-responsive pt-0">
                    <div class="mt-4">
                        <div class="col-md-12">
                            <small class="text-light fw-semibold d-block">Popular</small>
                            <div class="position-relative form-floating form-floating-outline">
                                <select class="form-select" name="popular-config[]" multiple="multiple"
                                    id="formtabs-popular-config">

                                </select>
                                <span id="number-input-char-popular-config"
                                    style="position: absolute; right:0; bottom:-20px;"><span
                                        id="count-popular-config">0</span>/4</span>
                                <span id="popular-config-error" class="text-danger"></span>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4">
                        <div class="col-md-12">
                            <small class="text-light fw-semibold d-block">Newest</small>
                            <div class="position-relative form-floating form-floating-outline">
                                <select class="form-select" name="spotlight-config[]" multiple="multiple"
                                    id="formtabs-spotlight-config">

                                </select>
                                <span id="number-input-char-spotlight-config"
                                    style="position: absolute; right:0; bottom:-20px;"><span
                                        id="count-spotlight-config">0</span>/4</span>
                                <span id="spotlight-config-error" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="col-md-12">
                            <small class="text-light fw-semibold d-block">Top view</small>
                            <div class="position-relative form-floating form-floating-outline">
                                <select class="form-select" name="view-config[]" multiple="multiple"
                                    id="formtabs-view-config">

                                </select>
                                <span id="number-input-char-view-config"
                                    style="position: absolute; right:0; bottom:-20px;"><span
                                        id="count-views-config">0</span>/6</span>
                                <span id="view-config-error" class="text-danger"></span>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4 d-flex justify-content-end">
                        <button type="button" id="edit-config-submit"
                            class="btn btn-primary waves-effect waves-light">Save</button>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade{{ $activeTab === 'proxy' ? ' show active' : '' }}" id="navs-pills-justified-proxy"
                role="tabpanel">
                <div class="card-datatable table-responsive pt-0">
                    <div class="mt-4">
                        <div class="col-md-12">
                            <small class="text-light fw-semibold d-block">Popular</small>
                            <div class="position-relative form-floating form-floating-outline">
                                <select class="form-select" name="popular-proxy[]" multiple="multiple"
                                    id="formtabs-popular-proxy">

                                </select>
                                <span id="number-input-char-popular-proxy"
                                    style="position: absolute; right:0; bottom:-20px;"><span
                                        id="count-popular-proxy">0</span>/4</span>
                                <span id="popular-proxy-error" class="text-danger"></span>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4">
                        <div class="col-md-12">
                            <small class="text-light fw-semibold d-block">Newest</small>
                            <div class="position-relative form-floating form-floating-outline">
                                <select class="form-select" name="spotlight-proxy[]" multiple="multiple"
                                    id="formtabs-spotlight-proxy">

                                </select>
                                <span id="number-input-char-spotlight-proxy"
                                    style="position: absolute; right:0; bottom:-20px;"><span
                                        id="count-spotlight-proxy">0</span>/4</span>
                                <span id="spotlight-proxy-error" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="col-md-12">
                            <small class="text-light fw-semibold d-block">Top view</small>
                            <div class="position-relative form-floating form-floating-outline">
                                <select class="form-select" name="view-proxy[]" multiple="multiple"
                                    id="formtabs-view-proxy">

                                </select>
                                <span id="number-input-char-view-proxy"
                                    style="position: absolute; right:0; bottom:-20px;"><span
                                        id="count-views-proxy">0</span>/6</span>
                                <span id="view-proxy-error" class="text-danger"></span>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4 d-flex justify-content-end">
                        <button type="button" id="edit-proxy-submit"
                            class="btn btn-primary waves-effect waves-light">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection