@extends('layouts.app')
@section('title','Registrar Depósito CTS')
@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6"><h1 class="m-0">Registrar Depósito CTS</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.cts.index') }}">CTS</a></li>
                    <li class="breadcrumb-item active">Nuevo</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<section class="content"><div class="container-fluid">
<form method="POST" action="{{ route('rrhh.cts.store') }}">
@csrf
<div class="card">
    <div class="card-header"><h3 class="card-title"><i class="fas fa-piggy-bank mr-2"></i>Datos del Depósito</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

        <div class="row">
            <div class="col-md-5 form-group">
                <label>Empleado <span class="text-danger">*</span></label>
                <select name="empleado_id" id="empleado_id" class="form-control" required>
                    <option value="">-- Seleccionar --</option>
                    @foreach($empleados as $emp)
                    <option value="{{ $emp->id }}" {{ old('empleado_id', $empleadoSel?->id) == $emp->id ? 'selected' : '' }}>
                        {{ $emp->nombre_completo }} — {{ $emp->cargo }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 form-group">
                <label>Semestre <span class="text-danger">*</span></label>
                <select name="semestre" class="form-control" required>
                    @foreach(\App\Models\CtsDeposito::$SEMESTRES as $k => $v)
                    <option value="{{ $k }}" {{ old('semestre', $semestre) == $k ? 'selected' : '' }}>{{ $v }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2 form-group">
                <label>Año <span class="text-danger">*</span></label>
                <input type="number" name="anio" class="form-control" value="{{ old('anio', $anio) }}" min="2020" max="2099" required>
            </div>
            <div class="col-md-2 form-group">
                <label>Fecha Depósito <span class="text-danger">*</span></label>
                <input type="date" name="fecha_deposito" class="form-control" value="{{ old('fecha_deposito', now()->toDateString()) }}" required>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3 form-group">
                <label>Rem. Computable (S/) <span class="text-danger">*</span></label>
                <input type="number" name="remuneracion_computable" id="rem_comp" class="form-control" value="{{ old('remuneracion_computable') }}" step="0.01" min="0" required>
                <small class="text-muted">Salario + 1/6 gratificación</small>
            </div>
            <div class="col-md-2 form-group">
                <label>Meses Computables <span class="text-danger">*</span></label>
                <input type="number" name="meses_computables" id="meses_comp" class="form-control" value="{{ old('meses_computables', 6) }}" step="0.01" min="0" max="6" required>
            </div>
            <div class="col-md-3 form-group">
                <label>Monto a Depositar (S/) <span class="text-danger">*</span></label>
                <input type="number" name="monto_deposito" id="monto_dep" class="form-control" value="{{ old('monto_deposito') }}" step="0.01" min="0" required>
            </div>
            <div class="col-md-2 form-group d-flex align-items-end pb-1">
                <button type="button" id="btn-calcular" class="btn btn-info btn-sm w-100">
                    <i class="fas fa-calculator mr-1"></i>Calcular
                </button>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4 form-group">
                <label>Entidad Financiera</label>
                <input type="text" name="entidad_financiera" class="form-control" value="{{ old('entidad_financiera') }}" placeholder="BCP, Interbank, etc.">
            </div>
            <div class="col-md-3 form-group">
                <label>N° de Cuenta</label>
                <input type="text" name="numero_cuenta" class="form-control" value="{{ old('numero_cuenta') }}">
            </div>
        </div>

        <div class="form-group">
            <label>Observaciones</label>
            <textarea name="observaciones" class="form-control" rows="2">{{ old('observaciones') }}</textarea>
        </div>

        <div class="callout callout-info py-2">
            <small>
                <strong>CTS General:</strong> Rem. computable = Salario + 1/6 de gratificación. Monto = Rem. computable × meses / 12.<br>
                <strong>CTS Pequeña empresa:</strong> Monto = Rem. computable × meses / 24.<br>
                Depósitos: 15 de mayo (ene-abr) y 15 de noviembre (may-oct).
            </small>
        </div>
    </div>
    <div class="card-footer">
        <button type="submit" class="btn btn-success mr-2"><i class="fas fa-save mr-1"></i>Guardar</button>
        <a href="{{ route('rrhh.cts.index') }}" class="btn btn-secondary">Cancelar</a>
    </div>
</div>
</form>
</div></section>
@endsection
@push('scripts')
<script>
document.getElementById('btn-calcular').addEventListener('click', function() {
    const empId = document.getElementById('empleado_id').value;
    const meses = document.getElementById('meses_comp').value;
    if (!empId) { alert('Seleccione un empleado primero.'); return; }
    fetch(`{{ route('rrhh.cts.calcular') }}?empleado_id=${empId}&meses=${meses}`)
        .then(r => r.json())
        .then(d => {
            document.getElementById('rem_comp').value  = d.remuneracion_computable;
            document.getElementById('monto_dep').value = d.monto_deposito;
        });
});
</script>
@endpush