@extends('layouts.dashboardnew')

@section('content')

{{-- ===================== HEADER ===================== --}}
<div class="card border-0 shadow-sm rounded-4 mb-3 overflow-hidden">
    <div class="card-body p-4 bg-primary bg-gradient text-white position-relative">
        <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
            <div class="d-flex align-items-center gap-3">
                <div class="bg-white bg-opacity-25 rounded-3 d-inline-flex align-items-center justify-content-center border border-light border-opacity-25"
                     style="width:52px;height:52px;">
                    <i class="fa-solid fa-gears fs-4"></i>
                </div>
                <div>
                    <h4 class="fw-bold mb-1 text-white">Configuración del sistema</h4>
                    <p class="mb-0 small text-white text-opacity-75">
                        Administra los módulos generales, la identidad visual y el slider de la plataforma.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>


{{-- ===================== TOGGLES DEL SISTEMA ===================== --}}
<div class="row g-3 mb-3">

    {{-- Traductor --}}
    <div class="col-12 col-md-4">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-3 d-flex align-items-center gap-3">
                <div class="bg-{{ $settings->traductor == '1' ? 'success' : 'danger' }}-subtle text-{{ $settings->traductor == '1' ? 'success' : 'danger' }}-emphasis rounded-3 d-inline-flex align-items-center justify-content-center flex-shrink-0"
                     style="width:48px;height:48px;">
                    <i class="fa-solid fa-language fs-4"></i>
                </div>
                <div class="flex-grow-1 min-w-0">
                    <div class="d-flex align-items-center gap-2 mb-1">
                        <span class="fw-bold text-dark">Traductor</span>
                        @if($settings->traductor == '1')
                            <span class="badge bg-success-subtle text-success-emphasis rounded-pill small fw-semibold">Activo</span>
                        @else
                            <span class="badge bg-danger-subtle text-danger-emphasis rounded-pill small fw-semibold">Inactivo</span>
                        @endif
                    </div>
                    <a href="{{ route('setting-traductor') }}"
                       class="btn btn-sm rounded-pill fw-semibold {{ $settings->traductor == '1' ? 'btn-outline-danger' : 'btn-outline-primary' }}">
                        <i class="fa-solid fa-power-off me-1"></i>
                        @if($settings->traductor == '1') Desactivar @else Activar @endif
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- KYC --}}
    <div class="col-12 col-md-4">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-3 d-flex align-items-center gap-3">
                <div class="bg-{{ $settings->kyc == '1' ? 'success' : 'danger' }}-subtle text-{{ $settings->kyc == '1' ? 'success' : 'danger' }}-emphasis rounded-3 d-inline-flex align-items-center justify-content-center flex-shrink-0"
                     style="width:48px;height:48px;">
                    <i class="fa-solid fa-id-card fs-4"></i>
                </div>
                <div class="flex-grow-1 min-w-0">
                    <div class="d-flex align-items-center gap-2 mb-1">
                        <span class="fw-bold text-dark">KYC</span>
                        @if($settings->kyc == '1')
                            <span class="badge bg-success-subtle text-success-emphasis rounded-pill small fw-semibold">Activo</span>
                        @else
                            <span class="badge bg-danger-subtle text-danger-emphasis rounded-pill small fw-semibold">Inactivo</span>
                        @endif
                    </div>
                    <a href="{{ route('verificacion-kyc-activar', ['estado' => ($settings->kyc == '1') ? 0 : 1]) }}"
                       class="btn btn-sm rounded-pill fw-semibold {{ $settings->kyc == '1' ? 'btn-outline-danger' : 'btn-outline-primary' }}">
                        <i class="fa-solid fa-power-off me-1"></i>
                        @if($settings->kyc == '1') Desactivar @else Activar @endif
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Mantenimiento --}}
    <div class="col-12 col-md-4">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-3 d-flex align-items-center gap-3">
                <div class="bg-{{ $settings->mantenimiento == '1' ? 'warning' : 'danger' }}-subtle text-{{ $settings->mantenimiento == '1' ? 'warning' : 'danger' }}-emphasis rounded-3 d-inline-flex align-items-center justify-content-center flex-shrink-0"
                     style="width:48px;height:48px;">
                    <i class="fa-solid fa-screwdriver-wrench fs-4"></i>
                </div>
                <div class="flex-grow-1 min-w-0">
                    <div class="d-flex align-items-center gap-2 mb-1">
                        <span class="fw-bold text-dark">Mantenimiento</span>
                        @if($settings->mantenimiento == '1')
                            <span class="badge bg-warning-subtle text-warning-emphasis rounded-pill small fw-semibold">Activo</span>
                        @else
                            <span class="badge bg-danger-subtle text-danger-emphasis rounded-pill small fw-semibold">Inactivo</span>
                        @endif
                    </div>
                    <a href="{{ route('mantenimiento-save') }}"
                       class="btn btn-sm rounded-pill fw-semibold {{ $settings->mantenimiento == '1' ? 'btn-outline-danger' : 'btn-outline-primary' }}">
                        <i class="fa-solid fa-power-off me-1"></i>
                        @if($settings->mantenimiento == '1') Desactivar @else Activar @endif
                    </a>
                </div>
            </div>
        </div>
    </div>

