@extends('layouts.app')
@section('content')
    <div class="container-fluid p-0">
        <div class="d-flex align-items-center border-bottom ps-4 p-2">
            <span class="text-black fw-bold fs-4">
                ADMINISTRACIÓN DE CLIENTES FACTURABLES
            </span>
        </div>

        <div class="px-3">
            <div class="py-3">
                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createClientModal"
                    onclick="return confirm('TEN A LA MANO LOS SIGUIENTES DOCUMENTOS DEL CLIENTE:\n \n \t RFC. \n \t Nombre Fiscal.\n \t Régimen Fiscal. \n \t Correo Electrónico \n \t Celular. \n \n Toma en cuenta que si es un CLIENTE NUEVO, tiene que ser \u0332R\u0332E\u0332G\u0332I\u0332S\u0332T\u0332R\u0332A\u0332D\u0332O\u0332 \u0332A\u0332N\u0332T\u0332E\u0332R\u0332I\u0332O\u0332R\u0332M\u0332E\u0332N\u0332T\u0332E\u0332 en el módulo de clientes')">
                    <i class="fas fa-plus"></i> Crear Cliente Facturable
                </button>
            </div>

            @include('layouts.alert')

            <div class="table-responsive">
                <table class="table table-bordered table-striped table-sm caption-top">
                    <caption class="border rounded-top p-2 text-dark bg-light">
                        <form action="{{ route('invoices.customers') }}" method="GET">
                            @csrf
                            <div class="row g-3 mb-0">
                                <div class="col-lg-4 col-12">
                                    <label for="customer_name" class="form-label">Nombre del Cliente</label>
                                    <input type="text" class="form-control form-control-sm" id="customer_name"
                                        name="customer_name" value="{{ request('customer_name') }}"
                                        placeholder="Buscar por nombre del cliente">
                                </div>

                                <div class="col-lg-4 col-12">
                                    <label for="customer_email" class="form-label">Email</label>
                                    <input type="text" class="form-control form-control-sm" id="customer_email"
                                        name="customer_email" value="{{ request('customer_email') }}"
                                        placeholder="Buscar por email">
                                </div>

                                <div class="col-lg-4 col-12">
                                    <label for="customer_status" class="form-label">Estado</label>
                                    <select class="form-select form-select-sm" id="customer_status" name="customer_status">
                                        <option value="">Todos los estados</option>
                                        <option value="1" {{ request('customer_status') == '1' ? 'selected' : '' }}>
                                            Activo</option>
                                        <option value="0" {{ request('customer_status') == '0' ? 'selected' : '' }}>
                                            Inactivo</option>
                                        <option value="2" {{ request('customer_status') == '2' ? 'selected' : '' }}>
                                            Facturable</option>
                                    </select>
                                </div>

                                <div class="col-auto">
                                    <label for="direction" class="form-label">Orden</label>
                                    <select class="form-select form-select-sm" id="direction" name="direction">
                                        <option value="DESC" {{ request('direction') == 'DESC' ? 'selected' : '' }}>DESC
                                        </option>
                                        <option value="ASC" {{ request('direction') == 'ASC' ? 'selected' : '' }}>ASC
                                        </option>
                                    </select>
                                </div>

                                <div class="col-auto">
                                    <label for="size" class="form-label">Total</label>
                                    <select class="form-select form-select-sm" id="size" name="size">
                                        <option value="25" {{ request('size') == 25 ? 'selected' : '' }}>25</option>
                                        <option value="50" {{ request('size') == 50 ? 'selected' : '' }}>50</option>
                                        <option value="100" {{ request('size') == 100 ? 'selected' : '' }}>100</option>
                                        <option value="200" {{ request('size') == 200 ? 'selected' : '' }}>200</option>
                                        <option value="500" {{ request('size') == 500 ? 'selected' : '' }}>500</option>
                                    </select>
                                </div>

                                <!-- Botones -->
                                <div class="col-12 d-flex justify-content-end m-0">
                                    <button type="submit" class="btn btn-primary btn-sm me-2">
                                        <i class="bi bi-funnel-fill"></i> Filtrar
                                    </button>
                                    <a href="{{ route('invoices.customers') }}" class="btn btn-secondary btn-sm">
                                        <i class="bi bi-arrow-clockwise"></i> Limpiar
                                    </a>
                                </div>
                            </div>
                        </form>
                    </caption>
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Nombre comercial</th>
                            <th scope="col">Razon social</th>
                            <th scope="col">RFC</th>
                            <th scope="col">Email</th>
                            <th scope="col">Regimen Fiscal</th>
                            <th scope="col">Uso de CFDI</th>
                            <th scope="col">Estado</th>
                            <th scope="col">Limite de credito</th>
                            <th scope="col">Dias de credito</th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                    <tbody class="align-middle  ">
                        @forelse ($invoice_customers as $index => $ic)
                            <tr>
                                <th scope="row">{{ $index + 1 }}</th>
                                <td>{{ $ic->comercial_name }}</td>
                                <td>{{ $ic->social_reason }}</td>
                                <td>{{ $ic->rfc }}</td>
                                <td>{{ $ic->email }}</td>
                                <td>{{ $ic->tax_system }}</td>
                                <td>{{ $ic->cfdi_usage }}</td>
                                <td> {{ $ic->status }} </td>
                                <td> ${{ $ic->credit_limit ?? '0' }} </td>
                                <td> {{ $ic->credit_days ?? '-' }} </td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-secondary btn-sm" data-bs-toggle="tooltip"
                                        data-bs-placement="top" data-bs-custom-class="custom-tooltip"
                                        data-bs-title="Editar concepto" data-ic="{{ $ic }}" onclick="editInvoiceCustomer(this)"><i class="bi bi-pencil-square"></i></button>
                                    <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="tooltip"
                                        data-bs-placement="top" data-bs-custom-class="custom-tooltip"
                                        data-bs-title="Eliminar concepto"><i
                                            class="bi bi-trash-fill"></i></button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="11" class="text-center py-5">
                                    <div class="empty-state">
                                        <i class="bi bi-person-circle text-muted fs-1 mb-3"></i>
                                        <h5 class="text-muted">No hay clientes para mostrar</h5>
                                        <p class="text-muted mb-0">No se encontraron clientes facturables en el sistema.
                                        </p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>


    <!-- Modal para crear cliente -->
    @include('invoices.clients.modals.create')
    @include('invoices.clients.modals.edit')

    <!-- Estilos CSS -->
    <style>
        .table {
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }

        .table thead th {
            border-bottom: 2px solid #dee2e6;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.875rem;
            letter-spacing: 0.5px;
        }

        .table tbody tr {
            transition: all 0.2s ease;
        }

        .table tbody tr:hover {
            background-color: rgba(0, 123, 255, 0.05) !important;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* Iconos y badges */
        .customer-icon {
            width: 32px;
            height: 32px;
            background-color: rgba(0, 123, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .badge {
            font-size: 0.75rem !important;
            padding: 0.5rem 0.75rem !important;
        }

        /* Empty state */
        .empty-state {
            padding: 3rem 1rem;
        }

        .empty-state i {
            display: block;
            margin: 0 auto;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .table-responsive {
                font-size: 0.875rem;
            }

            .badge {
                font-size: 0.7rem !important;
                padding: 0.375rem 0.5rem !important;
            }

            .btn-group .btn {
                padding: 0.25rem 0.5rem;
            }
        }

        /* Animaciones */
        .table tbody tr {
            animation: fadeInUp 0.3s ease forwards;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Hover effects */
        .email-info:hover,
        .phone-info:hover,
        .credit-info:hover {
            transform: scale(1.02);
            transition: transform 0.2s ease;
        }
    </style>

    <!-- JavaScript -->
    <script>
        // Tooltips para botones
        document.addEventListener('DOMContentLoaded', function() {
            // Inicializar tooltips de Bootstrap
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[title]'));
            var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });

            // Animación de entrada para las filas
            const rows = document.querySelectorAll('tbody tr');
            rows.forEach((row, index) => {
                row.style.animationDelay = `${index * 0.05}s`;
            });
        });

        // Keyboard navigation
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                // Cerrar modales abiertos
                const modals = document.querySelectorAll('.modal.show');
                modals.forEach(modal => {
                    bootstrap.Modal.getInstance(modal).hide();
                });
            }
        });
    </script>

    <!-- FontAwesome y sweetalert2  -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
@endsection