@extends('adminlte::page')

@section('title', env('APP_NAME') . ' - Generar Pago de Planilla')
@section('plugins.Sweetalert2', true)
@section('plugins.Select2', true)

@section('content_header')
    <h1><i class="fas fa-money-bill-wave"></i> Generar Pago de Planilla</h1>
@stop

@section('content')
    <form id="formGenerarPago">
        <div class="row">
            <div class="col-md-12">
                <!-- Información del Colaborador y Período -->
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-user"></i> Datos del Pago
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="empleado_id">Colaborador <span class="text-danger">*</span></label>
                                    <select name="empleado_id" id="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>
                                    <small class="text-muted">Solo se muestran colaboradores con sueldo base configurado</small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="periodo_mes">Mes <span class="text-danger">*</span></label>
                                    <select name="periodo_mes" id="periodo_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-3">
                                <div class="form-group">
                                    <label for="periodo_anio">Año <span class="text-danger">*</span></label>
                                    <input type="number" name="periodo_anio" id="periodo_anio" class="form-control"
                                           min="2020" max="2100" value="{{ date('Y') }}" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <button type="button" class="btn btn-info" id="btnCargarDatos">
                                    <i class="fas fa-sync"></i> Cargar Datos del Período
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Resumen de Cálculo -->
                <div class="card card-success" id="cardResumen" style="display: none;">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-calculator"></i> Resumen de Cálculo
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-box">
                                    <span class="info-box-icon bg-info"><i class="fas fa-calendar-check"></i></span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">Días Trabajados</span>
                                        <span class="info-box-number" id="resumen_dias_trabajados">0</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-box">
                                    <span class="info-box-icon bg-danger"><i class="fas fa-calendar-times"></i></span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">Días Faltados</span>
                                        <span class="info-box-number" id="resumen_dias_faltados">0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-box">
                                    <span class="info-box-icon bg-warning"><i class="fas fa-calendar-alt"></i></span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">Días Permisos</span>
                                        <span class="info-box-number" id="resumen_dias_permisos">0</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-box">
                                    <span class="info-box-icon bg-primary"><i class="fas fa-calendar-day"></i></span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">Días Descansos</span>
                                        <span class="info-box-number" id="resumen_dias_descansos">0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <table class="table table-bordered">
                                    <tbody>
                                        <tr>
                                            <th width="50%">Sueldo Base:</th>
                                            <td class="text-right"><strong id="resumen_sueldo_base">S/ 0.00</strong></td>
                                        </tr>
                                        <tr>
                                            <th>Días del Mes:</th>
                                            <td class="text-right"><strong id="resumen_dias_mes">0</strong></td>
                                        </tr>
                                        <tr>
                                            <th>Tarifa Diaria:</th>
                                            <td class="text-right"><strong id="resumen_tarifa_diaria">S/ 0.00</strong></td>
                                        </tr>
                                        <tr class="bg-danger text-white">
                                            <th>Descuento (Faltas + Permisos):</th>
                                            <td class="text-right"><strong id="resumen_descuento">S/ 0.00</strong></td>
                                        </tr>
                                        <tr class="bg-warning">
                                            <th>Pagos Adelantados:</th>
                                            <td class="text-right"><strong id="resumen_adelantado">S/ 0.00</strong></td>
                                        </tr>
                                        <tr class="bg-success text-white">
                                            <th><h4>Sueldo a Pagar:</h4></th>
                                            <td class="text-right"><h4 id="resumen_monto_total">S/ 0.00</h4></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Pagos Adelantados del Mes -->
                        <div class="row mt-3" id="divPagosAdelantados" style="display: none;">
                            <div class="col-md-12">
                                <h5><i class="fas fa-list"></i> Pagos Adelantados del Mes</h5>
                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered" id="tablaPagosAdelantados">
                                        <thead>
                                            <tr>
                                                <th>Fecha</th>
                                                <th>Monto</th>
                                                <th>Motivo</th>
                                                <th>Registrado por</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- Se llenará dinámicamente -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Información de Pago -->
                <div class="card card-warning" id="cardPago" style="display: none;">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-credit-card"></i> Información de Pago
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="fecha_pago">Fecha de Pago <span class="text-danger">*</span></label>
                                    <input type="date" name="fecha_pago" id="fecha_pago" class="form-control"
                                           value="{{ date('Y-m-d') }}" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="metodo_pago">Método de Pago <span class="text-danger">*</span></label>
                                    <select name="metodo_pago" id="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>
                            </div>
                            <!-- caja_id removido - solo registro informativo, no afecta caja -->
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="observaciones">Observaciones</label>
                                    <textarea name="observaciones" id="observaciones" class="form-control" rows="2"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Botones de Acción -->
                <div class="card">
                    <div class="card-footer">
                        <button type="submit" class="btn btn-success btn-lg" id="btnGuardar" style="display: none;">
                            <i class="fas fa-save"></i> Guardar Pago de Planilla
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
@stop