</div>


{{-- ===================== TABS DE CONFIGURACIÓN ===================== --}}
<div class="card border-0 shadow-sm rounded-4">
    <div class="card-body p-3 p-md-4">

        {{-- Navegación por pestañas --}}
        <ul class="nav nav-pills gap-2 mb-4 flex-wrap" id="sistemaTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active fw-semibold rounded-pill px-3 py-2 d-inline-flex align-items-center gap-2"
                        id="tab-info" data-bs-toggle="pill" data-bs-target="#pane-info" type="button">
                    <i class="fa-solid fa-circle-info"></i> Información
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link fw-semibold rounded-pill px-3 py-2 d-inline-flex align-items-center gap-2"
                        id="tab-imagenes" data-bs-toggle="pill" data-bs-target="#pane-imagenes" type="button">
                    <i class="fa-regular fa-images"></i> Imágenes
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link fw-semibold rounded-pill px-3 py-2 d-inline-flex align-items-center gap-2"
                        id="tab-slider" data-bs-toggle="pill" data-bs-target="#pane-slider" type="button">
                    <i class="fa-solid fa-sliders"></i> Slider home
                    <span class="badge bg-primary-subtle text-primary-emphasis rounded-pill small">{{ count($component) }}</span>
                </button>
            </li>
        </ul>


        {{-- ===================== TAB CONTENT ===================== --}}
        <div class="tab-content">

            {{-- ───── INFORMACIÓN ───── --}}
            <div class="tab-pane fade show active" id="pane-info" role="tabpanel">

                <div class="d-flex align-items-center gap-2 mb-3">
                    <div class="bg-primary-subtle text-primary-emphasis rounded-3 d-inline-flex align-items-center justify-content-center"
                         style="width:36px;height:36px;">
                        <i class="fa-solid fa-sliders"></i>
                    </div>
                    <h5 class="fw-bold mb-0 text-dark">Información general</h5>
                </div>

                <form action="{{ route('setting-save-name') }}" method="post">
                    {{ csrf_field() }}

                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <label class="form-label fw-semibold text-secondary small">
                                <i class="fa-solid fa-signature text-secondary me-1"></i>
                                Nombre del sistema (*)
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-secondary">
                                    <i class="fa-solid fa-globe"></i>
                                </span>
                                <input class="form-control" type="text" name="namesystem" value="{{ $settings->name }}" required>
                            </div>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label fw-semibold text-secondary small">
                                <i class="fa-solid fa-cake-candles text-secondary me-1"></i>
                                Edad mínima para registro (*)
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-secondary">
                                    <i class="fa-solid fa-user-clock"></i>
                                </span>
                                <input class="form-control" type="number" name="edad_minima" value="{{ $settings->edad_minino }}" min="0" required>
                                <span class="input-group-text bg-light text-secondary">años</span>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="d-flex flex-column flex-sm-row gap-2 justify-content-end pt-3 border-top">
                                <button type="submit" class="btn btn-primary bg-gradient text-white rounded-pill px-4 fw-semibold shadow-sm">
                                    <i class="fa-solid fa-check me-1"></i> Guardar cambios
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>


            {{-- ───── IMÁGENES ───── --}}
            <div class="tab-pane fade" id="pane-imagenes" role="tabpanel">

                <div class="d-flex align-items-center gap-2 mb-3">
                    <div class="bg-primary-subtle text-primary-emphasis rounded-3 d-inline-flex align-items-center justify-content-center"
                         style="width:36px;height:36px;">
                        <i class="fa-regular fa-images"></i>
                    </div>
                    <h5 class="fw-bold mb-0 text-dark">Identidad visual</h5>
                </div>

                <p class="text-secondary small mb-4">
                    Sube las imágenes que representan tu plataforma. Cada slot tiene una dimensión recomendada propia.
                </p>

                <div class="row g-3">

                    {{-- Logo --}}
                    @include('setting.sistema.slot_imagen', [
                        'titulo'     => 'Logo del sistema',
                        'icono'      => 'fa-image',
                        'preview'    => asset('fondo/5.jpg'),
                        'dimension'  => '250 × 250 px',
                        'formatos'   => 'PNG, JPG, JPEG',
                        'route'      => route('setting-save-logo'),
                        'inputName'  => 'logo',
                        'inputId'    => 'formFilelogo',
                    ])

                    {{-- Favicon --}}
                    @include('setting.sistema.slot_imagen', [
                        'titulo'     => 'Favicon',
                        'icono'      => 'fa-icons',
                        'preview'    => asset('favicon.png'),
                        'dimension'  => '30 × 30 px',
                        'formatos'   => 'PNG, JPG, JPEG, ICO',
                        'route'      => route('setting-save-favicon'),
                        'inputName'  => 'favicon',
                        'inputId'    => 'formFilefavicon',
                    ])

                    {{-- Banner login --}}
                    @include('setting.sistema.slot_imagen', [
                        'titulo'     => 'Banner del login',
                        'icono'      => 'fa-right-to-bracket',
                        'preview'    => asset('assets/blanco.png'),
                        'dimension'  => '1920 × 1279 px',
                        'formatos'   => 'PNG, JPG, JPEG',
                        'route'      => route('setting-save-banner'),
                        'inputName'  => 'banner',
                        'inputId'    => 'formFilelogin',
                    ])

                    {{-- Banner formulario --}}
                    @include('setting.sistema.slot_imagen', [
                        'titulo'     => 'Banner del formulario',
                        'icono'      => 'fa-file-lines',
                        'preview'    => asset('assets/formulario.png'),
                        'dimension'  => '1920 × 1279 px',
                        'formatos'   => 'PNG, JPG, JPEG',
                        'route'      => route('setting-save-banner-formulario'),
                        'inputName'  => 'formulario',
                        'inputId'    => 'formFileformulario',
                    ])

                </div>
            </div>


            {{-- ───── SLIDER HOME ───── --}}
            <div class="tab-pane fade" id="pane-slider" role="tabpanel">

                <div class="d-flex align-items-center gap-2 mb-3">
                    <div class="bg-primary-subtle text-primary-emphasis rounded-3 d-inline-flex align-items-center justify-content-center"
                         style="width:36px;height:36px;">
                        <i class="fa-solid fa-sliders"></i>
                    </div>
                    <h5 class="fw-bold mb-0 text-dark">Slider del home</h5>
                </div>

                <p class="text-secondary small mb-3">
                    Estas imágenes rotan en el banner principal del sitio. Tamaño recomendado <strong class="text-dark">1237 × 400 px</strong>.
                </p>

                {{-- Galería actual --}}
                @if(count($component) > 0)
                    <div class="row g-3 mb-4">
                        @foreach($component as $item)
                            <div class="col-6 col-md-4 col-lg-3">
                                <div class="card border-0 shadow-sm rounded-3 overflow-hidden h-100 slider-item">
                                    <div class="position-relative" style="aspect-ratio:1237/400;background:#f8f9fc;">
                                        <img src="{{ asset('drop/'.$item->slider) }}"
                                             alt="slider"
                                             class="w-100 h-100"
                                             style="object-fit:cover;">
                                        <div class="slider-overlay position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
                                            <a href="{{ route('setting-delete-drop', $item->id) }}"
                                               class="btn btn-sm btn-danger rounded-pill px-3 fw-semibold shadow"
                                               onclick="return confirm('¿Eliminar esta imagen del slider?');">
                                                <i class="fa-solid fa-trash me-1"></i> Eliminar
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-4 mb-3 bg-light rounded-3">
                        <i class="fa-regular fa-image fs-2 text-secondary opacity-50"></i>
                        <p class="text-secondary small mb-0 mt-2">Aún no hay imágenes en el slider.</p>
                    </div>
                @endif

                {{-- Dropzone para subir nuevas --}}
                <form method="post" action="{{ route('setting-save-home') }}" enctype="multipart/form-data" class="dropzone sistema-dropzone" id="dropzone">
                    {{ csrf_field() }}

                    <div class="dz-message" data-dz-message>
                        <div class="bg-primary-subtle text-primary-emphasis rounded-circle d-inline-flex align-items-center justify-content-center mb-2"
                             style="width:62px;height:62px;">
                            <i class="fa-solid fa-cloud-arrow-up fs-3"></i>
                        </div>
                        <h6 class="fw-bold text-dark mb-1">Arrastra o haz clic para subir</h6>
                        <p class="text-secondary small mb-0">
                            Dimensión recomendada: <strong class="text-dark">1237 × 400 px</strong> · Formatos: PNG, JPG, JPEG, GIF
                        </p>
                    </div>
                </form>

            </div>

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


