@extends('layouts.app')

@section('title', 'Editar 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="fas fa-edit"></i> Editar Contrato {{ $contrato->numero_contrato }}
                </h1>
                <div>
                    <a href="{{ route('contratos.show', $contrato) }}" class="btn btn-info">
                        <i class="fas fa-eye"></i> Ver Detalle
                    </a>
                    <a href="{{ route('contratos.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Volver
                    </a>
                </div>
            </div>

            <div class="card shadow">
                <div class="card-header">
                    <h5 class="mb-0">Información del Contrato</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('contratos.update', $contrato) }}">
                        @csrf
                        @method('PUT')
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Cliente *</label>
                                    <select class="form-select" name="cliente_id" required>
                                        <option value="">Seleccione un cliente</option>
                                        @foreach($clientes as $cliente)
                                        <option value="{{ $cliente->id }}" {{ $contrato->cliente_id == $cliente->id ? 'selected' : '' }}>
                                            {{ $cliente->nombre }} {{ $cliente->apellido }} - {{ $cliente->email }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Plan de Internet *</label>
                                    <select class="form-select" name="plan_internet_id" required>
                                        <option value="">Seleccione un plan</option>
                                        @foreach($planes as $plan)
                                        <option value="{{ $plan->id }}" {{ $contrato->plan_internet_id == $plan->id ? 'selected' : '' }}>
                                            {{ $plan->nombre }} - Bs. {{ number_format($plan->precio, 2) }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Número de Contrato</label>
                                    <input type="text" class="form-control" value="{{ $contrato->numero_contrato }}" readonly>
                                    <small class="form-text text-muted">Este campo no se puede modificar</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Fecha de Inicio *</label>
                                    <input type="date" class="form-control" name="fecha_inicio" value="{{ $contrato->fecha_inicio->format('Y-m-d') }}" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Mensualidad (Bs.) *</label>
                                    <input type="number" class="form-control" name="mensualidad" value="{{ $contrato->mensualidad }}" step="0.01" min="0" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Día de Corte *</label>
                                    <select class="form-select" name="dia_corte" required>
                                        @for($i = 1; $i <= 31; $i++)
                                        <option value="{{ $i }}" {{ $contrato->dia_corte == $i ? 'selected' : '' }}>
                                            {{ $i }}
                                        </option>
                                        @endfor
                                    </select>
                                    <small class="form-text text-muted">Día del mes para generar la factura</small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Estado</label>
                                    <select class="form-select" name="estado">
                                        <option value="activo" {{ $contrato->estado == 'activo' ? 'selected' : '' }}>Activo</option>
                                        <option value="pendiente" {{ $contrato->estado == 'pendiente' ? 'selected' : '' }}>Pendiente</option>
                                        <option value="suspendido" {{ $contrato->estado == 'suspendido' ? 'selected' : '' }}>Suspendido</option>
                                        <option value="terminado" {{ $contrato->estado == 'terminado' ? 'selected' : '' }}>Terminado</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Fecha de Terminación</label>
                                    <input type="date" class="form-control" name="fecha_fin" value="{{ $contrato->fecha_fin ? $contrato->fecha_fin->format('Y-m-d') : '' }}">
                                    <small class="form-text text-muted">Solo si el contrato está terminado</small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Saldo Pendiente (Bs.)</label>
                                    <input type="number" class="form-control" name="saldo_pendiente" value="{{ $contrato->saldo_pendiente }}" step="0.01" min="0">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Fecha Próximo Pago</label>
                                    <input type="date" class="form-control" name="fecha_proximo_pago" value="{{ $contrato->fecha_proximo_pago ? $contrato->fecha_proximo_pago->format('Y-m-d') : '' }}">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="mb-3">
                                    <label class="form-label">Observaciones</label>
                                    <textarea class="form-control" name="observaciones" rows="3" placeholder="Observaciones adicionales sobre el contrato...">{{ $contrato->observaciones }}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="auto_renovacion" id="autoRenovacion" {{ $contrato->auto_renovacion ? 'checked' : '' }}>
                                    <label class="form-check-label" for="autoRenovacion">
                                        Renovación automática
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-secondary me-2" onclick="window.history.back()">
                                <i class="fas fa-times"></i> Cancelar
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Actualizar Contrato
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Información Adicional -->
            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">Información del Cliente</h6>
                        </div>
                        <div class="card-body">
                            <p><strong>Nombre:</strong> {{ $contrato->cliente->nombre ?? 'N/A' }} {{ $contrato->cliente->apellido ?? '' }}</p>
                            <p><strong>Email:</strong> {{ $contrato->cliente->email ?? 'N/A' }}</p>
                            <p><strong>Teléfono:</strong> {{ $contrato->cliente->telefono ?? 'N/A' }}</p>
                            <p><strong>Dirección:</strong> {{ $contrato->cliente->direccion ?? 'N/A' }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">Información del Plan</h6>
                        </div>
                        <div class="card-body">
                            <p><strong>Nombre:</strong> {{ $contrato->plan->nombre ?? 'N/A' }}</p>
                            <p><strong>Velocidad:</strong> {{ $contrato->plan->velocidad ?? 'N/A' }}</p>
                            <p><strong>Precio:</strong> Bs. {{ number_format($contrato->plan->precio ?? 0, 2) }}</p>
                            <p><strong>Descripción:</strong> {{ $contrato->plan->descripcion ?? 'N/A' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Auto-llenar mensualidad cuando se selecciona un plan
document.querySelector('select[name="plan_internet_id"]').addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    if (selectedOption.value) {
        const precio = selectedOption.text.split('Bs. ')[1];
        if (precio) {
            document.querySelector('input[name="mensualidad"]').value = precio;
        }
    }
});
</script>
@endsection