@extends('layouts.app')
@section('title','Generar Planilla')

@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6"><h1 class="m-0">Generar Planilla</h1><div class="highlight-bar"></div></div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('rrhh.planillas.index') }}">Planillas</a></li>
                    <li class="breadcrumb-item active">Generar</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<section class="content">
<div class="container-fluid">
<form method="POST" action="{{ route('rrhh.planillas.preview') }}">
@csrf
<div class="card">
    <div class="card-header"><h3 class="card-title"><i class="fas fa-file-invoice-dollar mr-2"></i>Parámetros de Planilla</h3></div>
    <div class="card-body">
        @if($errors->any())
        <div class="alert alert-danger"><ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
        @endif

        {{-- Selector de tipo --}}
        <div class="row mb-4">
            <div class="col-md-6">
                <label class="d-block font-weight-bold mb-2">Tipo de Planilla <span class="text-danger">*</span></label>
                <div class="d-flex gap-3">
                    <div class="card border-2 p-3 text-center tipo-card flex-fill mr-3" id="card-permanente"
                         style="cursor:pointer; border-color:#2E7D32 !important; border-width:2px !important; border-style:solid !important;">
                        <input type="radio" name="tipo" value="permanente" id="tipo-permanente"
                               {{ old('tipo','permanente') == 'permanente' ? 'checked' : '' }} style="display:none">
                        <i class="fas fa-user-tie fa-2x mb-2" style="color:#2E7D32"></i>
                        <div class="font-weight-bold">Permanentes</div>
                        <small class="text-muted">Planilla mensual completa<br>Sueldo proporcional a días hábiles</small>
                    </div>
                    <div class="card border p-3 text-center tipo-card flex-fill" id="card-eventual"
                         style="cursor:pointer;">
                        <input type="radio" name="tipo" value="eventual" id="tipo-eventual"
                               {{ old('tipo') == 'eventual' ? 'checked' : '' }} style="display:none">
                        <i class="fas fa-user-clock fa-2x mb-2 text-info"></i>
                        <div class="font-weight-bold">Eventuales</div>
                        <small class="text-muted">Por rango de fechas<br>Pago por jornal diario × días</small>
                    </div>
                </div>
            </div>
        </div>

        {{-- Fechas --}}
        <div class="row">
            {{-- Permanentes: solo mes --}}
            <div class="col-md-4 form-group" id="bloque-permanente">
                <label>Mes a liquidar <span class="text-danger">*</span></label>
                <input type="month" name="fecha_inicio_mes" id="mes-permanente" class="form-control"
                       value="{{ old('fecha_inicio_mes', now()->format('Y-m')) }}">
                <small class="text-muted">Se tomará el mes completo (1 al último día).</small>
            </div>

            {{-- Eventuales: rango libre --}}
            <div class="col-md-8" id="bloque-eventual" style="display:none">
                <div class="row">
                    <div class="col-md-5 form-group">
                        <label>Fecha Inicio <span class="text-danger">*</span></label>
                        <input type="date" name="fecha_inicio_eve" class="form-control"
                               value="{{ old('fecha_inicio_eve', now()->startOfMonth()->toDateString()) }}">
                        <small class="text-muted">Primer día del período a pagar.</small>
                    </div>
                    <div class="col-md-5 form-group">
                        <label>Fecha Fin <span class="text-danger">*</span></label>
                        <input type="date" name="fecha_fin_eve" class="form-control"
                               value="{{ old('fecha_fin_eve', now()->toDateString()) }}">
                        <small class="text-muted">Último día del período a pagar.</small>
                    </div>
                </div>
            </div>

            {{-- Campos ocultos que se envían al servidor --}}
            <input type="hidden" name="fecha_inicio" id="hidden-inicio">
            <input type="hidden" name="fecha_fin"    id="hidden-fin">
        </div>

        <div class="callout callout-success mt-2">
            <h6><i class="fas fa-cogs mr-1"></i>Cálculo automático a partir de asistencias importadas:</h6>
            <ul class="mb-0 small">
                <li><strong>Permanentes:</strong> Sueldo = Salario mensual × (días_trabajados / días_hábiles_mes). AFP/ONP/Ninguno según régimen.</li>
                <li><strong>Eventuales:</strong> Sueldo = Jornal diario × días_trabajados (del rango seleccionado). Mismo cálculo de descuentos.</li>
                <li>Horas extra 30% y 50% se suman automáticamente de las asistencias.</li>
                <li>Trabajadores sin AFP ni ONP (Ninguno) no tendrán descuento de pensión.</li>
            </ul>
        </div>
    </div>
    <div class="card-footer">
        <button type="submit" class="btn btn-primary mr-2">
            <i class="fas fa-search mr-1"></i>Ver Vista Previa
        </button>
        <a href="{{ route('rrhh.planillas.index') }}" class="btn btn-secondary">Cancelar</a>
    </div>
</div>
</form>
</div>
</section>
@endsection

@push('scripts')
<script>
const cardPer = document.getElementById('card-permanente');
const cardEve = document.getElementById('card-eventual');
const tipoPer = document.getElementById('tipo-permanente');
const tipoEve = document.getElementById('tipo-eventual');
const bloPer  = document.getElementById('bloque-permanente');
const bloEve  = document.getElementById('bloque-eventual');
const hidIni  = document.getElementById('hidden-inicio');
const hidFin  = document.getElementById('hidden-fin');

function seleccionarTipo(tipo) {
    if (tipo === 'permanente') {
        tipoPer.checked = true;
        cardPer.style.borderColor = '#2E7D32';
        cardPer.style.borderWidth = '3px';
        cardEve.style.borderColor = '#dee2e6';
        cardEve.style.borderWidth = '1px';
        bloPer.style.display = '';
        bloEve.style.display = 'none';
    } else {
        tipoEve.checked = true;
        cardEve.style.borderColor = '#17a2b8';
        cardEve.style.borderWidth = '3px';
        cardPer.style.borderColor = '#dee2e6';
        cardPer.style.borderWidth = '1px';
        bloEve.style.display = '';
        bloPer.style.display = 'none';
    }
    actualizarHidden();
}

function actualizarHidden() {
    if (tipoPer.checked) {
        const mes = document.getElementById('mes-permanente').value;
        if (mes) {
            hidIni.value = mes + '-01';
            // fin = último día del mes
            const d = new Date(mes + '-01');
            d.setMonth(d.getMonth() + 1);
            d.setDate(0);
            hidFin.value = d.toISOString().split('T')[0];
        }
    } else {
        hidIni.value = document.querySelector('[name="fecha_inicio_eve"]').value;
        hidFin.value = document.querySelector('[name="fecha_fin_eve"]').value;
    }
}

cardPer.addEventListener('click', () => seleccionarTipo('permanente'));
cardEve.addEventListener('click', () => seleccionarTipo('eventual'));
document.getElementById('mes-permanente').addEventListener('change', actualizarHidden);
document.querySelector('[name="fecha_inicio_eve"]').addEventListener('change', actualizarHidden);
document.querySelector('[name="fecha_fin_eve"]').addEventListener('change', actualizarHidden);

// Inicializar
seleccionarTipo('{{ old("tipo","permanente") }}');

// Asegurar que los hidden se llenen al enviar
document.querySelector('form').addEventListener('submit', actualizarHidden);
</script>
@endpush