@extends('adminlte::page')

@section('title', 'Configuración | ' . $setting->site_name)

@section('content_header')
    <div class="settings-hero">
        <div>
            <span class="settings-label">
                <i class="bi bi-stars"></i>
                Personalización
            </span>

            <h1>Configuración del sistema</h1>

            <p>
                Administra la identidad y los datos de contacto de tu sitio.
            </p>
        </div>

        <div class="hero-icon">
            <i class="bi bi-sliders"></i>
        </div>
    </div>
@stop

@section('content')
    <form id="settingsForm"
          action="{{ route('admin.settings.update') }}"
          method="POST"
          enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="row g-4 pb-5">
            <div class="col-12 col-xl-8">
                <div class="card settings-card">
                    <div class="card-body p-4">
                        <h2 class="section-title">
                            <i class="bi bi-shop"></i>
                            Información general
                        </h2>

                        <div class="mb-4">
                            <label for="site_name" class="form-label">
                                Nombre del sitio
                            </label>

                            <input id="site_name"
                                   name="site_name"
                                   type="text"
                                   class="form-control form-control-lg"
                                   value="{{ $setting->site_name }}"
                                   maxlength="150"
                                   required>

                            <div class="field-error"
                                 data-error-for="site_name"></div>
                        </div>

                        <div>
                            <label for="description" class="form-label">
                                Descripción
                            </label>

                            <textarea id="description"
                                      name="description"
                                      class="form-control"
                                      rows="4"
                                      maxlength="1000"
                                      placeholder="Describe brevemente tu tienda...">{{ $setting->description }}</textarea>

                            <div class="field-error"
                                 data-error-for="description"></div>
                        </div>
                    </div>
                </div>

                <div class="card settings-card mt-4">
                    <div class="card-body p-4">
                        <h2 class="section-title">
                            <i class="bi bi-image"></i>
                            Identidad visual
                        </h2>

                        <div class="row g-4">
                            <div class="col-12 col-md-7">
                                <label class="form-label">
                                    Logo del sitio
                                </label>

                                <div class="upload-preview">
                                    <img id="logoPreview"
                                         src="{{ $setting->logo_url ?: '' }}"
                                         alt="Logo"
                                         class="{{ $setting->logo_url ? '' : 'd-none' }}">

                                    <div id="logoPlaceholder"
                                         class="preview-placeholder {{ $setting->logo_url ? 'd-none' : '' }}">
                                        <i class="bi bi-image"></i>
                                        <span>Sin logo</span>
                                    </div>
                                </div>

                                <input id="logo"
                                       name="logo"
                                       type="file"
                                       class="form-control mt-3"
                                       accept=".jpg,.jpeg,.png,.webp">

                                <div class="form-text">
                                    JPG, PNG o WEBP. Máximo 3 MB.
                                </div>

                                <div class="field-error"
                                     data-error-for="logo"></div>

                                <label class="form-check mt-3">
                                    <input id="removeLogo"
                                           name="remove_logo"
                                           type="checkbox"
                                           value="1"
                                           class="form-check-input">

                                    <span class="form-check-label">
                                        Quitar el logo actual
                                    </span>
                                </label>
                            </div>

                            <div class="col-12 col-md-5">
                                <label class="form-label">
                                    Favicon
                                </label>

                                <div class="favicon-preview">
                                    <img id="faviconPreview"
                                         src="{{ $setting->favicon_url ?: '' }}"
                                         alt="Favicon"
                                         class="{{ $setting->favicon_url ? '' : 'd-none' }}">

                                    <div id="faviconPlaceholder"
                                         class="{{ $setting->favicon_url ? 'd-none' : '' }}">
                                        <i class="bi bi-globe2"></i>
                                    </div>
                                </div>

                                <input id="favicon"
                                       name="favicon"
                                       type="file"
                                       class="form-control mt-3"
                                       accept=".ico,.png">

                                <div class="form-text">
                                    ICO o PNG. Máximo 1 MB.
                                </div>

                                <div class="field-error"
                                     data-error-for="favicon"></div>

                                <label class="form-check mt-3">
                                    <input id="removeFavicon"
                                           name="remove_favicon"
                                           type="checkbox"
                                           value="1"
                                           class="form-check-input">

                                    <span class="form-check-label">
                                        Quitar el favicon actual
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card settings-card mt-4">
                    <div class="card-body p-4">
                        <h2 class="section-title">
                            <i class="bi bi-chat-dots"></i>
                            Datos de contacto
                        </h2>

                        <div class="row g-4">
                            <div class="col-12 col-md-6">
                                <label for="email" class="form-label">
                                    Correo electrónico
                                </label>

                                <input id="email"
                                       name="email"
                                       type="email"
                                       class="form-control"
                                       value="{{ $setting->email }}"
                                       placeholder="contacto@compris.com">

                                <div class="field-error"
                                     data-error-for="email"></div>
                            </div>

                            <div class="col-12 col-md-6">
                                <label for="whatsapp" class="form-label">
                                    WhatsApp
                                </label>

                                <input id="whatsapp"
                                       name="whatsapp"
                                       type="text"
                                       class="form-control"
                                       value="{{ $setting->whatsapp }}"
                                       placeholder="+591 70000000">

                                <div class="field-error"
                                     data-error-for="whatsapp"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-xl-4">
                <div class="card settings-card preview-card">
                    <div class="card-body p-4">
                        <span class="preview-badge">
                            Vista previa
                        </span>

                        <div class="site-preview-logo mt-4">
                            <img id="sideLogoPreview"
                                 src="{{ $setting->logo_url ?: '' }}"
                                 alt="Logo"
                                 class="{{ $setting->logo_url ? '' : 'd-none' }}">

                            <div id="sideLogoPlaceholder"
                                 class="{{ $setting->logo_url ? 'd-none' : '' }}">
                                <i class="bi bi-bag-heart"></i>
                            </div>
                        </div>

                        <h3 id="previewSiteName">
                            {{ $setting->site_name }}
                        </h3>

                        <p id="previewDescription">
                            {{ $setting->description ?: 'Agrega una descripción para tu tienda.' }}
                        </p>

                        <div class="preview-line"></div>

                        <small>
                            Los cambios también se mostrarán en el login y
                            posteriormente en la tienda pública.
                        </small>
                    </div>
                </div>

                <button id="saveButton"
                        type="submit"
                        class="btn save-button">
                    <span class="spinner-border spinner-border-sm d-none me-2"></span>

                    <i class="bi bi-check2-circle button-icon me-2"></i>

                    <span class="button-text">
                        Guardar configuración
                    </span>
                </button>
            </div>
        </div>
    </form>