@endsection


@push('script')
<script type="text/javascript">

    $(document).ready(function () {
        if($('.summernote').length){
            $('.summernote').summernote({
                toolbar: [
                    ['style', ['style']],
                    ['font',  ['bold', 'underline', 'clear']],
                    ['color', ['color']],
                    ['para',  ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert',['link', 'picture']],
                    ['view',  ['fullscreen', 'codeview']]
                ]
            });
        }
    });

    // Mantengo la función por compatibilidad si la usan otros lados
    function mostrar(){
        $('.principal').toggle('slow');
    }

    if(typeof Dropzone !== 'undefined'){
        Dropzone.options.dropzone = {
            dictFallbackMessage: 'Lo sentimos su navegador no es compatible',
            dictCancelUploadConfirmation: '¿Está seguro que desea cancelar la subida del archivo?',
            dictCancelUpload: 'Cancelar',
            dictRemoveFile: 'Eliminar',
            paramName: 'archivo',
            maxFilesize: 20,
            maxfilesexceeded: function(file) {
                confirm('Ha superado el máximo de archivos subidos');
                this.removeAllFiles();
            },
            addRemoveLinks: true,
            acceptedFiles: '.jpeg,.jpg,.png,.gif',
            timeout: 600000,
            error: function(file, response){
                return false;
            }
        };
    }

</script>
@endpush