@extends('adminlte::page')

@section('title', env('APP_NAME') . ' - Pagos Adelantados')
@section('plugins.Sweetalert2', true)
@section('plugins.Datatables', true)
@section('plugins.Select2', true)
@section('content_header')
    <h1>Pagos Adelantados a Colaboradores</h1>
@stop

@section('content')
    <div class="row mb-3">
        <div class="col-md-12">
            @can('admin.pagos-adelantados.create')
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalCrearAdelantado">
                    <i class="fas fa-plus"></i> Registrar Pago Adelantado
                </button>
            @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 Adelantados
            </h2>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="pagos-adelantados-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>Monto</th>
                            <th>Motivo</th>
                            <th>Método Pago</th>
                            <th>Aplicado</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- DataTables cargará los datos aquí -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal Crear Pago Adelantado -->
    @can('admin.pagos-adelantados.create')
    <div class="modal fade" id="modalCrearAdelantado" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h4 class="modal-title">
                        <i class="fas fa-plus"></i> Registrar Pago Adelantado
                    </h4>
                    <button type="button" class="close text-white" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <form id="formCrearAdelantado">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="adelantado_empleado_id">Colaborador <span class="text-danger">*</span></label>
                            <select name="empleado_id" id="adelantado_empleado_id" class="form-control select2" style="width: 100%;" required>
                                <option value="">Seleccione un colaborador</option>
                                @foreach($empleados as $empleado)
                                    <option value="{{ $empleado->id }}" data-sueldo="{{ $empleado->sueldo_base }}">
                                        {{ $empleado->nombre }} {{ $empleado->apellido }} - {{ $empleado->codigo }}
                                        @if($empleado->sueldo_base > 0)
                                            (S/ {{ number_format($empleado->sueldo_base, 2) }})
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="adelantado_mes">Mes <span class="text-danger">*</span></label>
                                    <select name="mes" id="adelantado_mes" class="form-control" required>
                                        <option value="">Seleccione mes</option>
                                        <option value="1">Enero</option>
                                        <option value="2">Febrero</option>
                                        <option value="3">Marzo</option>
                                        <option value="4">Abril</option>
                                        <option value="5">Mayo</option>
                                        <option value="6">Junio</option>
                                        <option value="7">Julio</option>
                                        <option value="8">Agosto</option>
                                        <option value="9">Septiembre</option>
                                        <option value="10">Octubre</option>
                                        <option value="11">Noviembre</option>
                                        <option value="12">Diciembre</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="adelantado_anio">Año <span class="text-danger">*</span></label>
                                    <input type="number" name="anio" id="adelantado_anio" class="form-control"
                                           min="2020" max="2100" value="{{ date('Y') }}" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="adelantado_fecha_pago">Fecha de Pago <span class="text-danger">*</span></label>
                                    <input type="date" name="fecha_pago" id="adelantado_fecha_pago" class="form-control"
                                           value="{{ date('Y-m-d') }}" required>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="adelantado_monto">Monto <span class="text-danger">*</span></label>
                            <input type="number" name="monto" id="adelantado_monto" class="form-control"
                                   step="0.01" min="0.01" required>
                            <small class="text-muted" id="sueldoMaximo"></small>
                        </div>

                        <div class="form-group">
                            <label for="adelantado_motivo">Motivo</label>
                            <input type="text" name="motivo" id="adelantado_motivo" class="form-control" maxlength="255">
                        </div>

                        <div class="form-group">
                            <label for="adelantado_metodo_pago">Método de Pago <span class="text-danger">*</span></label>
                            <select name="metodo_pago" id="adelantado_metodo_pago" class="form-control" required>
                                <option value="">Seleccione método</option>
                                <option value="efectivo">Efectivo</option>
                                <option value="transferencia">Transferencia</option>
                                <option value="cheque">Cheque</option>
                                <option value="deposito">Depósito</option>
                            </select>
                        </div>

                        <!-- caja_id removido - solo registro informativo, no afecta caja -->

                        <div class="form-group">
                            <label for="adelantado_observaciones">Observaciones</label>
                            <textarea name="observaciones" id="adelantado_observaciones" class="form-control" rows="2"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Guardar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endcan
@stop

@section('css')
<style>
    .select2-container--default .select2-selection--single {
        background-color: #fff;
        border: 1px solid #aaa;
        border-radius: 4px;
        height: 35px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 35px !important;
        padding-left: 12px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 35px !important;
    }
    .select2-dropdown {
        z-index: 9999 !important;
    }
    .select2-container {
        width: 100% !important;
    }
</style>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {


    // Inicializar Select2 para el empleado en el modal de crear adelantado
    $('#modalCrearAdelantado').on('shown.bs.modal', function() {
        if (!$('#adelantado_empleado_id').hasClass('select2-hidden-accessible')) {
            $('#adelantado_empleado_id').select2({
                placeholder: 'Seleccione un colaborador',
                dropdownParent: $('#modalCrearAdelantado'),
                allowClear: true,
                width: '100%',
                language: {
                    noResults: function() {
                        return "No se encontraron colaboradores";
                    },
                    searching: function() {
                        return "Buscando...";
                    }
                }
            });
        }
    });

    // Destruir Select2 cuando se cierra el modal
    $('#modalCrearAdelantado').on('hidden.bs.modal', function() {
        if ($('#adelantado_empleado_id').hasClass('select2-hidden-accessible')) {
            $('#adelantado_empleado_id').select2('destroy');
        }
    });

    // Mostrar sueldo máximo al seleccionar empleado
    $(document).on('change', '#adelantado_empleado_id', function() {
        var option = $(this).find('option:selected');
        var sueldo = option.data('sueldo');
        if (sueldo && sueldo > 0) {
            $('#sueldoMaximo').text('Sueldo base: S/ ' + parseFloat(sueldo).toFixed(2) + ' (máximo permitido)');
            $('#adelantado_monto').attr('max', sueldo);
        } else {
            $('#sueldoMaximo').text('');
            $('#adelantado_monto').removeAttr('max');
        }
    });

    // Método de pago solo informativo - no requiere campos adicionales
    // caja_id removido - no afecta caja ni bancos

    // Inicializar DataTable
    var table = $('#pagos-adelantados-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('pagos-adelantados.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: 'monto_formatted', name: 'monto' },
            { data: 'motivo', name: 'motivo', defaultContent: '-' },
            { data: 'metodo_pago', name: 'metodo_pago' },
            { data: 'aplicado', name: 'aplicado', orderable: false },
            { 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']]
    });

    // Crear pago adelantado
    $('#formCrearAdelantado').on('submit', function(e) {
        e.preventDefault();

        $.ajax({
            url: "{{ route('pagos-adelantados.store') }}",
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: '¡Éxito!',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    });
                    $('#modalCrearAdelantado').modal('hide');
                    $('#formCrearAdelantado')[0].reset();
                    // Resetear select2
                    if ($('#adelantado_empleado_id').hasClass('select2-hidden-accessible')) {
                        $('#adelantado_empleado_id').val(null).trigger('change');
                    }
                    table.ajax.reload();
                }
            },
            error: function(xhr) {
                var message = 'Error al registrar el pago adelantado';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    var errors = Object.values(xhr.responseJSON.errors).flat().join('<br>');
                    message = errors;
                }
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    html: message
                });
            }
        });
    });


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

        Swal.fire({
            title: '¿Eliminar pago adelantado?',
            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('pagos-adelantados') }}/" + 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 adelantado';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: message
                        });
                    }
                });
            }
        });
    });
});
</script>
@stop