@extends('layouts.kaiadmin.master')

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

@section('content')
<br>
<div class="container-fluid">
    <div class="card shadow-lg">
        <div class="card-header bg-primary text-white">
            @if($usrservicio->isNotEmpty())  
                <h3 class="mb-0"><i class="fas fa-info-circle"></i> Detalles del Servicio: {{ $usrservicio->first()->UsrSerCodigo }}</h3>
            @else
                <h3 class="mb-0"><i class="fas fa-exclamation-circle"></i> No hay detalles del servicio disponibles</h3>
            @endif
        </div>
        <div class="card-body">
            @if($usrservicio->isNotEmpty())
                <form id="serviceForm" method="GEL" action="{{ route('realizarpago') }}">
                    <!--@csrf-->
                    <input type="hidden" id="allSelections" name="allSelections">
                    <input type="hidden" id="totalAmount" name="totalAmount">
                    <div class="table-responsive">
                        <table id="tabla-servicios" class="table table-hover align-middle">
                            <thead class="thead-light">
                                <tr>
                                    <th class="text-center">Seleccionar</th>
                                    <th class="text-center">Descripción</th>
                                    <th class="text-center">Monto</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($usrservicio as $item)
                                    <tr>
                                        <td class="text-center">
                                            <input type="checkbox" name="selected[]" value="{{ $item->UsrSerCodigo }}|{{ $item->descripcionIngreso }}|{{ $item->cargoQ }}" 
                                                   class="select-item" 
                                                   @if($item->excede32Dias) checked disabled @endif>
                                            <input type="hidden" class="amount" value="{{ $item->cargoQ }}">
                                        </td>
                                        <td class="text-center">{{ $item->descripcionIngreso }}</td>
                                        <td class="text-center"><strong>Q. {{ number_format($item->cargoQ, 2) }}</strong></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-4">
                        <h4 class="text-center">Total a Pagar: <span id="totalDisplay" class="font-weight-bold">Q {{ number_format($total, 2) }}</span></h4>
                    </div>

                    <div class="d-flex justify-content-center mt-4">
                        <button type="submit" class="btn btn-success" style="margin-right: 20px;">
                            <i class="fas fa-check-circle"></i> Continuar
                        </button>
                        <a href="{{ route('usrservicio.index') }}" id="cancelButton" class="btn btn-danger">
                            <i class="fas fa-times-circle"></i> Cancelar
                        </a>
                    </div>
                </form>
            @else
                <p class="text-muted text-center">No hay cargos disponibles para este servicio.</p>
            @endif
        </div>
        {{-- Paginación eliminada --}}
    </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 de selección y total -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    const checkboxes = document.querySelectorAll(".select-item");
    const totalDisplay = document.getElementById("totalDisplay");
    const allSelectionsInput = document.getElementById("allSelections");
    const totalAmountInput = document.getElementById("totalAmount");

    let allSelections = {};
    let totalAmount = 0;

    function updateSelections() {
        allSelectionsInput.value = JSON.stringify(allSelections);
        totalAmountInput.value = totalAmount.toFixed(2);
        totalDisplay.textContent = `Q ${totalAmount.toFixed(2)}`;
    }

    checkboxes.forEach(function (checkbox) {
        const amount = parseFloat(checkbox.closest("tr").querySelector(".amount").value);
        const key = checkbox.value;

        if (checkbox.checked) {
            allSelections[key] = amount;
            totalAmount += amount;
        }

        checkbox.addEventListener("change", function () {
            if (checkbox.checked) {
                allSelections[key] = amount;
                totalAmount += amount;
            } else {
                delete allSelections[key];
                totalAmount -= amount;
            }
            updateSelections();
        });
    });

    updateSelections();

    // Inicializa DataTables
    $('#tabla-servicios').DataTable({
        paging: true,
        searching: true,
        ordering: true,
        info: false,
        language: {
            url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json"
        },
        columnDefs: [
            { orderable: false, targets: 0 } // Desactiva ordenamiento en la columna de checkboxes
        ]
    });
});
</script>
@endsection