@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-pencil-square me-2"></i>
                            Editar Usuario Ecommerce
                        </h5>
                    </div>

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

                        {{-- Info del usuario --}}
                        <div class="row mb-4 align-items-center">
                            <div class="col-auto">
                                @if($user->UrlLogo)
                                    <img src="{{ $user->UrlLogo }}" alt="Logo" class="img-thumbnail" style="max-height: 60px;">
                                @else
                                    <div class="avatar-circle-lg-ecommerce">
                                        {{ strtoupper(substr($user->UsuarioUrl, 0, 1)) }}
                                    </div>
                                @endif
                            </div>
                            <div class="col">
                                <h4 class="mb-1">{{ $user->UsuarioUrl }}</h4>
                                <span class="text-body-secondary">
                                    <i class="bi bi-hash me-1"></i>
                                    Código: {{ $user->CodigoProductorCorto }}
                                </span>
                            </div>
                            <div class="col-auto">
                                @if($user->activo == 1)
                                    <span class="badge bg-success-subtle text-success px-3 py-2 fs-6">
                                        <i class="bi bi-check-circle me-1"></i>Activo
                                    </span>
                                @else
                                    <span class="badge bg-danger-subtle text-danger px-3 py-2 fs-6">
                                        <i class="bi bi-x-circle me-1"></i>Inactivo
                                    </span>
                                @endif
                            </div>
                        </div>

                        <hr class="my-4">

                        <form action="{{ route('EcommerceUsersUpdate', $user->id) }}" method="post"
                            enctype="multipart/form-data" id="editForm">
                            @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', $user->CodigoProductorCorto) }}" required>
                                    @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', $user->UsuarioUrl) }}"
                                        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>

                                {{-- Logo actual --}}
                                @if($user->UrlLogo)
                                    <div class="alert alert-secondary border-0 d-flex align-items-center mb-3">
                                        <img src="{{ $user->UrlLogo }}" alt="Logo actual" class="img-thumbnail me-3"
                                            style="max-height: 80px;">
                                        <div>
                                            <strong>Logo actual</strong>
                                            <br>
                                            <small
                                                class="text-body-secondary text-break">{{ Str::limit($user->UrlLogo, 60) }}</small>
                                        </div>
                                    </div>
                                @endif

                                <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="logoTypeKeep"
                                                value="keep" checked>
                                            <label class="btn btn-outline-secondary" for="logoTypeKeep">
                                                <i class="bi bi-check-lg me-1"></i>
                                                Mantener actual
                                            </label>

                                            <input type="radio" class="btn-check" name="logo_type" id="logoTypeUrl"
                                                value="url">
                                            <label class="btn btn-outline-danger" for="logoTypeUrl">
                                                <i class="bi bi-link-45deg me-1"></i>
                                                Nueva 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" style="display: none;">
                                            <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-arrow-left me-1"></i>
                                    Volver
                                </a>
                                <button type="submit" class="btn btn-danger btn-lg px-5 shadow-sm">
                                    <i class="bi bi-check-lg me-2"></i>
                                    Guardar Cambios
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript">
        $(document).ready(function () {
            // Toggle entre mantener, URL y Upload
            $('input[name="logo_type"]').on('change', function () {
                var value = $(this).val();

                $('#urlInputContainer').hide();
                $('#uploadInputContainer').hide();

                if (value === 'url') {
                    $('#urlInputContainer').show();
                    $('#logo_file').val('');
                    $('#imagePreview').hide();
                } else if (value === 'upload') {
                    $('#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
            $('#editForm').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>Guardando...');
            });
        });

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

    <style>
        .avatar-circle-lg-ecommerce {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 24px;
        }

        .bg-success-subtle {
            background-color: rgba(25, 135, 84, 0.15) !important;
        }

        .bg-danger-subtle {
            background-color: rgba(220, 53, 69, 0.15) !important;
        }

        .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