@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="{{asset('plugins/slim-select/slimselect.min.css') }}">

<style>
    /* CORRECCIÓN VISUAL SLIMSELECT + BOOTSTRAP 5 */
    .ss-main {
        background-color: #fff !important;
        color: #495057 !important;
        border: 1px solid #ced4da !important;
        padding: 0.375rem 0.75rem !important;
        height: auto !important;
        border-radius: 0.375rem !important;
        /* Radio de BS5 */
    }

    .ss-main .ss-single-selected {
        border: none !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        color: #495057 !important;
    }

    /* Eliminar el conflicto del placeholder/skeleton */
    .ss-main .ss-single-selected .placeholder {
        background-color: transparent !important;
        opacity: 1 !important;
        cursor: pointer !important;
        min-height: auto !important;
        display: block !important;
    }

    .ss-content {
        z-index: 1060 !important;
        /* Encima de modales */
    }

    /* Estilo para pestañas activas */
    .nav-pills .nav-link.active {
        background-color: #0d6efd;
        /* Primary BS5 */
    }
</style>
@endsection

@section('content')

<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold text-primary mb-0"><i class="fas fa-user-circle me-2"></i>{{$cliente->nombre}}</h4>
            <small class="text-muted">Gestión de perfil y cuenta corriente</small>
        </div>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-success shadow-sm" data-bs-toggle="modal" data-bs-target="#credito">
                <i class="fas fa-plus-circle me-1"></i> Añadir Crédito
            </button>
            <button type="button" class="btn btn-primary shadow-sm" data-bs-toggle="modal" data-bs-target="#abonos">
                <i class="fas fa-hand-holding-usd me-1"></i> Nuevo Abono
            </button>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white border-bottom-0 pt-4 px-4">
                    <ul class="nav nav-pills card-header-pills" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active text-capitalize" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">
                                <i class="fas fa-id-card me-1"></i> Datos del Cliente
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-deuda-tab" data-bs-toggle="pill" data-bs-target="#pills-deuda" type="button" role="tab" aria-controls="pills-deuda" aria-selected="false">
                                <i class="fas fa-history me-1"></i> Historial de Crédito
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-credito-tab" data-bs-toggle="pill" data-bs-target="#pills-credito" type="button" role="tab" aria-controls="pills-credito" aria-selected="false">
                                <i class="fas fa-chart-line me-1"></i> Reportes
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">
                                <i class="fas fa-edit me-1"></i> Actualizar
                            </button>
                        </li>
                    </ul>
                </div>

                <div class="card-body p-4">
                    <div class="tab-content" id="pills-tabContent">

                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                            <div class="row justify-content-center">
                                <div class="col-md-8 text-center">
                                    <div class="card bg-light border-0 mb-4">
                                        <div class="card-body py-5">
                                            <div class="display-1 text-secondary mb-3"><i class="fas fa-user"></i></div>
                                            <h2 class="text-uppercase fw-bold">{{$cliente->nombre}}</h2>
                                            <hr class="w-50 mx-auto my-3">
                                            <div class="row text-start mt-4">
                                                <div class="col-md-6 mb-2"><strong><i class="fas fa-map-marker-alt text-danger me-2"></i>Dirección:</strong> {{$cliente->direccion}}</div>
                                                <div class="col-md-6 mb-2"><strong><i class="fas fa-hashtag text-secondary me-2"></i>NIT:</strong> {{$cliente->nit}}</div>
                                                <div class="col-md-6 mb-2"><strong><i class="fas fa-phone text-success me-2"></i>Teléfono:</strong> {{$cliente->telefono1}}</div>
                                                <div class="col-md-6 mb-2"><strong><i class="fas fa-mobile-alt text-success me-2"></i>Teléfono 2:</strong> {{$cliente->telefono2}}</div>
                                            </div>
                                        </div>
                                    </div>



                                    <div class="alert alert-info d-inline-block px-5 py-3 shadow-sm">
                                        <span class="h4 m-0 fw-bold">Total Deuda: <span class="text-danger">Q. {{number_format($cliente->deuda, 2)}}</span></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="pills-deuda" role="tabpanel" aria-labelledby="pills-deuda-tab">
                            <div class="row">
                                <div class="col-lg-6 mb-4">
                                    <div class="card h-100 border shadow-none">
                                        <div class="card-header bg-light fw-bold text-danger">
                                            <i class="fas fa-arrow-down me-2"></i>CRÉDITOS / DEUDAS
                                        </div>
                                        <div class="card-body p-0">
                                            <div class="table-responsive">
                                                <table class="table  mb-0" id="tabla-deudas">
                                                    <thead class="table-light">
                                                        <tr>
                                                            <th>#</th>
                                                            <th>Descripción</th>
                                                            <th>Fecha Pago</th>
                                                            <th>Total</th>
                                                            <th>Acción</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @php $t_deuda = 0; @endphp
                                                        @foreach ($deudas as $deu)
                                                        @php
                                                        $t_deuda += $deu->total;
                                                        $color = $deu->estado == 'DEUDA' ? 'bg-dark text-white': '';
                                                        @endphp


                                                        <tr class="{{$color}}">
                                                            <td>{{$deu->id}}</td>
                                                            <td><small>{{$deu->descripcion}}</small></td>
                                                            <td><span class="badge bg-warning text-dark">{{$deu->fecha_pago}}</span></td>
                                                            <td class="fw-bold text-danger">Q. {{number_format($deu->total, 2)}}</td>
                                                            <td>


                                                                @if ($deu->estado === 'DEUDA')

                                                                <form action="{{route('cliente.cambiarEstadoDeuda', ['deuda' => $deu])}}" method="post">
                                                                    @csrf
                                                                    @method('put')
                                                                    <button type="submit" class="btn btn-sm btn-outline-info rounded-circle"> <i class="fa fa-check-circle" aria-hidden="true"></i></button>
                                                                </form>
                                                                @endif

                                                                <a target="_blank" href="{{route('cliente.print_credito', ['id' => $deu->id])}}" class="btn btn-sm btn-outline-secondary rounded-circle">
                                                                    <i class="fa fa-print"></i>
                                                                </a>



                                                                <form action="{{route('cliente.deleteDeuda', ['deuda' => $deu])}}" method="post">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="submit" class="btn btn-sm btn-outline-danger rounded-circle"><i class="fa fa-trash" aria-hidden="true"></i></button>
                                                                </form>


                                                            </td>
                                                        </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>




                                <div class="col-lg-6 mb-4">
                                    <div class="card h-100 border shadow-none">
                                        <div class="card-header bg-light fw-bold text-success">
                                            <i class="fas fa-arrow-up me-2"></i>ABONOS REALIZADOS
                                        </div>
                                        <div class="card-body p-0">
                                            <div class="table-responsive">
                                                <table class="table table-hover table-striped mb-0" id="tabla-abonos">
                                                    <thead class="table-light">
                                                        <tr>
                                                            <th>#</th>
                                                            <th>Fecha</th>
                                                            <th>Descripción</th>
                                                            <th>Total</th>
                                                            <th>Acción</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @php $t_abono = 0; @endphp
                                                        @foreach ($abonos as $deu)
                                                        @php $t_abono += $deu->total; @endphp
                                                        <tr>
                                                            <td>{{$deu->id}}</td>
                                                            <td><small>{{$deu->created_at->format('d/m/Y')}}</small></td>
                                                            <td><small>{{$deu->descripcion}}</small></td>
                                                            <td class="fw-bold text-success">Q. {{number_format($deu->total, 2)}}</td>
                                                            <td>

                                                                <form action="{{route('cliente.deleteAbono', ['abono' => $deu])}}" method="post">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="submit" class="btn btn-sm btn-outline-danger rounded-circle"><i class="fa fa-trash" aria-hidden="true"></i></button>
                                                                </form>

                                                                <a target="_blank" href="{{route('cliente.print_abonos', ['id' => $deu->id])}}" class="btn btn-sm btn-outline-secondary rounded-circle">
                                                                    <i class="fa fa-print"></i>
                                                                </a>
                                                            </td>
                                                        </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="pills-credito" role="tabpanel" aria-labelledby="pills-credito-tab">
                            <div class="row g-4">
                                <div class="col-md-4">
                                    <div class="card h-100 border-start border-primary border-3">
                                        <div class="card-body">
                                            <h6 class="fw-bold mb-3">Historial de Crédito</h6>
                                            <form action="{{route('cliente.reportVentaToClienteAndDate')}}" method="POST">
                                                @csrf()
                                                <input type="hidden" name="cliente_id" value="{{$cliente->id}}">
                                                <div class="mb-3">
                                                    <label class="form-label small">Desde:</label>
                                                    <input type="date" class="form-control" name="inicio" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label small">Hasta:</label>
                                                    <input type="date" class="form-control" name="fin" required>
                                                </div>
                                                <button type="submit" class="btn btn-primary w-100"><i class="fa fa-search me-2"></i> Buscar</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="card h-100 border-start border-info border-3">
                                        <div class="card-body">
                                            <h6 class="fw-bold mb-3">Reporte de Ventas</h6>
                                            <form action="{{route('cliente.reportedeventatcliente')}}" method="POST">
                                                @csrf()
                                                <input type="hidden" name="cliente_id" value="{{$cliente->id}}">
                                                <div class="mb-3">
                                                    <label class="form-label small">Desde:</label>
                                                    <input type="date" class="form-control" name="inicio" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label small">Hasta:</label>
                                                    <input type="date" class="form-control" name="fin" required>
                                                </div>
                                                <button type="submit" class="btn btn-info text-white w-100"><i class="fa fa-search me-2"></i> Buscar</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="card h-100 border-start border-warning border-3">
                                        <div class="card-body">
                                            <h6 class="fw-bold mb-3">Venta por Artículo</h6>
                                            <form action="{{route('cliente.reportedeventatclienteandarticulo')}}" method="POST">
                                                @csrf()
                                                <input type="hidden" name="cliente_id" value="{{$cliente->id}}">
                                                <div class="mb-3">
                                                    <label class="form-label small">Artículo:</label>
                                                    <select name="articulo" id="articulo_id" class="form-select">
                                                        @foreach ($articulos as $art)
                                                        <option value="{{$art->id}}">{{$art->nombre}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="row g-2 mb-3">
                                                    <div class="col-6">
                                                        <label class="form-label small">Inicio:</label>
                                                        <input type="date" class="form-control" name="inicio" required>
                                                    </div>
                                                    <div class="col-6">
                                                        <label class="form-label small">Fin:</label>
                                                        <input type="date" class="form-control" name="fin" required>
                                                    </div>
                                                </div>
                                                <button type="submit" class="btn btn-warning w-100"><i class="fa fa-search me-2"></i> Buscar</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                            <div class="card border-0">
                                <div class="card-body">
                                    <h5 class="fw-bold mb-4">Actualizar Información</h5>
                                    <form action="{{route('cliente.update', ['id' => $cliente->id])}}" method="POST">
                                        @csrf
                                        @method('PUT')
                                        @include('admin/clientes/components/form')

                                        <hr class="my-4">
                                        <button type="submit" class="btn btn-success btn-lg px-5">
                                            <i class="fa fa-save me-2"></i> Guardar Cambios
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="abonos" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title fw-bold text-white"><i class="fas fa-hand-holding-usd me-2"></i>NUEVO ABONO</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{route('cliente.abonosNew')}}" method="post">
                    @csrf
                    <input type="hidden" name="cliente_id" value="{{$cliente->id}}">

                    <div class="mb-3">
                        <label for="descripcion" class="form-label fw-bold">Descripción</label>
                        <textarea class="form-control" name="descripcion" id="descripcion" rows="3" placeholder="Detalle del abono..."></textarea>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">Total de Abono</label>
                        <div class="input-group">
                            <span class="input-group-text">Q.</span>
                            <input type="number" class="form-control" name="total" step="any" placeholder="0.00" required>
                        </div>
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary">GUARDAR ABONO</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="credito" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title fw-bold"><i class="fas fa-plus-circle me-2"></i>AGREGAR CRÉDITO</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{route('cliente.saveDeuda')}}" method="post">
                    @csrf
                    <input type="hidden" name="cliente_id" value="{{$cliente->id}}">

                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input" name="salto" value="1" id="checkSalto">
                        <label class="form-check-label" for="checkSalto">SUMAR A CRÉDITO EXISTENTE</label>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">Descripción</label>
                        <textarea class="form-control" name="descripcion" rows="3" placeholder="Motivo del crédito..."></textarea>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">Total Deuda</label>
                        <div class="input-group">
                            <span class="input-group-text">Q.</span>
                            <input type="number" class="form-control" name="total" step="any" placeholder="0.00" required>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">Fecha de Pago</label>
                        <input type="date" class="form-control" name="fecha_pago">
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-success">GUARDAR CRÉDITO</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<script src="{{asset('plugins/slim-select/slimselect.min.js') }}"></script>

<script>
    $(document).ready(function() {

        // Inicialización SlimSelect
        setTimeout(function() {
            new SlimSelect({
                select: '#articulo_id',
                placeholder: 'Seleccionar Artículo', // Corregido placeholder
                deselectLabel: '<span>&times;</span>',
                hideSelectedOption: true,
            })
        }, 300);

        // Configuración común para DataTables
        const dtConfig = {
            "language": {
                'info': 'Mostrando _START_ a _END_ de _TOTAL_ registros',
                'search': 'Buscar:',
                'paginate': {
                    'next': 'Siguiente',
                    'previous': 'Anterior'
                },
                'loadingRecords': 'Cargando...',
                'emptyTable': 'No hay datos disponibles',
                'zeroRecords': 'No se encontraron coincidencias',
                'lengthMenu': 'Mostrar _MENU_ registros'
            },
            "pageLength": 5, // Paginación más corta para ver mejor en tabs
            "lengthChange": false
        };

        $('#tabla-deudas').DataTable(dtConfig);
        $('#tabla-abonos').DataTable(dtConfig);
    });
</script>
@endsection