@extends('adminlte::page')

@section('title', env('APP_NAME') . ' - Planilla de Pagos')
@section('plugins.Sweetalert2', true)
@section('plugins.Datatables', true)

@section('content_header')
    <h1>Planilla de Pagos</h1>
@stop

@section('content')
    <div class="row mb-3">
        <div class="col-md-12">
            @can('admin.planilla-pagos.create')
                <a href="{{ route('planilla-pagos.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Generar Pago de Planilla
                </a>
            @endcan
        </div>
    </div>

    <div class="card">
        <div class="card-header bg-primary text-white">
            <h2 class="card-title">
                <i class="fas fa-list"></i> Lista de Pagos de Planilla
            </h2>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="planilla-pagos-table" class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Colaborador</th>
                            <th>Período</th>
                            <th>Fecha Pago</th>
                            <th>Sueldo Base</th>
                            <th>Días Trabajados</th>
                            <th>Días Faltados</th>
                            <th>Días Permisos</th>
                            <th>Descuento</th>
                            <th>Adelantado</th>
                            <th>Monto Total</th>
                            <th>Método Pago</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- DataTables cargará los datos aquí -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal Ver Detalle Pago -->
    @can('admin.planilla-pagos.show')
    <div class="modal fade" id="modalVerDetallePago" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-info text-white">
                    <h4 class="modal-title">
                        <i class="fas fa-eye"></i> Detalle del Pago de Planilla
                    </h4>
                    <button type="button" class="close text-white" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="detalle-pago-content">
                    <!-- Contenido se cargará dinámicamente -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times"></i> Cerrar
                    </button>
                </div>
            </div>
        </div>
    </div>
    @endcan
@stop

@section('js')
<script>
$(document).ready(function() {
    // Inicializar DataTable
    var table = $('#planilla-pagos-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('planilla-pagos.index') }}",
            type: 'GET'
        },
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'empleado_nombre', name: 'empleado_nombre' },
            { data: 'periodo_formatted', name: 'periodo_formatted' },
            { data: 'fecha_pago_formatted', name: 'fecha_pago_formatted' },
            { data: 'sueldo_base', name: 'sueldo_base', render: function(data) {
                return 'S/ ' + parseFloat(data).toFixed(2);
            }},
            { data: 'dias_trabajados', name: 'dias_trabajados' },
            { data: 'dias_faltados', name: 'dias_faltados' },
            { data: 'dias_permisos', name: 'dias_permisos' },
            { data: 'descuento_faltas_permisos', name: 'descuento_faltas_permisos', render: function(data) {
                return 'S/ ' + parseFloat(data).toFixed(2);
            }},
            { data: 'monto_adelantado', name: 'monto_adelantado', render: function(data) {
                return 'S/ ' + parseFloat(data).toFixed(2);
            }},
            { data: 'monto_total_formatted', name: 'monto_total' },
            { data: 'metodo_pago', name: 'metodo_pago' },
            { data: 'acciones', name: 'acciones', orderable: false, searchable: false }
        ],
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/es-ES.json'
        },
        order: [[3, 'desc']] // Ordenar por fecha de pago descendente
    });

    // Ver detalle pago
    $(document).on('click', '.btn-ver-detalle-pago', function(e) {
        e.preventDefault();
        var pagoId = $(this).data('pago-id');

        window.location.href = "{{ url('planilla-pagos') }}/" + pagoId;
    });

    // Eliminar pago
    $(document).on('click', '.btn-eliminar-pago', function(e) {
        e.preventDefault();
        var pagoId = $(this).data('pago-id');

        Swal.fire({
            title: '¿Eliminar pago?',
            text: 'Esta acción no se puede deshacer',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ url('planilla-pagos') }}/" + pagoId,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: '¡Éxito!',
                                text: response.message,
                                timer: 2000,
                                showConfirmButton: false
                            });
                            table.ajax.reload();
                        }
                    },
                    error: function(xhr) {
                        var message = 'Error al eliminar el pago';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: message
                        });
                    }
                });
            }
        });
    });
});
</script>
@stop