@extends('adminlte::page')
@section('title', env('APP_NAME') . ' - Crear Registro de Saldo de Corte de Caja')
@section('content_header')
    <h1>Crear Registro de Saldo de Corte de Caja</h1>
@stop

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Nuevo Registro</h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('cierre-cajas.store') }}" method="POST">
                        @csrf

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="caja_id">Caja <span class="text-danger">*</span></label>
                                    <select name="caja_id" id="caja_id" class="form-control @error('caja_id') is-invalid @enderror" required>
                                        <option value="">Seleccione una caja</option>
                                        @foreach($cajas as $caja)
                                            <option value="{{ $caja->id }}" {{ old('caja_id') == $caja->id ? 'selected' : '' }}>
                                                Caja #{{ $caja->id }}
                                                @if($caja->usuario)
                                                    ({{ $caja->usuario->email }})
                                                @endif
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('caja_id')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="cliente_id">Cliente <span class="text-danger">*</span></label>
                                    <select name="cliente_id" id="cliente_id" class="form-control @error('cliente_id') is-invalid @enderror" required>
                                        <option value="">Seleccione un cliente</option>
                                        @foreach($clientes as $cliente)
                                            <option value="{{ $cliente->id }}" {{ old('cliente_id') == $cliente->id ? 'selected' : '' }}>
                                                {{ $cliente->razon_social ?? $cliente->nombre }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('cliente_id')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="saldo_a_cobrar">Saldo a Cobrar <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">$</span>
                                        </div>
                                        <input type="number"
                                               name="saldo_a_cobrar"
                                               id="saldo_a_cobrar"
                                               class="form-control @error('saldo_a_cobrar') is-invalid @enderror"
                                               value="{{ old('saldo_a_cobrar') }}"
                                               step="0.01"
                                               min="0"
                                               required>
                                    </div>
                                    @error('saldo_a_cobrar')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <a href="{{ route('cierre-cajas.index') }}" class="btn btn-secondary">
                                        <i class="fa fa-arrow-left"></i> Volver
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fa fa-save"></i> Guardar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
    <style>
        .input-group-text {
            background-color: #f8f9fa;
            border-color: #ced4da;
        }
    </style>
@stop

@section('js')
    <script>
        $(document).ready(function() {
            // Inicializar select2 para mejor UX
            $('#caja_id, #cliente_id').select2({
                theme: 'bootstrap4',
                width: '100%'
            });

            // Formatear el campo de saldo
            $('#saldo_a_cobrar').on('input', function() {
                let value = parseFloat($(this).val()) || 0;
                if (value < 0) {
                    $(this).val(0);
                }
            });
        });
    </script>
@stop