@extends('layouts.theme_selector')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card shadow-sm border-0">
                    <div class="card-header border-bottom d-flex align-items-center py-3"
                        style="background-color: var(--bs-body-tertiary);">
                        <a href="{{ route('EcommerceUsersIndex') }}" class="text-body-emphasis me-3">
                            <i class="bi bi-arrow-left-circle fs-4"></i>
                        </a>
                        <h5 class="mb-0 text-body-emphasis fw-bold">
                            <i class="bi bi-shop me-2"></i>
                            Nuevo Usuario Ecommerce
                        </h5>
                    </div>

                    <div class="card-body p-4">
                        @include('layouts.alerts.error')

                        <form action="{{ route('EcommerceUsersStore') }}" method="post" enctype="multipart/form-data"
                            id="createForm">
                            @csrf

                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <label for="CodigoProductorCorto" class="form-label fw-bold">
                                        <i class="bi bi-hash me-1 text-danger"></i>
                                        Código Productor Corto
                                    </label>
                                    <input type="number"
                                        class="form-control form-control-lg @error('CodigoProductorCorto') is-invalid @enderror"
                                        id="CodigoProductorCorto" name="CodigoProductorCorto"
                                        value="{{ old('CodigoProductorCorto') }}" placeholder="Ej: 123" required autofocus>
                                    @error('CodigoProductorCorto')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-4">
                                    <label for="UsuarioUrl" class="form-label fw-bold">
                                        <i class="bi bi-link-45deg me-1 text-danger"></i>
                                        Usuario URL
                                    </label>
                                    <input type="text"
                                        class="form-control form-control-lg @error('UsuarioUrl') is-invalid @enderror"
                                        id="UsuarioUrl" name="UsuarioUrl" value="{{ old('UsuarioUrl') }}"
                                        placeholder="Ej: mitienda" required>
                                    @error('UsuarioUrl')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Sección Logo --}}
                            <div class="mb-4">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-image me-1 text-danger"></i>
                                    Logo
                                </label>

                                <div class="card bg-body-tertiary border-0">
                                    <div class="card-body">
                                        {{-- Selector de tipo --}}
                                        <div class="btn-group w-100 mb-3" role="group">
                                            <input type="radio" class="btn-check" name="logo_type" id="logoTypeUrl"
                                                value="url" checked>
                                            <label class="btn btn-outline-danger" for="logoTypeUrl">
                                                <i class="bi bi-link-45deg me-1"></i>
                                                Ingresar URL
                                            </label>

                                            <input type="radio" class="btn-check" name="logo_type" id="logoTypeUpload"
                                                value="upload">
                                            <label class="btn btn-outline-danger" for="logoTypeUpload">
                                                <i class="bi bi-upload me-1"></i>
                                                Subir imagen
                                            </label>
                                        </div>

                                        {{-- Input URL --}}
                                        <div id="urlInputContainer">
                                            <input type="url" class="form-control @error('UrlLogo') is-invalid @enderror"
                                                id="UrlLogo" name="UrlLogo" value="{{ old('UrlLogo') }}"
                                                placeholder="https://ejemplo.com/logo.png">
                                            @error('UrlLogo')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        {{-- Input Upload --}}
                                        <div id="uploadInputContainer" style="display: none;">
                                            <div class="input-group">
                                                <input type="file"
                                                    class="form-control @error('logo_file') is-invalid @enderror"
                                                    id="logo_file" name="logo_file" accept="image/*">
                                                <button class="btn btn-outline-secondary" type="button"
                                                    onclick="clearFileInput()">
                                                    <i class="bi bi-x-lg"></i>
                                                </button>
                                            </div>
                                            <small class="text-body-secondary">Formatos: JPG, PNG, GIF, WebP. Máx:
                                                2MB</small>
                                            @error('logo_file')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror

                                            {{-- Preview --}}
                                            <div id="imagePreview" class="mt-3 text-center" style="display: none;">
                                                <img id="previewImg" src="" alt="Preview" class="img-thumbnail"
                                                    style="max-height: 150px;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr class="my-4">

                            <div class="d-flex justify-content-between">
                                <a href="{{ route('EcommerceUsersIndex') }}" class="btn btn-outline-secondary px-4">
                                    <i class="bi bi-x-lg me-1"></i>
                                    Cancelar
                                </a>
                                <button type="submit" class="btn btn-danger btn-lg px-5 shadow-sm">
                                    <i class="bi bi-check-lg me-2"></i>
                                    Crear Ecommerce
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript">
        $(document).ready(function () {
            // Toggle entre URL y Upload
            $('input[name="logo_type"]').on('change', function () {
                if ($(this).val() === 'url') {
                    $('#urlInputContainer').show();
                    $('#uploadInputContainer').hide();
                    $('#logo_file').val('');
                    $('#imagePreview').hide();
                } else {
                    $('#urlInputContainer').hide();
                    $('#uploadInputContainer').show();
                    $('#UrlLogo').val('');
                }
            });

            // Preview de imagen
            $('#logo_file').on('change', function () {
                var file = this.files[0];
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $('#previewImg').attr('src', e.target.result);
                        $('#imagePreview').show();
                    }
                    reader.readAsDataURL(file);
                }
            });

            // Submit loading
            $('#createForm').on('submit', function () {
                $(this).find('button[type="submit"]')
                    .prop('disabled', true)
                    .html('<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Creando...');
            });
        });

        function clearFileInput() {
            $('#logo_file').val('');
            $('#imagePreview').hide();
        }
    </script>

    <style>
        .form-control:focus {
            border-color: #e74c3c;
            box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25);
        }

        .btn-danger {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
            border: none;
        }

        .btn-danger:hover {
            background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
        }

        .btn-check:checked+.btn-outline-danger {
            background-color: #e74c3c;
            border-color: #e74c3c;
        }
    </style>
@endpush