@extends('layouts.master')

@section('title', trans('admin.landing_page_settings'))

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/quill/typography.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/quill/katex.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/quill/editor.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/select2/select2.css') }}" />
@endsection

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <h4 class="fw-bold py-3 mb-4">
        <span class="text-muted fw-light">{{ trans('admin.landing_page') }} /</span> {{ trans('admin.settings') }}
    </h4>

    <div class="row">
        <div class="col-xl-12">
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs nav-fill mb-3" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#hero" role="tab">
                            <i class="ti ti-layout-board-split me-1"></i> {{ trans('admin.main_section') }}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#app-links" role="tab">
                            <i class="ti ti-brand-appstore me-1"></i> {{ trans('admin.app_links') }}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#sections" role="tab">
                            <i class="ti ti-sections me-1"></i> {{ trans('admin.sections_control') }}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#contact" role="tab">
                            <i class="ti ti-address-book me-1"></i> {{ trans('admin.contact_info') }}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#pages" role="tab">
                            <i class="ti ti-file-description me-1"></i> {{ trans('admin.pages_content') }}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#cta-stats" role="tab">
                            <i class="ti ti-chart-bar me-1"></i> {{ trans('admin.statistics') }}
                        </a>
                    </li>
                </ul>

                <form action="{{ route('admin.landing_hub.update_settings') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="tab-content border p-4 rounded card">
                        <!-- Hero Section -->
                        <div class="tab-pane active" id="hero" role="tabpanel">
                            <div class="row">
                                <div class="col-md-8">
                                    @include('landing.partials._translatable_field', ['configs' => $configs, 'key' => 'landing-main-title', 'type' => 'text'])
                                    @include('landing.partials._translatable_field', ['configs' => $configs, 'key' => 'landing-main-description', 'type' => 'textarea', 'rows' => 4])
                                </div>
                                <div class="col-md-4">
                                    @include('landing.partials._file_field', ['configs' => $configs, 'key' => 'landing-main-mockup'])
                                </div>
                            </div>
                        </div>

                        <!-- App Links -->
                        <div class="tab-pane" id="app-links" role="tabpanel">
                            <div class="row">
                                <div class="col-md-4">
                                    <h6 class="fw-bold mb-3">App Store</h6>
                                    @include('landing.partials._simple_field', ['configs' => $configs, 'key' => 'landing-app-store-url'])
                                    @include('landing.partials._file_field', ['configs' => $configs, 'key' => 'landing-app-store-logo'])
                                </div>
                                <div class="col-md-4 border-start">
                                    <h6 class="fw-bold mb-3">Google Play</h6>
                                    @include('landing.partials._simple_field', ['configs' => $configs, 'key' => 'landing-google-play-url'])
                                    @include('landing.partials._file_field', ['configs' => $configs, 'key' => 'landing-google-play-logo'])
                                </div>
                                <div class="col-md-4 border-start">
                                    <h6 class="fw-bold mb-3">App Gallery</h6>
                                    @include('landing.partials._simple_field', ['configs' => $configs, 'key' => 'landing-app-gallery-url'])
                                    @include('landing.partials._file_field', ['configs' => $configs, 'key' => 'landing-app-gallery-logo'])
                                </div>
                            </div>
                        </div>

                        <!-- Sections Control -->
                        <div class="tab-pane" id="sections" role="tabpanel">
                            <div class="row">
                                @foreach(['how-it-works', 'features', 'providers', 'security'] as $sec)
                                    <div class="col-md-6 mb-4 pb-3 border-bottom">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <h6 class="fw-bold mb-0 text-uppercase">{{ str_replace('-', ' ', $sec) }}</h6>
                                            @include('landing.partials._boolean_field', ['configs' => $configs, 'key' => "landing-show-$sec", 'no_label' => true])
                                        </div>
                                        @include('landing.partials._translatable_field', ['configs' => $configs, 'key' => "landing-$sec-title", 'type' => 'text'])
                                        @include('landing.partials._translatable_field', ['configs' => $configs, 'key' => "landing-$sec-description", 'type' => 'textarea', 'rows' => 3])
                                        @if($sec == 'providers')
                                            @include('landing.partials._file_field', ['configs' => $configs, 'key' => 'landing-providers-image'])
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Contact Info -->
                        <div class="tab-pane" id="contact" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    @include('landing.partials._simple_field', ['configs' => $configs, 'key' => 'landing-contact-email'])
                                    @include('landing.partials._simple_field', ['configs' => $configs, 'key' => 'landing-contact-phone'])
                                </div>
                                <div class="col-md-6">
                                    @include('landing.partials._translatable_field', ['configs' => $configs, 'key' => 'landing-contact-address', 'type' => 'textarea'])
                                </div>
                            </div>
                            <hr class="my-4">
                            <h6 class="fw-bold mb-3">{{ trans('admin.social_media_links') }}</h6>
                            <div class="row">
                                @foreach([
                                    'landing-social-instagram' => 'landing-social-instagram-title',
                                    'landing-social-whatsapp' => 'landing-social-whatsapp-title',
                                    'landing-social-snapchat' => 'landing-social-snapchat-title',
                                    'landing-social-x' => 'landing-social-x-title',
                                    'landing-social-facebook' => 'landing-social-facebook-title',
                                    'landing-social-tiktok' => 'landing-social-tiktok-title',
                                    'landing-social-telegram' => 'landing-social-telegram-title',
                                    'landing-social-youtube' => 'landing-social-youtube-title',
                                ] as $urlKey => $titleKey)
                                    <div class="col-md-6 mb-4">
                                        <div class="card bg-light p-3 border shadow-none">
                                            <div class="row">
                                                <div class="col-12">
                                                    @include('landing.partials._translatable_field', ['configs' => $configs, 'key' => $titleKey, 'type' => 'text'])
                                                </div>
                                                <div class="col-12 mt-n2">
                                                    @include('landing.partials._simple_field', ['configs' => $configs, 'key' => $urlKey])
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Pages -->
                        <div class="tab-pane" id="pages" role="tabpanel">
                            <div class="row">
                                <div class="col-12">
                                    <div class="card mb-4">
                                        <div class="card-header bg-light py-2">
                                            <h6 class="mb-0">{{ trans('admin.about_us_and_app') }}</h6>
                                        </div>
                                        <div class="card-body pt-3">
                                            @include('landing.partials._translatable_field', ['configs' => $configs, 'key' => 'landing-about-us', 'type' => 'rich-text', 'height' => '300px'])
                                            <hr>
                                            @include('landing.partials._translatable_field', ['configs' => $configs, 'key' => 'landing-about-app', 'type' => 'rich-text', 'height' => '300px'])
                                        </div>
                                    </div>

                                    <div class="card mb-4">
                                        <div class="card-header bg-light py-2">
                                            <h6 class="mb-0">{{ trans('admin.legal_and_contact_pages') }}</h6>
                                        </div>
                                        <div class="card-body pt-3">
                                            @include('landing.partials._translatable_field', ['configs' => $configs, 'key' => 'landing-terms-and-conditions', 'type' => 'rich-text', 'height' => '300px'])
                                            <hr>
                                            @include('landing.partials._translatable_field', ['configs' => $configs, 'key' => 'landing-privacy-policy', 'type' => 'rich-text', 'height' => '300px'])
                                            <hr>
                                            @include('landing.partials._translatable_field', ['configs' => $configs, 'key' => 'landing-contact-us-content', 'type' => 'rich-text', 'height' => '300px'])
                                            <hr>

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

                        <!-- CTA & Stats -->
                        <div class="tab-pane" id="cta-stats" role="tabpanel">
                            <div class="row">
                                <div class="col-md-12 mb-4">
                                    <h5 class="card-title mb-3">{{ trans('admin.cta_section') }}</h5>
                                    @include('landing.partials._translatable_field', ['configs' => $configs, 'key' => 'landing-cta-title', 'type' => 'text'])
                                    @include('landing.partials._translatable_field', ['configs' => $configs, 'key' => 'landing-cta-description', 'type' => 'textarea', 'rows' => 3])
                                </div>
                                <div class="col-12 mt-2">
                                    <hr>
                                    <h5 class="card-title mb-3">{{ trans('admin.statistics') }}</h5>
                                    <div class="row">
                                        <div class="col-md-4">
                                            @include('landing.partials._simple_field', ['configs' => $configs, 'key' => 'landing-stats-rating'])
                                        </div>
                                        <div class="col-md-4">
                                            @include('landing.partials._simple_field', ['configs' => $configs, 'key' => 'landing-stats-providers'])
                                        </div>
                                        <div class="col-md-4">
                                            @include('landing.partials._simple_field', ['configs' => $configs, 'key' => 'landing-stats-downloads'])
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4 text-end">
                        <button type="submit" class="btn btn-primary btn-lg shadow">
                            <i class="ti ti-device-floppy me-1"></i> {{ trans('admin.save_changes') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

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

@section('page-script')
<style>
    /* Dark Mode Enhancements */
    html.dark-style .nav-tabs-custom .tab-content {
        background-color: #2f3349 !important;
        border-color: #434968 !important;
    }
    html.dark-style .nav-tabs-custom .nav-link:not(.active) {
        color: #a5a3ae !important;
    }
    html.dark-style .nav-tabs-custom .nav-link.active {
        background-color: #2f3349 !important;
        border-bottom-color: #2f3349 !important;
    }
    html.dark-style .form-label {
        color: #cfcde4 !important;
    }
    html.dark-style .form-text.small {
        color: #9090b1 !important;
    }
    html.dark-style .nav-pills .nav-link:not(.active) {
        background-color: #3b405d !important;
        color: #a5a3ae !important;
        border: 1px solid #434968;
    }
    html.dark-style .nav-tabs-custom.border {
        border-color: #434968 !important;
    }
    html.dark-style .quill-editor {
        background-color: #2f3349 !important;
        color: #cfcde4;
        border-color: #434968 !important;
    }
    html.dark-style .ql-toolbar {
        background-color: #3b405d !important;
        border-color: #434968 !important;
    }
    html.dark-style .ql-container {
        border-color: #434968 !important;
    }
    html.dark-style .ql-snow .ql-stroke {
        stroke: #cfcde4;
    }
    html.dark-style .ql-snow .ql-fill {
        fill: #cfcde4;
    }
    html.dark-style .ql-snow .ql-picker {
        color: #cfcde4;
    }
    html.dark-style .img-thumbnail {
        background-color: #3b405d;
        border-color: #434968;
    }
    html.dark-style .shadow {
        box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.4) !important;
    }
</style>
<script>
    $(function() {
        // Initialize Quill Editors
        $('.quill-editor').each(function() {
            var editorId = $(this).attr('id');
            var targetId = $(this).data('target');
            var quill = new Quill('#' + editorId, {
                modules: {
                    toolbar: [
                        [{ font: [] }, { size: [] }],
                        ['bold', 'italic', 'underline', 'strike'],
                        [{ color: [] }, { background: [] }],
                        [{ script: 'super' }, { script: 'sub' }],
                        [{ header: '1' }, { header: '2' }, 'blockquote', 'code-block'],
                        [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
                        [{ direction: 'rtl' }, { align: [] }],
                        ['link', 'image', 'video'],
                        ['clean']
                    ]
                },
                theme: 'snow'
            });

            quill.on('text-change', function() {
                $('input[name="' + targetId + '"]').val(quill.root.innerHTML);
            });
        });

        $('.select2').select2();
    });
</script>
@endsection