@extends('layouts.app')

@section('title', 'Crear Contrato')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">
                    <i class="bi bi-file-earmark-plus"></i> Crear Nuevo Contrato
                </h1>
                <a href="{{ route('contratos.index') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> Volver
                </a>
            </div>

            <div class="card shadow">
                <div class="card-body">
                    <form method="POST" action="{{ route('contratos.store') }}">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="cliente_id" class="form-label">Cliente *</label>
                                    <select class="form-select @error('cliente_id') is-invalid @enderror" 
                                            id="cliente_id" name="cliente_id" required>
                                        <option value="">Seleccione un cliente</option>
                                        @foreach($clientes as $cliente)
                                            <option value="{{ $cliente->id }}" {{ old('cliente_id') == $cliente->id ? 'selected' : '' }}>
                                                {{ $cliente->nombre }} {{ $cliente->apellido }} - {{ $cliente->email }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('cliente_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="plan_internet_id" class="form-label">
                                        <i class="fas fa-wifi"></i> Plan de Internet *
                                    </label>
                                    <select class="form-select @error('plan_internet_id') is-invalid @enderror" 
                                            id="plan_internet_id" name="plan_internet_id" required>
                                        <option value="">Seleccione el plan para este cliente</option>
                                        @foreach($planes as $plan)
                                            <option value="{{ $plan->id }}" 
                                                    data-precio="{{ $plan->precio }}"
                                                    {{ old('plan_internet_id') == $plan->id ? 'selected' : '' }}>
                                                {{ $plan->nombre }} - {{ $plan->velocidad_bajada }}MB/{{ $plan->velocidad_subida }}MB - Bs. {{ number_format($plan->precio, 2) }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <small class="text-info">
                                        <i class="fas fa-info-circle"></i> 
                                        Aquí se asigna el plan de internet al cliente seleccionado
                                    </small>
                                    @error('plan_internet_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="fecha_inicio" class="form-label">Fecha de Inicio *</label>
                                    <input type="date" 
                                           class="form-control @error('fecha_inicio') is-invalid @enderror" 
                                           id="fecha_inicio" 
                                           name="fecha_inicio" 
                                           value="{{ old('fecha_inicio', date('Y-m-d')) }}" 
                                           required>
                                    @error('fecha_inicio')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="mensualidad" class="form-label">Mensualidad (Bs.) *</label>
                                    <input type="number" 
                                           class="form-control @error('mensualidad') is-invalid @enderror" 
                                           id="mensualidad" 
                                           name="mensualidad" 
                                           value="{{ old('mensualidad') }}" 
                                           step="0.01" 
                                           min="0" 
                                           required>
                                    @error('mensualidad')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="dia_corte" class="form-label">Día de Corte *</label>
                                    <select class="form-select @error('dia_corte') is-invalid @enderror" 
                                            id="dia_corte" name="dia_corte" required>
                                        @for($i = 1; $i <= 31; $i++)
                                            <option value="{{ $i }}" {{ old('dia_corte', 15) == $i ? 'selected' : '' }}>
                                                {{ $i }}
                                            </option>
                                        @endfor
                                    </select>
                                    @error('dia_corte')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">Día del mes para facturar</div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="observaciones" class="form-label">Observaciones</label>
                            <textarea class="form-control @error('observaciones') is-invalid @enderror" 
                                      id="observaciones" 
                                      name="observaciones" 
                                      rows="3">{{ old('observaciones') }}</textarea>
                            @error('observaciones')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex justify-content-end">
                                    <a href="{{ route('contratos.index') }}" class="btn btn-secondary me-2">
                                        <i class="bi bi-x-circle"></i> Cancelar
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-check-circle"></i> Crear Contrato
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const planSelect = document.getElementById('plan_internet_id');
    const mensualidadInput = document.getElementById('mensualidad');
    
    planSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const precio = selectedOption.getAttribute('data-precio');
        if (precio) {
            mensualidadInput.value = precio;
        }
    });
});
</script>
@endsection