<style>
  :root {
    --azul-primario: #2A4E6D;
    --azul-secundario: #3B6EA5;
    --azul-destacado: #4A90E2;
    --azul-suave: #E3F2FD;
    --degradado-azul: linear-gradient(135deg, #4A90E2 0%, #2A4E6D 100%);
    --amarillo-primario: #FFD54F;
    --amarillo-secundario: #FFECB3;
    --naranja-destacado: #FF9800;
    --verde-exito: #4CAF50;
    --rojo-error: #F44336;
    --gris-claro: #F5F7FA;
    --gris-medio: #E1E5E9;
    --gris-oscuro: #6C757D;
    --borde-principal: #D0D7DE;
    --sombra-suave: 0 4px 12px rgba(0, 0, 0, 0.05);
    --sombra-media: 0 6px 16px rgba(0, 0, 0, 0.08);
    --sombra-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
    --transicion: all 0.3s ease;
    --fuente-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  /* Reset y estilos base */
  .budget-form-container {
    font-family: var(--fuente-principal);
    color: #333;
    line-height: 1.5;
    box-sizing: border-box;
  }

  .budget-form-container * {
    box-sizing: border-box;
  }

  /* Contenedor principal con animación sutil */
  .budget-form-container {
    background: #fff;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: var(--sombra-media);
    max-width: 1400px;
    margin: 0 auto;
    animation: fadeIn 0.5s ease-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Secciones con efecto de elevación al hover */
  .section-container {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 25px;
    padding: 25px;
    border: 1px solid var(--gris-medio);
    box-shadow: var(--sombra-suave);
    transition: var(--transicion);
    position: relative;
    overflow: hidden;
  }
  
  .section-container:hover {
    box-shadow: var(--sombra-hover);
    transform: translateY(-2px);
  }

  /* Barra de color decorativa */
  .section-container::before,
  .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--degradado-azul);
  }

  /* Títulos y cabeceras */
  .section-title {
    color: var(--azul-primario);
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 12px;
    font-weight: 600;
    font-size: 1.2rem;
  }

  .section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--azul-destacado);
  }

  /* Campos del formulario con animación */
  .form-label {
    font-weight: 600;
    color: var(--azul-primario);
    margin-bottom: 10px;
    display: block;
    font-size: 0.95rem;
    transition: var(--transicion);
  }

  .form-control:focus + .form-label,
  .form-select:focus + .form-label {
    color: var(--azul-destacado);
  }

  .form-control,
  .form-select {
    border: 2px solid var(--borde-principal);
    border-radius: 10px;
    padding: 12px 15px;
    margin-bottom: 20px;
    width: 100%;
    color: #333;
    font-size: 1rem;
    transition: var(--transicion);
    background-color: var(--gris-claro);
  }

  .form-control:hover,
  .form-select:hover {
    border-color: var(--azul-secundario);
    background-color: #fff;
  }
  
  .form-control:focus,
  .form-select:focus {
    border-color: var(--azul-destacado);
    box-shadow: 0 0 0 4px rgba(74,144,226,0.15);
    outline: none;
    background-color: #fff;
  }

  /* Estilizar selects con ícono personalizado */
  .form-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234A90E2'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 35px;
    cursor: pointer;
  }

  /* Botones con efectos hover */
  .btn-primary {
    background: var(--degradado-azul);
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    border: none;
    transition: var(--transicion);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(74,144,226,0.3);
  }

  .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(42,78,109,0.4);
  }

  .btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 3px 8px rgba(42,78,109,0.4);
  }

  /* Efecto de onda en botón */
  .btn-primary::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    transform: scale(0);
    transition: transform 0.5s;
  }

  .btn-primary:active::after {
    transform: scale(2);
    opacity: 0;
    transition: transform 0s, opacity 0.5s;
  }

  .btn-secondary {
    background: var(--gris-claro);
    color: var(--gris-oscuro);
    padding: 15px 30px;
    border-radius: 50px;
    border: 2px solid var(--gris-medio);
    transition: var(--transicion);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
  }

  .btn-secondary:hover {
    background: #fff;
    color: var(--azul-destacado);
    border-color: var(--azul-destacado);
    transform: translateY(-2px);
  }

  .btn-success {
    background: var(--verde-exito);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: var(--transicion);
    box-shadow: 0 3px 8px rgba(76,175,80,0.3);
  }

  .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(76,175,80,0.4);
  }

  .btn-danger {
    background: var(--rojo-error);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 600;
    transition: var(--transicion);
    box-shadow: 0 2px 6px rgba(244,67,54,0.2);
  }

  .btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(244,67,54,0.3);
  }

  /* Estilos para las tarjetas */
  .card {
    border-radius: 12px;
    box-shadow: var(--sombra-suave);
    border: 1px solid var(--gris-medio);
    margin-bottom: 25px;
    overflow: hidden;
    position: relative;
    transition: var(--transicion);
  }

  .card:hover {
    box-shadow: var(--sombra-hover);
    transform: translateY(-2px);
  }

  .card-header {
    background: var(--gris-claro);
    padding: 15px 20px;
    border-bottom: 1px solid var(--gris-medio);
  }

  .card-title {
    color: var(--azul-primario);
    font-weight: 600;
    margin: 0;
  }

  .card-body {
    padding: 20px;
  }

  /* Estilos para filas de servicios */
  .service-row {
    background: var(--gris-claro);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    transition: var(--transicion);
    border: 1px solid var(--gris-medio);
  }

  .service-row:hover {
    background: #fff;
    box-shadow: var(--sombra-suave);
    transform: translateY(-2px);
  }

  /* Resumen del presupuesto */
  .summary-container {
    background: var(--gris-claro);
    border-radius: 12px;
    padding: 20px;
    transition: var(--transicion);
  }

  .summary-container:hover {
    background: white;
    box-shadow: var(--sombra-suave);
  }

  .summary-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--gris-medio);
  }

  .summary-total {
    display: flex;
    justify-content: space-between;
    padding: 15px 0 5px;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--azul-primario);
  }

  /* Responsive */
  @media (max-width: 767px) {
    .budget-form-container {
      padding: 1rem;
      border-radius: 0;
      box-shadow: none;
    }

    .section-container {
      padding: 20px;
      margin-bottom: 20px;
    }

    .form-label {
      font-size: 0.9rem;
    }

    .form-control, 
    .form-select {
      padding: 10px 12px;
      font-size: 0.95rem;
    }

    .btn-primary, 
    .btn-secondary {
      width: 100%;
      padding: 12px 15px;
      font-size: 1rem;
    }

    .service-row {
      padding: 10px;
    }

    .card-body {
      padding: 15px;
    }
  }
