@extends('layouts.app', ['activePage' => 'abonos', 'menuParent' => 'consultas', 'titlePage' => __('Contabilidad - Detalles de depósito')])
@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-4">
            <div class="col-6">
                <h6 class="text-xl font-semibold text-gray-800">Detalles de depósito</h6>
            </div>
            <div class="col-6 text-right">
                <a href="{{ route($tipoComprobante == 'abonos' ? 'depositos.index' : 'pagos.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Volver
                </a>
            </div>
        </div>
        <div class="row">
            <!-- Columna izquierda - Detalles del depósito -->
            <div class="col-md-8">
                <div class="bg-white rounded-lg shadow-md">
                    <div class="p-6" id="contenido-deposito">
                        <!-- El contenido se cargará dinámicamente -->
                        <div class="text-center py-8">
                            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 mx-auto"></div>
                            <p class="mt-4 text-gray-600">Cargando información del depósito...</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Columna derecha - Acciones -->
            <div class="col-md-4">
                <div class="bg-white rounded-lg shadow-md mb-4">
                    <div class="p-6">
                        <div class="flex justify-end mb-4">
                            <button onclick="getDeposito()" class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
                                <svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                </svg>
                                Recargar información
                            </button>
                        </div>
                        <div class="space-y-4" id="acciones-deposito">
                            <!-- Las acciones se cargarán dinámicamente -->
                            <div class="text-center py-4">
                                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection--single {
        height: 40px !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
    }
</style>
@endsection

