@extends('layouts.kaiadmin.master')

@section('template_title')
    Servicios
@endsection

@section('css')
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
@endsection

@section('content')
<br>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="card shadow">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h3 class="mb-0"><i class="fas fa-bolt"></i> {{ __('Servicios') }}</h3>
                </div>  

                <div class="card-body">
                    @if($usrservicios->isEmpty())
                        <div class="alert alert-info text-center">
                            <i class="fas fa-info-circle"></i> No hay servicios registrados.
                        </div>
                    @else
                        <div class="table-responsive">
                            <table id="servicios-table" class="table table-hover align-middle nowrap" style="width:100%">
                                <thead class="table-light">
                                    <tr>
                                        <th class="text-center">Código</th>
                                        <th class="text-center">Dirección</th>
                                        <th class="text-center">Saldo</th>
                                        <th class="text-center">Opciones</th>
                                        <th class="text-center">Estado</th>
                                        <th></th> <!-- Flecha de expansión -->
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($usrservicios as $usrservicio)
                                        <tr>
                                            <td class="text-center">{{ $usrservicio->UsrSerCodigo }}</td>
                                            <td class="text-center">{{ $usrservicio->UsrSerDireccion }}</td>
                                            <td class="text-center"><strong>Q. {{ number_format($usrservicio->Total, 2) }}</strong></td>
                                            <td class="text-center">
                                                <a class="btn btn-primary btn-sm" href="{{ route('usrservicio.show', Crypt::encrypt($usrservicio->UsrSerCodigo)) }}" title="Estado de Cuenta">
                                                    <i class="fas fa-eye"></i> Estado de Cuenta
                                                </a>
                                                <a class="btn btn-info btn-sm realizar-pago-btn"
                                                    href="{{ route('usr-servicio.seleccionpago', Crypt::encrypt($usrservicio->UsrSerCodigo)) }}"
                                                    title="Realizar Pago" data-total="{{ number_format($usrservicio->Total, 2) }}">
                                                    <i class="fas fa-credit-card"></i> Realizar Pago
                                                </a>
                                            </td>
                                            <td class="text-center">
                                                @if($usrservicio->UsrSerActivoDesc == 1)
                                                    <span class="badge bg-danger" style="font-size: 0.9em; padding: 0.5em 1.25em;">Inactivo</span>
                                                @elseif($usrservicio->UsrSerActivoDesc == 0)
                                                    <span class="badge bg-success" style="font-size: 0.9em; padding: 0.5em 1.25em;">Activo</span>
                                                @endif
                                            </td>
                                            <td></td> <!-- Celda para la flecha de expansión -->
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>

<script>
    $(document).ready(function() {
        $('#servicios-table').DataTable({
            paging: true,
            searching: true,
            ordering: true,
            responsive: {
                details: {
                    type: 'column',
                    target: -1 // flecha en la última columna
                }
            },
            columnDefs: [
                {
                    className: 'control',
                    orderable: false,
                    targets: -1 // columna flecha
                },
                {
                    responsivePriority: 1,
                    targets: 0 // Código siempre visible
                },
                {
                    responsivePriority: 2,
                    targets: 2 // Saldo
                },
                {
                    responsivePriority: 3,
                    targets: 1 // Dirección
                }
            ],
            order: [0, 'asc'],
            language: {
                url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json"
            }
        });

        // Desactivar botón si el total es 0.00
        $('.realizar-pago-btn').each(function() {
            var total = parseFloat($(this).data('total'));
            if (total === 0.0) {
                $(this).prop('disabled', true)
                       .css('opacity', 0.5)
                       .removeAttr('href')
                       .css('pointer-events', 'none')
                       .on('click', function(e) { e.preventDefault(); });
            }
        });
    });
</script>
@endsection