</style>

<div class="budget-form-container">
  @csrf

  <div class="section-container">
    <h4 class="section-title"><i class="fas fa-user-circle me-2"></i>Información del Presupuesto</h4>
    <div class="row mb-4">
      <div class="col-md-6">
        <label for="patients_id" class="form-label">Paciente</label>
        <select name="patients_id" id="patients_id" class="form-select" required>
            <option value="">Seleccione un paciente</option>
            @foreach($patients as $patient)
                <option value="{{ $patient->id }}" {{ isset($budget) && $budget->patients_id == $patient->id ? 'selected' : '' }}>
                    {{ $patient->firstname }} {{ $patient->lastname }}
                </option>
            @endforeach
        </select>
      </div>

      <div class="col-md-6">
        <label for="tax_percentage" class="form-label">Porcentaje de Impuesto (%)</label>
        <input type="number" class="form-control" id="tax_percentage" name="tax_percentage" 
               value="{{ old('tax_percentage', isset($budget) ? $budget->tax_percentage : 0) }}"
               min="0" max="100" step="0.01" required>
      </div>
    </div>

    <div class="mb-4">
      <label for="notes" class="form-label"><i class="fas fa-sticky-note me-2"></i>Notas</label>
      <textarea name="notes" id="notes" class="form-control" rows="3" placeholder="Agregue notas o comentarios adicionales sobre este presupuesto...">{{ isset($budget) ? $budget->notes : '' }}</textarea>
    </div>
  </div>

  <div class="section-container">
    <h4 class="section-title"><i class="fas fa-list-alt me-2"></i>Servicios</h4>
    <div id="services-container">
        @if(isset($budget))
            @foreach($budget->items as $index => $item)
                <div class="service-row">
                    <div class="row align-items-center">
                        <div class="col-md-4 mb-3 mb-md-0">
                            <label class="form-label">Servicio</label>
                            <select name="items[{{ $index }}][medical_service_id]" class="form-select service-select" required>
                                <option value="">Seleccione un servicio</option>
                                @foreach($services as $service)
                                    <option value="{{ $service->id }}" 
                                            data-price="{{ $service->cost }}"
                                            {{ $item->medical_service_id == $service->id ? 'selected' : '' }}>
                                        {{ $service->name }} - {{ number_format($service->cost, 2) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2 mb-3 mb-md-0">
                            <label class="form-label">Cantidad</label>
                            <input type="number" name="items[{{ $index }}][quantity]" 
                                   class="form-control quantity-input" 
                                   value="{{ $item->quantity }}" min="1" required>
                        </div>
                        <div class="col-md-4 mb-3 mb-md-0">
                            <label class="form-label">Notas</label>
                            <input type="text" name="items[{{ $index }}][notes]" 
                                   class="form-control" 
                                   value="{{ $item->notes }}" 
                                   placeholder="Notas adicionales">
                        </div>
                        <div class="col-md-2 text-end">
                            <button type="button" class="btn btn-danger remove-service">
                                <i class="fas fa-trash-alt me-2"></i>Eliminar
                            </button>
                        </div>
                    </div>
                </div>
            @endforeach
        @else
            <div class="service-row">
                <div class="row align-items-center">
                    <div class="col-md-4 mb-3 mb-md-0">
                        <label class="form-label">Servicio</label>
                        <select name="items[0][medical_service_id]" class="form-select service-select" required>
                            <option value="">Seleccione un servicio</option>
                            @foreach($services as $service)
                                <option value="{{ $service->id }}" data-price="{{ $service->cost }}">
                                    {{ $service->name }} - {{ number_format($service->cost, 2) }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mb-3 mb-md-0">
                        <label class="form-label">Cantidad</label>
                        <input type="number" name="items[0][quantity]" class="form-control quantity-input" value="1" min="1" required>
                    </div>
                    <div class="col-md-4 mb-3 mb-md-0">
                        <label class="form-label">Notas</label>
                        <input type="text" name="items[0][notes]" class="form-control" placeholder="Notas adicionales">
                    </div>
                    <div class="col-md-2 text-end">
                        <button type="button" class="btn btn-danger remove-service">
                            <i class="fas fa-trash-alt me-2"></i>Eliminar
                        </button>
                    </div>
                </div>
            </div>
        @endif
    </div>
    <div class="mt-4">
        <button type="button" class="btn btn-success" id="add-service">
            <i class="fas fa-plus-circle me-2"></i>Agregar Servicio
        </button>
    </div>
  </div>

  <div class="section-container">
    <h4 class="section-title"><i class="fas fa-calculator me-2"></i>Resumen del Presupuesto</h4>
    <div class="row">
        <div class="col-md-6 col-lg-5 mx-auto">
            <div class="summary-container">
                <div class="summary-item">
                    <span>Subtotal:</span>
                    <span id="subtotal">0.00</span>
                </div>
                <div class="summary-item">
                    <span>Impuesto (<span id="tax-rate">0</span>%):</span>
                    <span id="tax-amount">0.00</span>
                </div>
                <div class="summary-total">
                    <strong>Total:</strong>
                    <strong id="total">0.00</strong>
                </div>
            </div>
        </div>
    </div>
  </div>

  <div class="mt-4 text-center">
    <button type="submit" class="btn btn-primary">
        <i class="fas fa-save me-2"></i>Guardar Presupuesto
    </button>
    <a href="{{ route('budgets.index') }}" class="btn btn-secondary ms-3">
        <i class="fas fa-times-circle me-2"></i>Cancelar
    </a>
  </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('services-container');
    const addButton = document.getElementById('add-service');
    const taxInput = document.getElementById('tax_percentage');

    function updateTotals() {
        let subtotal = 0;
        document.querySelectorAll('.service-row').forEach(row => {
            const select = row.querySelector('.service-select');
            const quantity = row.querySelector('.quantity-input');
            if (select.value && quantity.value) {
                const price = parseFloat(select.options[select.selectedIndex].dataset.price);
                subtotal += price * parseInt(quantity.value);
            }
        });

        const taxRate = parseFloat(taxInput.value) || 0;
        const taxAmount = subtotal * (taxRate / 100);
        const total = subtotal + taxAmount;

        document.getElementById('subtotal').textContent = subtotal.toFixed(2);
        document.getElementById('tax-rate').textContent = taxRate.toFixed(2);
        document.getElementById('tax-amount').textContent = taxAmount.toFixed(2);
        document.getElementById('total').textContent = total.toFixed(2);
    }

    function createServiceRow(index) {
        const template = `
            <div class="service-row">
                <div class="row align-items-center">
                    <div class="col-md-4 mb-3 mb-md-0">
                        <label class="form-label">Servicio</label>
                        <select name="items[${index}][medical_service_id]" class="form-select service-select" required>
                            <option value="">Seleccione un servicio</option>
                            @foreach($services as $service)
                                <option value="{{ $service->id }}" data-price="{{ $service->cost }}">
                                    {{ $service->name }} - {{ number_format($service->cost, 2) }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mb-3 mb-md-0">
                        <label class="form-label">Cantidad</label>
                        <input type="number" name="items[${index}][quantity]" class="form-control quantity-input" value="1" min="1" required>
                    </div>
                    <div class="col-md-4 mb-3 mb-md-0">
                        <label class="form-label">Notas</label>
                        <input type="text" name="items[${index}][notes]" class="form-control" placeholder="Notas adicionales">
                    </div>
                    <div class="col-md-2 text-end">
                        <button type="button" class="btn btn-danger remove-service">
                            <i class="fas fa-trash-alt me-2"></i>Eliminar
                        </button>
                    </div>
                </div>
            </div>
        `;
        return template;
    }

    addButton.addEventListener('click', function() {
        const index = container.children.length;
        container.insertAdjacentHTML('beforeend', createServiceRow(index));
        updateTotals();
    });

    container.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-service') || e.target.parentElement.classList.contains('remove-service')) {
            if (container.children.length > 1) {
                const button = e.target.classList.contains('remove-service') ? e.target : e.target.parentElement;
                button.closest('.service-row').remove();
                updateTotals();
            } else {
                alert('Debe tener al menos un servicio en el presupuesto.');
            }
        }
    });

    container.addEventListener('change', function(e) {
        if (e.target.classList.contains('service-select') || 
            e.target.classList.contains('quantity-input')) {
            updateTotals();
        }
    });

    taxInput.addEventListener('input', updateTotals);

    // Añadir efecto de animación al agregar nuevos servicios
    addButton.addEventListener('click', function() {
        setTimeout(() => {
            const newRow = container.lastElementChild;
            newRow.style.animation = 'fadeIn 0.5s ease-out';
        }, 10);
    });

    // Calcular totales iniciales
    updateTotals();
});
</script>
@endpush 