@extends('layouts.app')

@section('title', 'Nueva Oportunidad')

@section('content')
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <!-- Header -->
                <div class="card-header bg-light">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title mb-0">
                            <i class="fas fa-plus me-2"></i>
                            Nueva Oportunidad
                        </h3>
                        <a href="{{ route('admin.crm.opportunities.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-1"></i>
                            Volver
                        </a>
                    </div>
                </div>
                
                <form action="{{ route('admin.crm.opportunities.store') }}" method="POST">
                    @csrf
                    
                    @if ($errors->any())
                    <div class="alert alert-danger m-3">
                        <strong><i class="fas fa-exclamation-triangle me-2"></i>Error al crear la oportunidad</strong>
                        <ul class="mb-0 mt-2">
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                    
                    <div class="card-body">
                        <!-- Información General -->
                        <h5 class="text-primary mb-3">
                            <i class="fas fa-info-circle me-2"></i>Información General
                        </h5>
                        
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="name" class="form-label fw-bold">
                                        Nombre de la Oportunidad <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" name="name" id="name" class="form-control" 
                                           value="{{ old('name') }}" required maxlength="200">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="stage_id" class="form-label fw-bold">
                                        Etapa <span class="text-danger">*</span>
                                    </label>
                                    <select name="stage_id" id="stage_id" class="form-select" required>
                                        <option value="">Seleccionar etapa...</option>
                                        @foreach($stages as $stage)
                                        <option value="{{ $stage->id }}" {{ old('stage_id') == $stage->id ? 'selected' : '' }}>
                                            {{ $stage->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label for="description" class="form-label fw-bold">
                                        Descripción
                                    </label>
                                    <textarea name="description" id="description" class="form-control" rows="3" 
                                              placeholder="Descripción detallada de la oportunidad...">{{ old('description') }}</textarea>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Cliente y Vendedor -->
                        <h5 class="text-primary mb-3 mt-4">
                            <i class="fas fa-users me-2"></i>Cliente y Vendedor
                        </h5>
                        
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="client_id" class="form-label fw-bold">
                                        Cliente <span class="text-danger">*</span>
                                    </label>
                                    <select name="client_id" id="client_id" class="form-select" required>
                                        <option value="">Seleccionar cliente...</option>
                                        @foreach($clients as $client)
                                        <option value="{{ $client->id }}" {{ old('client_id') == $client->id ? 'selected' : '' }}>
                                            {{ $client->business_name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="salesman_id" class="form-label fw-bold">
                                        Vendedor <span class="text-danger">*</span>
                                    </label>
                                    <select name="salesman_id" id="salesman_id" class="form-select" required>
                                        <option value="">Seleccionar vendedor...</option>
                                        @foreach($salesmen as $salesman)
                                        <option value="{{ $salesman->id }}" {{ old('salesman_id') == $salesman->id ? 'selected' : '' }}>
                                            {{ $salesman->first_name }} {{ $salesman->last_name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Valor y Probabilidad -->
                        <h5 class="text-primary mb-3 mt-4">
                            <i class="fas fa-dollar-sign me-2"></i>Valor y Probabilidad
                        </h5>
                        
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="estimated_value" class="form-label fw-bold">
                                        Valor Estimado <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text">$</span>
                                        <input type="number" name="estimated_value" id="estimated_value" 
                                               class="form-control" value="{{ old('estimated_value', 0) }}" 
                                               step="0.01" min="0" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="probability" class="form-label fw-bold">
                                        Probabilidad (%) <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <input type="number" name="probability" id="probability" 
                                               class="form-control" value="{{ old('probability', 0) }}" 
                                               step="0.1" min="0" max="100" required>
                                        <span class="input-group-text">%</span>
                                    </div>
                                    <small class="text-muted">Valor esperado: $<span id="expected_value">0.00</span></small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="expected_close_date" class="form-label fw-bold">
                                        Fecha de Cierre Esperada <span class="text-danger">*</span>
                                    </label>
                                    <input type="date" name="expected_close_date" id="expected_close_date" 
                                           class="form-control" value="{{ old('expected_close_date') }}" required>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Notas -->
                        <h5 class="text-primary mb-3 mt-4">
                            <i class="fas fa-sticky-note me-2"></i>Notas Adicionales
                        </h5>
                        
                        <div class="row mb-4">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <textarea name="notes" id="notes" class="form-control" rows="4" 
                                              placeholder="Notas adicionales sobre la oportunidad...">{{ old('notes') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-footer bg-light">
                        <div class="d-flex justify-content-end">
                            <a href="{{ route('admin.crm.opportunities.index') }}" class="btn btn-secondary me-2">
                                <i class="fas fa-times me-1"></i>Cancelar
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>Guardar Oportunidad
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const estimatedValue = document.getElementById('estimated_value');
    const probability = document.getElementById('probability');
    const expectedValue = document.getElementById('expected_value');
    
    function calculateExpectedValue() {
        const value = parseFloat(estimatedValue.value) || 0;
        const prob = parseFloat(probability.value) || 0;
        const expected = value * (prob / 100);
        expectedValue.textContent = expected.toFixed(2);
    }
    
    estimatedValue.addEventListener('input', calculateExpectedValue);
    probability.addEventListener('input', calculateExpectedValue);
    
    // Calcular valor inicial
    calculateExpectedValue();
});
</script>
@endpush
@endsection