@push('js')
<script>
    // Variables globales
    var id_deposito = parseInt('{{ $id }}');
    var tipo_deposito = '{{ $tipoComprobante }}';
    var routesArrDetalles = {
        abonos: {
            'index': '{{route("depositos.index")}}',
            'get-deposito-datalles': '{{route("depositos.get-deposito-datalles")}}',
            'detalles-factura': '{{route("ventas.detalles-factura", ["id" => ":id"])}}'
        },
        pagos: {
            'index': '{{route("pagos.index")}}',
            'get-deposito-datalles': '{{route("pagos.get-pago-datalles")}}',
            'detalles-factura': '{{route("ventas.detalles-factura", ["id" => ":id"])}}'
        }
    };

    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $('.select2').select2({
            placeholder: "-Selecciona-",
            width: '100%',
        });

        getDeposito();
    });

    function getDeposito() {
        validateExistDeposito();
        $.ajax({
            url: routesArrDetalles[tipo_deposito]['get-deposito-datalles'],
            type: 'POST',
            data: {
                id: id_deposito,
            },
            beforeSend: function() {
                $('#loadingLoad').modal('show');
            },
            success: function(response) {
                const data = response;
                renderizarDeposito(data);
                renderizarAcciones(data);
            },
            error: function(response) {
                Swal.fire({
                    icon: 'error',
                    title: 'Atención',
                    html: '<div class="text-gray-700">No se puede obtener la información, debido a: <span class="font-semibold text-red-500">' + response.responseJSON.message + '</span></div>',
                    confirmButtonColor: '#0A415F',
                    confirmButtonText: 'Cerrar'
                });
            },
            complete: function() {
                setTimeout(() => {
                    $('#loadingLoad').modal('hide');
                }, 1000);
            }
        });
    }

    function renderizarDeposito(data) {
        let html = `
            <!-- Encabezado del Depósito -->
            <div class="grid grid-cols-1 gap-6 mb-6">
                <!-- Información del Cliente -->
                <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                    <div class="flex items-center mb-3">
                        <svg class="h-5 w-5 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                        <h3 class="text-lg font-semibold text-gray-700">Cliente</h3>
                    </div>
                    <div class="space-y-2">
                        <p class="text-sm text-gray-600"><span class="font-medium">Razón Social:</span> ${data.cliente ? data.cliente.razon_social : 'N/A'}</p>
                        <p class="text-sm text-gray-600"><span class="font-medium">RFC:</span> ${data.cliente ? data.cliente.rfc : 'N/A'}</p>
                    </div>
                </div>
            </div>

            <!-- Detalles del Depósito -->
            <div class="bg-gray-50 p-4 rounded-lg mb-6 border border-gray-200">
                <div class="flex items-center mb-3">
                    <svg class="h-5 w-5 text-purple-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                    <h3 class="text-lg font-semibold text-gray-700">Información del depósito</h3>
                </div>
                <div class="grid grid-cols-3 gap-4">
                    <div>
                        <p class="text-sm text-gray-600"><span class="font-medium">ID:</span> ${data.id}</p>
                        <p class="text-sm text-gray-600"><span class="font-medium">Fecha:</span> ${new Date(data.fecha).toLocaleDateString('es-MX')}</p>
                        <p class="text-sm text-gray-600"><span class="font-medium">Estatus:</span> ${data.estatus == 1 ? '<span class="text-green-600 font-medium">Activo</span>' : '<span class="text-red-600 font-medium">Cancelado</span>'}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600"><span class="font-medium">Forma de pago:</span> ${data.formaPago ? data.formaPago.nombre : 'N/A'}</p>
                        <p class="text-sm text-gray-600"><span class="font-medium">Moneda:</span> ${data.moneda ? data.moneda.nombre : 'N/A'}</p>
                        <p class="text-sm text-gray-600"><span class="font-medium">Tipo cambio:</span> ${data.tipo_cambio || 'N/A'}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600"><span class="font-medium">Facturado:</span> ${data.facturado ? 'Sí' : 'No'}</p>
                        <p class="text-sm text-gray-600"><span class="font-medium">Creado:</span> ${new Date(data.created_at).toLocaleDateString('es-MX')}</p>
                        <p class="text-sm text-gray-600"><span class="font-medium">Actualizado:</span> ${new Date(data.updated_at).toLocaleDateString('es-MX')}</p>
                    </div>
                </div>
            </div>

            <!-- Montos -->
            <div class="mb-6">
                <div class="flex items-center mb-3">
                    <h3 class="text-lg font-semibold text-gray-700">Montos</h3>
                </div>
                <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 p-6">
                        <div class="text-center">
                            <p class="text-sm text-gray-500 mb-1">Subtotal</p>
                            <p class="text-lg font-semibold text-gray-700">$${Number(data.subtotal).toLocaleString('es-MX', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</p>
                        </div>
                        <div class="text-center">
                            <p class="text-sm text-gray-500 mb-1">IVA</p>
                            <p class="text-lg font-semibold text-gray-700">$${Number(data.iva).toLocaleString('es-MX', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</p>
                        </div>
                        <div class="text-center">
                            <p class="text-sm text-gray-500 mb-1">IVA Retenido</p>
                            <p class="text-lg font-semibold text-gray-700">$${Number(data.ivar || 0).toLocaleString('es-MX', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</p>
                        </div>
                        <div class="text-center">
                            <p class="text-sm text-gray-500 mb-1">ISR</p>
                            <p class="text-lg font-semibold text-gray-700">$${Number(data.isr || 0).toLocaleString('es-MX', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</p>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-6 py-4 border-t border-gray-200">
                        <div class="flex justify-between items-center">
                            <span class="text-lg font-semibold text-gray-700">Total</span>
                            <span class="text-xl font-bold text-blue-600">$${Number(data.monto).toLocaleString('es-MX', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</span>
                        </div>
                        ${data.monto_moneda_extranjera ? `
                            <div class="flex justify-between items-center mt-2">
                                <span class="text-sm text-gray-500">Monto en moneda extranjera</span>
                                <span class="text-sm font-medium text-gray-600">$${Number(data.monto_moneda_extranjera).toLocaleString('es-MX', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</span>
                            </div>
                        ` : ''}
                    </div>
                </div>
            </div>

            <!-- Facturas Relacionadas -->
            <div class="mb-6">
                <div class="flex items-center mb-3">
                    <h3 class="text-lg font-semibold text-gray-700">Facturas relacionadas</h3>
                </div>
                ${data.facturas && data.facturas.length > 0 ? `
                    <div class="overflow-x-auto rounded-lg border border-gray-200">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Serie</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Folio</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">UUID</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Monto aplicado</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                ${data.facturas.map(depositoFactura => `
                                    <tr class="hover:bg-gray-50 cursor-pointer" onclick="redirectToFactura(${depositoFactura.factura.id})">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${depositoFactura.factura ? depositoFactura.factura.serie : 'N/A'}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${depositoFactura.factura ? depositoFactura.factura.folio : 'N/A'}</td>
                                        <td class="px-6 py-4 text-sm text-gray-500">${depositoFactura.factura ? depositoFactura.factura.uuid : 'N/A'}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${Number(depositoFactura.monto).toLocaleString('es-MX', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${new Date(depositoFactura.created_at).toLocaleDateString('es-MX')}</td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                ` : `
                    <div class="bg-white border border-gray-200 rounded-lg p-6 text-center">
                        <svg class="h-12 w-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                        <p class="text-gray-500">No hay facturas relacionadas con este depósito</p>
                    </div>
                `}
            </div>
        `;
        $('#contenido-deposito').html(html);
    }

    function renderizarAcciones(data) {
        let html = '';

        // Contenedor para los botones en fila
        html += `<div class="space-y-3">`;

        // Tarjeta de Estado del Depósito
        html += `
            <div class="bg-white border border-gray-200 rounded-lg p-3">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        ${data.estatus == 1 ? `
                            <svg class="h-6 w-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        ` : `
                            <svg class="h-6 w-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        `}
                    </div>
                    <div class="ml-3 flex-1">
                        <div class="flex items-center justify-between">
                            <h3 class="text-sm font-medium text-gray-700">Estado del depósito</h3>
                            <span class="px-2 py-0.5 text-xs font-medium ${data.estatus == 1 ? 'text-green-600 bg-green-50' : 'text-red-600 bg-red-50'} rounded-full">
                                ${data.estatus == 1 ? 'Activo' : 'Cancelado'}
                            </span>
                        </div>
                        <div class="mt-1 text-xs text-gray-500">
                            <span class="font-medium">Total:</span> $${Number(data.monto).toLocaleString('es-MX', {minimumFractionDigits: 2, maximumFractionDigits: 2})}
                        </div>
                    </div>
                </div>
            </div>
        `;

        // Botones de acción
        html += `<div class="grid grid-cols-2 gap-3">`;

        // Botón para editar depósito
        html += `
            <button onclick="editarDeposito(${data.id})" class="aspect-square flex flex-col items-center justify-center px-3 py-2 border border-gray-200 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200">
                <svg class="h-6 w-6 mb-1 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                </svg>
                <span class="text-xs">Editar</span>
            </button>
        `;

        // Botón para cancelar depósito (solo si está activo)
        if (data.estatus == 1) {
            html += `
                <button onclick="cancelarDeposito(${data.id})" class="aspect-square flex flex-col items-center justify-center px-3 py-2 border border-gray-200 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all duration-200">
                    <svg class="h-6 w-6 mb-1 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                    <span class="text-xs">Cancelar</span>
                </button>
            `;
        } else {
            html += `
                <button disabled class="aspect-square flex flex-col items-center justify-center px-3 py-2 border border-gray-200 rounded-lg shadow-sm text-sm font-medium text-gray-400 bg-gray-50 cursor-not-allowed">
                    <svg class="h-6 w-6 mb-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                    <span class="text-xs">Cancelado</span>
                </button>
            `;
        }

        html += `</div></div>`;

        $('#acciones-deposito').html(html);
    }

    function validateExistDeposito() {
        if (!id_deposito) {
            Swal.fire({
                icon: 'error',
                title: 'Atención',
                html: '<div class="text-gray-700"><span class="font-semibold text-red-500">No es posible acceder a la información del depósito</span></div>',
                confirmButtonColor: '#0A415F',
                confirmButtonText: 'Volver',
                showCancelButton: true,
                cancelButtonText: 'Cerrar',
                cancelButtonColor: '#6B7280'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = routesArrDetalles[tipo_deposito]['index'];
                }
            });
        }
    }

    function editarDeposito(id) {
        window.location.href = `/operaciones/deposito/${id}`;
    }

    function cancelarDeposito(id) {
        Swal.fire({
            icon: 'warning',
            title: '¿Estás seguro?',
            html: '<div class="text-gray-700">¿Deseas cancelar este depósito? Esta acción no se puede deshacer.</div>',
            confirmButtonColor: '#dc2626',
            confirmButtonText: 'Sí, cancelar',
            showCancelButton: true,
            cancelButtonText: 'No, mantener',
            cancelButtonColor: '#6B7280'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/operaciones/cancela_deposito',
                    type: 'POST',
                    data: {
                        id: id
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Éxito',
                            text: 'Depósito cancelado correctamente',
                            confirmButtonColor: '#0A415F'
                        }).then(() => {
                            getDeposito();
                        });
                    },
                    error: function(response) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.responseJSON.message || 'Error al cancelar el depósito',
                            confirmButtonColor: '#0A415F'
                        });
                    }
                });
            }
        });
    }

    function redirectToFactura(id) {
        window.open(routesArrDetalles[tipo_deposito]['detalles-factura'].replace(':id', id), '_blank');
    }
</script>
@endpush