@stop

@section('css')
    <style>
        .settings-hero {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 28px 32px;
            color: #fff;
            border-radius: 24px;
            background: linear-gradient(135deg, #4937d4, #7c3aed 55%, #0ea5e9);
            box-shadow: 0 16px 35px rgba(73, 55, 212, .22);
        }

        .settings-hero h1 {
            margin: 8px 0;
            font-weight: 800;
        }

        .settings-hero p {
            margin: 0;
            color: rgba(255, 255, 255, .82);
        }

        .settings-label,
        .preview-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 12px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 700;
        }

        .settings-label {
            background: rgba(255, 255, 255, .16);
        }

        .hero-icon {
            width: 75px;
            height: 75px;
            display: grid;
            flex: 0 0 auto;
            place-items: center;
            border-radius: 24px;
            background: rgba(255, 255, 255, .15);
            font-size: 34px;
        }

        .settings-card {
            border: 0;
            border-radius: 22px;
            box-shadow: 0 10px 30px rgba(24, 31, 70, .08);
        }

        .section-title {
            display: flex;
            align-items: center;
            gap: 11px;
            margin-bottom: 25px;
            font-size: 19px;
            font-weight: 800;
        }

        .section-title i {
            color: #6d5dfc;
        }

        .form-control {
            border-radius: 13px;
        }

        .upload-preview {
            height: 170px;
            display: grid;
            place-items: center;
            overflow: hidden;
            border: 2px dashed #d9dbea;
            border-radius: 18px;
            background: #f8f8fc;
        }

        .upload-preview img {
            width: 100%;
            height: 100%;
            padding: 14px;
            object-fit: contain;
        }

        .preview-placeholder {
            display: grid;
            gap: 8px;
            color: #989caf;
            text-align: center;
        }

        .preview-placeholder i {
            font-size: 40px;
        }

        .favicon-preview {
            width: 110px;
            height: 110px;
            display: grid;
            place-items: center;
            overflow: hidden;
            border-radius: 25px;
            background: #f1f0ff;
        }

        .favicon-preview img {
            width: 75px;
            height: 75px;
            object-fit: contain;
        }

        .favicon-preview i {
            color: #6d5dfc;
            font-size: 42px;
        }

        .field-error {
            min-height: 20px;
            padding-top: 4px;
            color: #dc3545;
            font-size: 13px;
        }

        .preview-card {
            position: sticky;
            top: 85px;
            overflow: hidden;
            color: #fff;
            background: linear-gradient(145deg, #17182d, #27294d);
        }

        .preview-badge {
            color: #dcd8ff;
            background: rgba(109, 93, 252, .2);
        }

        .site-preview-logo {
            width: 78px;
            height: 78px;
            display: grid;
            place-items: center;
            overflow: hidden;
            border-radius: 22px;
            background: rgba(255, 255, 255, .12);
        }

        .site-preview-logo img {
            width: 100%;
            height: 100%;
            padding: 8px;
            object-fit: contain;
            background: #fff;
        }

        .site-preview-logo i {
            font-size: 35px;
        }

        .preview-card h3 {
            margin: 22px 0 10px;
            font-size: 28px;
            font-weight: 800;
        }

        .preview-card p,
        .preview-card small {
            color: rgba(255, 255, 255, .67);
        }

        .preview-line {
            height: 1px;
            margin: 25px 0;
            background: rgba(255, 255, 255, .12);
        }

        .save-button {
            position: sticky;
            top: 440px;
            width: 100%;
            margin-top: 20px;
            padding: 15px;
            color: #fff;
            border: 0;
            border-radius: 16px;
            background: linear-gradient(135deg, #6d5dfc, #4937d4);
            box-shadow: 0 13px 25px rgba(73, 55, 212, .22);
            font-weight: 700;
        }

        .save-button:hover {
            color: #fff;
            transform: translateY(-1px);
        }

        @media (max-width: 767px) {
            .settings-hero {
                padding: 23px;
            }

            .hero-icon {
                display: none;
            }

            .preview-card,
            .save-button {
                position: static;
            }
        }
    </style>
@stop

@section('js')
    @vite('resources/js/app.js')

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (!window.jQuery || !window.Swal) {
                return;
            }

            const $ = window.jQuery;
            const $form = $('#settingsForm');
            const $button = $('#saveButton');

            let savedLogoUrl = @json($setting->logo_url);
            let savedFaviconUrl = @json($setting->favicon_url);

            function setPreview(image, placeholder, url) {
                if (url) {
                    $(image).attr('src', url).removeClass('d-none');
                    $(placeholder).addClass('d-none');
                } else {
                    $(image).attr('src', '').addClass('d-none');
                    $(placeholder).removeClass('d-none');
                }
            }

            function previewSelectedFile(input, image, placeholder) {
                const file = input.files[0];

                if (!file) {
                    return;
                }

                setPreview(
                    image,
                    placeholder,
                    URL.createObjectURL(file)
                );
            }

            $('#logo').on('change', function () {
                $('#removeLogo').prop('checked', false);

                previewSelectedFile(
                    this,
                    '#logoPreview',
                    '#logoPlaceholder'
                );

                previewSelectedFile(
                    this,
                    '#sideLogoPreview',
                    '#sideLogoPlaceholder'
                );
            });

            $('#favicon').on('change', function () {
                $('#removeFavicon').prop('checked', false);

                previewSelectedFile(
                    this,
                    '#faviconPreview',
                    '#faviconPlaceholder'
                );
            });

            $('#removeLogo').on('change', function () {
                if (this.checked) {
                    $('#logo').val('');

                    setPreview(
                        '#logoPreview',
                        '#logoPlaceholder',
                        null
                    );

                    setPreview(
                        '#sideLogoPreview',
                        '#sideLogoPlaceholder',
                        null
                    );
                } else {
                    setPreview(
                        '#logoPreview',
                        '#logoPlaceholder',
                        savedLogoUrl
                    );

                    setPreview(
                        '#sideLogoPreview',
                        '#sideLogoPlaceholder',
                        savedLogoUrl
                    );
                }
            });

            $('#removeFavicon').on('change', function () {
                if (this.checked) {
                    $('#favicon').val('');

                    setPreview(
                        '#faviconPreview',
                        '#faviconPlaceholder',
                        null
                    );
                } else {
                    setPreview(
                        '#faviconPreview',
                        '#faviconPlaceholder',
                        savedFaviconUrl
                    );
                }
            });

            $('#site_name').on('input', function () {
                $('#previewSiteName').text(
                    this.value.trim() || 'Nombre del sitio'
                );
            });

            $('#description').on('input', function () {
                $('#previewDescription').text(
                    this.value.trim() || 'Agrega una descripción para tu tienda.'
                );
            });

            $form.on('submit', function (event) {
                event.preventDefault();

                $('.field-error').text('');
                $('.is-invalid').removeClass('is-invalid');

                $button.prop('disabled', true);
                $button.find('.spinner-border').removeClass('d-none');
                $button.find('.button-icon').addClass('d-none');
                $button.find('.button-text').text('Guardando...');

                $.ajax({
                    url: this.action,
                    type: 'POST',
                    data: new FormData(this),
                    processData: false,
                    contentType: false,
                    headers: {
                        Accept: 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function (response) {
                        savedLogoUrl = response.data.logo_url;
                        savedFaviconUrl = response.data.favicon_url;

                        setPreview(
                            '#logoPreview',
                            '#logoPlaceholder',
                            savedLogoUrl
                        );

                        setPreview(
                            '#sideLogoPreview',
                            '#sideLogoPlaceholder',
                            savedLogoUrl
                        );

                        setPreview(
                            '#faviconPreview',
                            '#faviconPlaceholder',
                            savedFaviconUrl
                        );

                        $('#logo, #favicon').val('');
                        $('#removeLogo, #removeFavicon').prop('checked', false);

                        Swal.fire({
                            icon: 'success',
                            title: '¡Configuración guardada!',
                            text: response.message,
                            timer: 1700,
                            showConfirmButton: false,
                            timerProgressBar: true
                        });
                    },
                    error: function (xhr) {
                        const errors = xhr.responseJSON?.errors ?? {};

                        Object.entries(errors).forEach(function ([field, messages]) {
                            const $field = $('[name="' + field + '"]').first();

                            $field.addClass('is-invalid');

                            $('[data-error-for="' + field + '"]')
                                .text(messages[0]);
                        });

                        Swal.fire({
                            icon: 'error',
                            title: 'No se pudo guardar',
                            text: xhr.status === 422
                                ? 'Revisa los campos señalados.'
                                : (xhr.responseJSON?.message
                                    ?? 'Ocurrió un error inesperado.'),
                            confirmButtonText: 'Entendido',
                            confirmButtonColor: '#6d5dfc'
                        });
                    },
                    complete: function () {
                        $button.prop('disabled', false);
                        $button.find('.spinner-border').addClass('d-none');
                        $button.find('.button-icon').removeClass('d-none');
                        $button.find('.button-text')
                            .text('Guardar configuración');
                    }
                });
            });
        });
    </script>
@stop