@section('css')
<style>
    .info-box {
        box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
        border-radius: .25rem;
        background-color: #fff;
        display: flex;
        margin-bottom: 1rem;
        min-height: 80px;
        padding: .5rem;
        position: relative;
    }
    .info-box-icon {
        border-radius: .25rem;
        align-items: center;
        display: flex;
        font-size: 1.875rem;
        justify-content: center;
        text-align: center;
        width: 70px;
    }
    .info-box-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1.8;
        flex: 1;
        padding: 0 10px;
    }
    .info-box-text {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 12px;
    }
    .info-box-number {
        display: block;
        font-weight: 700;
        font-size: 18px;
    }

    .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;
    }

</style>
@stop

@section('js')
<script>
$(document).ready(function() {
    // Inicializar Select2
    $('#empleado_id').select2({
        placeholder: 'Seleccione un colaborador',
        width: '100%'
    });

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

    // Cargar datos del período
    $('#btnCargarDatos').on('click', function() {
        var empleadoId = $('#empleado_id').val();
        var periodoMes = $('#periodo_mes').val();
        var periodoAnio = $('#periodo_anio').val();

        if (!empleadoId || !periodoMes || !periodoAnio) {
            Swal.fire({
                icon: 'warning',
                title: 'Campos requeridos',
                text: 'Por favor complete todos los campos obligatorios'
            });
            return;
        }

        // Mostrar loading
        Swal.fire({
            title: 'Cargando datos...',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        $.ajax({
            url: "{{ route('planilla-pagos.obtener-datos-periodo') }}",
            type: 'POST',
            data: {
                empleado_id: empleadoId,
                periodo_mes: periodoMes,
                periodo_anio: periodoAnio,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                Swal.close();
                if (response.success) {
                    var data = response.data;

                    // Llenar resumen
                    $('#resumen_sueldo_base').text('S/ ' + parseFloat(data.sueldo_base).toFixed(2));
                    $('#resumen_dias_mes').text(data.dias_mes);
                    $('#resumen_dias_trabajados').text(data.dias_trabajados);
                    $('#resumen_dias_faltados').text(data.dias_faltados);
                    $('#resumen_dias_permisos').text(data.dias_permisos);
                    $('#resumen_dias_descansos').text(data.dias_descansos);
                    $('#resumen_tarifa_diaria').text('S/ ' + parseFloat(data.tarifa_diaria).toFixed(2));
                    $('#resumen_descuento').text('S/ ' + parseFloat(data.descuento_faltas_permisos).toFixed(2));
                    $('#resumen_adelantado').text('S/ ' + parseFloat(data.monto_adelantado).toFixed(2));
                    $('#resumen_monto_total').text('S/ ' + parseFloat(data.monto_total).toFixed(2));

                    // Mostrar pagos adelantados si existen
                    if (data.pagos_adelantados && data.pagos_adelantados.length > 0) {
                        var tbody = $('#tablaPagosAdelantados tbody');
                        tbody.empty();
                        data.pagos_adelantados.forEach(function(pago) {
                            var fecha = new Date(pago.fecha_pago).toLocaleDateString('es-PE');
                            var row = '<tr>' +
                                '<td>' + fecha + '</td>' +
                                '<td>S/ ' + parseFloat(pago.monto).toFixed(2) + '</td>' +
                                '<td>' + (pago.motivo || '-') + '</td>' +
                                '<td>' + (pago.usuario ? pago.usuario.name : '-') + '</td>' +
                                '</tr>';
                            tbody.append(row);
                        });
                        $('#divPagosAdelantados').show();
                    } else {
                        $('#divPagosAdelantados').hide();
                    }

                    // Mostrar cards
                    $('#cardResumen').slideDown();
                    $('#cardPago').slideDown();
                    $('#btnGuardar').show();
                }
            },
            error: function(xhr) {
                Swal.close();
                var message = 'Error al cargar los datos';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: message
                });
            }
        });
    });

    // Guardar pago
    $('#formGenerarPago').on('submit', function(e) {
        e.preventDefault();

        Swal.fire({
            title: '¿Confirmar pago?',
            text: 'Se registrará el pago de planilla',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Sí, guardar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: 'Guardando...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: "{{ route('planilla-pagos.store') }}",
                    type: 'POST',
                    data: $(this).serialize(),
                    success: function(response) {
                        Swal.close();
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: '¡Éxito!',
                                text: response.message,
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => {
                                window.location.href = "{{ route('planilla-pagos.index') }}";
                            });
                        }
                    },
                    error: function(xhr) {
                        Swal.close();
                        var message = 'Error al guardar el pago';
                        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
                        });
                    }
                });
            }
        });
    });
});
</script>
@stop