@extends('layouts.app')
@section('titulo', 'Crear Usuario')
@section('contenido')

<form action="{{ route('usuarios.store') }}" method="POST" class="">
    @csrf
    <div class="row g-4">
        <!-- Información Personal -->
        <div class="col-md-6">
            <h5 class="mb-3">Información Personal</h5>

            <div class="form-floating mb-3">
                <input type="text" class="form-control" id="nombre" name="nombre" value="{{ old('nombre') }}" required placeholder="Nombre">
                <label for="nombre">Nombre</label>
            </div>

            <div class="row g-3 mb-3">
                <div class="col-12 col-md-6">
                    <div class="form-floating">
                        <input type="text" class="form-control" id="primer_apellido" name="primer_apellido" value="{{ old('primer_apellido') }}" required placeholder="Primer Apellido">
                        <label for="primer_apellido">Primer Apellido</label>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="form-floating">
                        <input type="text" class="form-control" id="segundo_apellido" name="segundo_apellido" value="{{ old('segundo_apellido') }}" required placeholder="Segundo Apellido">
                        <label for="segundo_apellido">Segundo Apellido</label>
                    </div>
                </div>
            </div>

            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="email" name="email" value="{{ old('email') }}" required placeholder="Correo Electrónico">
                <label for="email">Correo Electrónico</label>
            </div>

            <div class="mb-3">
                <label for="empresa_id" class="form-label">Empresa <span class="text-danger">*</span></label>
                <select name="empresa_id" id="empresa_id" class="form-select" required>
                    <option value="">— Seleccionar —</option>
                    @foreach($empresas as $emp)
                        <option value="{{ $emp->id }}" @selected((string) old('empresa_id') === (string) $emp->id)>{{ $emp->nombre_comercial }}</option>
                    @endforeach
                </select>
                <p class="small text-muted mb-0">La empresa no se puede cambiar después de crear el usuario.</p>
                @error('empresa_id')
                    <div class="text-danger small mt-1">{{ $message }}</div>
                @enderror
            </div>

            <div class="row g-3">
                <!-- Contraseña -->
                <div class="col-md-6">
                    <div class="form-floating">
                        <input type="password" class="form-control" id="password" name="password" required placeholder="Contraseña">
                        <label for="password">Contraseña</label>
                    </div>
                </div>

                <!-- Confirmar Contraseña -->
                <div class="col-md-6">
                    <div class="form-floating">
                        <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" required placeholder="Confirmar Contraseña">
                        <label for="password_confirmation">Confirmar Contraseña</label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contrato -->
        <div class="col-md-6">
            <h5 class="mb-3">Contrato</h5>

            <div class="row g-3 mb-3">
                <div class="col-12 col-md-6">
                    <div class="form-floating">
                        <input type="text" class="form-control" id="contrato_categoria" name="contrato_categoria" value="{{ old('contrato_categoria') }}" placeholder="Categoría de Contrato">
                        <label for="contrato_categoria">Categoría de Contrato</label>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="form-floating">
                        <input type="number" class="form-control" id="contrato_horas" name="contrato_horas" value="{{ old('contrato_horas') }}" placeholder="Horas de Contrato">
                        <label for="contrato_horas">Horas Semanales en Contrato</label>
                    </div>
                </div>
            </div>

            <div class="row g-3 mb-3">
                <div class="col-12 col-md-4">
                    <div class="form-floating">
                        <input type="number" class="form-control" id="extras_normales" name="extras_normales" value="{{ old('extras_normales') }}" placeholder="Extras Normales">
                        <label for="extras_normales">Extras Normales</label>
                    </div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="form-floating">
                        <input type="number" class="form-control" id="extras_sabados" name="extras_sabados" value="{{ old('extras_sabados') }}" placeholder="Extras Sábados">
                        <label for="extras_sabados">Extras Sábados</label>
                    </div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="form-floating">
                        <input type="number" class="form-control" id="extras_festivos" name="extras_festivos" value="{{ old('extras_festivos') }}" placeholder="Extras Festivos">
                        <label for="extras_festivos">Extras festivos y domingos</label>
                    </div>
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label d-block">¿Cobra extras a final de mes? <span class="text-danger">*</span></label>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="cobra_extras_fin_mes" id="cobra_extras_si" value="1" required @checked(old('cobra_extras_fin_mes') === '1')>
                    <label class="form-check-label" for="cobra_extras_si">Sí</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="cobra_extras_fin_mes" id="cobra_extras_no" value="0" required @checked(old('cobra_extras_fin_mes') === '0')>
                    <label class="form-check-label" for="cobra_extras_no">No</label>
                </div>
                @error('cobra_extras_fin_mes')
                    <div class="text-danger small mt-1">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label class="form-label d-block">Tiene dietas pactadas: ¿Fijas o por Ticket? <span class="text-danger">*</span></label>
                <div class="form-check form-check-inline">
                    <input class="form-check-input js-dieta-tipo" type="radio" name="dieta_pactada_tipo" id="dieta_tipo_fija" value="fija" required @checked(old('dieta_pactada_tipo') === 'fija')>
                    <label class="form-check-label" for="dieta_tipo_fija">Fijas</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input js-dieta-tipo" type="radio" name="dieta_pactada_tipo" id="dieta_tipo_ticket" value="ticket" required @checked(old('dieta_pactada_tipo') === 'ticket')>
                    <label class="form-check-label" for="dieta_tipo_ticket">Por Ticket</label>
                </div>
                @error('dieta_pactada_tipo')
                    <div class="text-danger small mt-1">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-floating mb-3" id="dieta-fija-container" style="display:none;">
                <input type="number" class="form-control" id="dieta_fija_mensual_euros" name="dieta_fija_mensual_euros" value="{{ old('dieta_fija_mensual_euros') }}" step="0.01" min="0.01" placeholder="0,00">
                <label for="dieta_fija_mensual_euros">Dietas fijas mensuales (€/mes)</label>
            </div>

            <div class="form-floating mb-3" id="dieta-ticket-container" style="display:none;">
                <input type="number" class="form-control" id="dieta_max_importe_dia" name="dieta_max_importe_dia" value="{{ old('dieta_max_importe_dia') }}" step="0.01" min="0.01" placeholder="0,00">
                <label for="dieta_max_importe_dia">Máx. importe por ticket (€/ticket)</label>
            </div>
            <p class="small text-muted mb-0">Elige una de las dos opciones para habilitar el campo correspondiente.</p>
        </div>
    </div>

    <!-- Botón -->
    <div class="text-center">
        <button type="submit" class="btn btn-primary px-5 py-2">CREAR CUENTA</button>
    </div>
</form>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const fija = document.getElementById('dieta_tipo_fija');
        const ticket = document.getElementById('dieta_tipo_ticket');
        const fijaWrap = document.getElementById('dieta-fija-container');
        const ticketWrap = document.getElementById('dieta-ticket-container');
        const fijaInput = document.getElementById('dieta_fija_mensual_euros');
        const ticketInput = document.getElementById('dieta_max_importe_dia');

        function refresh() {
            const isFija = fija.checked;
            const isTicket = ticket.checked;

            fijaWrap.style.display = isFija ? '' : 'none';
            ticketWrap.style.display = isTicket ? '' : 'none';

            if (fijaInput) fijaInput.required = isFija;
            if (ticketInput) ticketInput.required = isTicket;

            if (!isFija && fijaInput) fijaInput.value = '';
            if (!isTicket && ticketInput) ticketInput.value = '';
        }

        fija.addEventListener('change', refresh);
        ticket.addEventListener('change', refresh);
        refresh();
    });
</script>
@endpush


@endsection