@extends('layouts.theme_selector')
@include('layouts.datatable')

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card shadow-sm border-0">
                    <div class="card-header border-bottom d-flex justify-content-between align-items-center py-3"
                        style="background-color: var(--bs-body-tertiary);">
                        <div class="d-flex align-items-center">
                            <a href="{{ url()->previous() }}" 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>
                                Usuarios Personalizados Ecommerce
                            </h5>
                        </div>
                        <a href="{{ route('EcommerceUsersCreate') }}" class="btn btn-primary btn-sm shadow-sm">
                            <i class="bi bi-plus-circle me-1"></i>
                            Nuevo eCommerce
                        </a>
                    </div>

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

                        <div class="table-responsive">
                            <table class="table table-hover align-middle" id="ecommerceUsersTable">
                                <thead class="bg-body-secondary">
                                    <tr>
                                        <th class="text-center" style="width: 60px;">ID</th>
                                        <th class="text-center" style="width: 80px;">Código</th>
                                        <th style="width: 100px;">Logo</th>
                                        <th>Usuario URL</th>
                                        <th class="text-center" style="width: 100px;">Estado</th>
                                        <th class="text-center" style="width: 180px;">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($users as $user)
                                        <tr class="{{ $user->activo == 0 ? 'table-secondary opacity-75' : '' }}">
                                            <td class="text-center">
                                                <span class="badge bg-secondary">{{ $user->id }}</span>
                                            </td>
                                            <td class="text-center">
                                                <span class="badge bg-primary">{{ $user->CodigoProductorCorto }}</span>
                                            </td>
                                            <td>
                                                @if($user->UrlLogo)
                                                    <img src="{{ $user->UrlLogo }}" alt="Logo" class="img-thumbnail logo-preview"
                                                        style="max-height: 50px; max-width: 80px; object-fit: contain; cursor: pointer;"
                                                        onclick="showLogoModal('{{ $user->UrlLogo }}')"
                                                        onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2250%22><rect fill=%22%23ddd%22 width=%22100%%22 height=%22100%%22/><text x=%2250%%22 y=%2250%%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%23999%22 font-size=%2212%22>No img</text></svg>'">
                                                @else
                                                    <span class="text-muted small">Sin logo</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar-circle-ecommerce me-2">
                                                        {{ strtoupper(substr($user->UsuarioUrl, 0, 1)) }}
                                                    </div>
                                                    <div class="d-flex align-items-center">
                                                        <code
                                                            class="text-primary fw-bold bg-body-secondary px-2 py-1 rounded me-2 url-text"
                                                            id="url-{{ $user->id }}"
                                                            style="font-size: 0.85rem;">https://ecommercesp.com.ar/{{ $user->UsuarioUrl }}</code>
                                                        <button type="button" class="btn btn-sm btn-outline-secondary btn-copy"
                                                            onclick="copyUrl('url-{{ $user->id }}')" title="Copiar URL">
                                                            <i class="bi bi-clipboard"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                @if($user->activo == 1)
                                                    <span class="badge bg-success-subtle text-success px-3 py-2">
                                                        <i class="bi bi-check-circle me-1"></i>Activo
                                                    </span>
                                                @else
                                                    <span class="badge bg-danger-subtle text-danger px-3 py-2">
                                                        <i class="bi bi-x-circle me-1"></i>Inactivo
                                                    </span>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                <div class="d-flex justify-content-center">
                                                    {{-- Toggle Active --}}
                                                    <form action="{{ route('EcommerceUsersToggleActive', $user->id) }}"
                                                        method="post" class="d-inline">
                                                        @csrf
                                                        <button type="submit"
                                                            class="btn btn-sm btn-action mx-1 {{ $user->activo == 1 ? 'btn-outline-secondary' : 'btn-outline-success' }}"
                                                            title="{{ $user->activo == 1 ? 'Desactivar' : 'Activar' }}">
                                                            <i class="bi {{ $user->activo == 1 ? 'bi-pause' : 'bi-play' }}"></i>
                                                        </button>
                                                    </form>

                                                    {{-- Edit --}}
                                                    <a href="{{ route('EcommerceUsersEdit', $user->id) }}"
                                                        class="btn btn-sm btn-action mx-1 btn-outline-primary" title="Editar">
                                                        <i class="bi bi-pencil"></i>
                                                    </a>

                                                    {{-- Delete --}}
                                                    <button type="button"
                                                        class="btn btn-sm btn-action mx-1 btn-outline-danger btn-delete"
                                                        data-user-id="{{ $user->id }}" data-user-name="{{ $user->UsuarioUrl }}"
                                                        title="Eliminar">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center py-5">
                                                <div class="text-muted">
                                                    <i class="bi bi-inbox fs-1 d-block mb-3"></i>
                                                    No hay usuarios registrados
                                                </div>
                                                <a href="{{ route('EcommerceUsersCreate') }}" class="btn btn-danger mt-3">
                                                    <i class="bi bi-plus-circle me-1"></i>
                                                    Crear primer eCommerce
                                                </a>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('modals')
    {{-- Modal de confirmación para eliminar --}}
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="deleteModalLabel">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        Confirmar eliminación
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body text-center py-4">
                    <i class="bi bi-trash-fill text-danger" style="font-size: 3rem;"></i>
                    <p class="mt-3 mb-0">
                        ¿Estás seguro de que deseas eliminar permanentemente a <strong id="deleteUserName"></strong>?
                    </p>
                    <small class="text-danger"><i class="bi bi-exclamation-circle me-1"></i>Esta acción no se puede
                        deshacer.</small>
                </div>
                <div class="modal-footer border-0 justify-content-center">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <form id="deleteForm" method="post" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">
                            <i class="bi bi-trash me-1"></i>
                            Eliminar permanentemente
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal para ver logo grande --}}
    <div class="modal fade" id="logoModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header">
                    <h5 class="modal-title">Vista previa del logo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center p-4">
                    <img id="logoModalImage" src="" alt="Logo" class="img-fluid" style="max-height: 400px;">
                </div>
            </div>
        </div>
    </div>
@endpush

@push('scripts')
    <style>
        .avatar-circle-ecommerce {
            width: 36px;
            height: 36px;
            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: 14px;
            flex-shrink: 0;
        }

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

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

        .table>tbody>tr:hover {
            background-color: rgba(var(--bs-primary-rgb), 0.075);
        }

        .btn-action {
            border-radius: 0.375rem !important;
            width: 32px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        .btn-action i {
            line-height: 1;
            font-size: 1.1rem;
        }

        .logo-preview {
            transition: transform 0.2s;
        }

        .logo-preview:hover {
            transform: scale(1.1);
        }

        /* Fix modal z-index */
        .modal {
            z-index: 1060 !important;
        }

        .modal-backdrop {
            z-index: 1050 !important;
        }

        /* DataTable customization */
        .dataTables_wrapper .dataTables_filter input {
            border-radius: 0.5rem;
            padding: 0.5rem 1rem;
            border: 1px solid var(--bs-border-color);
            background-color: var(--bs-body-bg);
            color: var(--bs-body-color);
        }

        .dataTables_wrapper .dataTables_filter input:focus {
            border-color: #e74c3c;
            box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25);
            outline: none;
        }

        .dataTables_wrapper .dataTables_length select {
            border-radius: 0.375rem;
            padding: 0.25rem 2rem 0.25rem 0.5rem;
            background-color: var(--bs-body-bg);
            color: var(--bs-body-color);
            border: 1px solid var(--bs-border-color);
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
            border-color: #e74c3c !important;
            color: white !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: var(--bs-tertiary-bg) !important;
            border-color: #e74c3c !important;
            color: #e74c3c !important;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            // Inicializar DataTable
            $('#ecommerceUsersTable').DataTable({
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/es-ES.json',
                    search: "_INPUT_",
                    searchPlaceholder: "Buscar...",
                    lengthMenu: "Mostrar _MENU_ registros",
                    info: "Mostrando _START_ a _END_ de _TOTAL_ registros",
                    infoEmpty: "Sin registros",
                    infoFiltered: "(filtrado de _MAX_ registros totales)",
                    paginate: {
                        first: "Primero",
                        last: "Último",
                        next: "Siguiente",
                        previous: "Anterior"
                    },
                    zeroRecords: "No se encontraron resultados"
                },
                pageLength: 10,
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "Todos"]],
                order: [[0, 'desc']],
                columnDefs: [
                    { orderable: false, targets: [2, 5] } // Logo y Acciones no ordenables
                ],
                dom: '<"row mb-3"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rtip'
            });

            // Modal de eliminar
            $('.btn-delete').on('click', function (e) {
                e.preventDefault();
                e.stopPropagation();

                var userId = $(this).data('user-id');
                var userName = $(this).data('user-name');

                $('#deleteUserName').text(userName);
                $('#deleteForm').attr('action', '{{ url("EcommerceUsers/Eliminar") }}/' + userId);

                var modalEl = document.getElementById('deleteModal');
                var modal = new bootstrap.Modal(modalEl);
                modal.show();
            });
        });

        function showLogoModal(logoUrl) {
            $('#logoModalImage').attr('src', logoUrl);
            var logoModal = new bootstrap.Modal(document.getElementById('logoModal'));
            logoModal.show();
        }

        function copyUrl(elementId) {
            var urlText = document.getElementById(elementId).innerText;
            navigator.clipboard.writeText(urlText).then(function () {
                // Cambiar icono temporalmente a check
                var btn = document.querySelector('[onclick="copyUrl(\'' + elementId + '\')"]');
                var originalHtml = btn.innerHTML;
                btn.innerHTML = '<i class="bi bi-check text-success"></i>';
                btn.classList.remove('btn-outline-secondary');
                btn.classList.add('btn-outline-success');

                setTimeout(function () {
                    btn.innerHTML = originalHtml;
                    btn.classList.remove('btn-outline-success');
                    btn.classList.add('btn-outline-secondary');
                }, 1500);
            });
        }
    </script>
@endpush