@extends('layouts.app')

@section('title', 'Solicitar cotización corporativa | Lavaustral Empresas')
@section('description', 'Cotiza el servicio de lavandería industrial para tu hotel, clínica, industria acuícola, minera o negocio de gastronomía en la Región de Aysén.')
@section('body-class', 'business-quote-page')

@section('content')

    <section id="biz-quote" class="lav-biz-quote" aria-label="Solicitar cotización corporativa">
      <div class="container">
        <div class="lav-biz-quote-grid">

          <div class="lav-biz-quote-copy" data-aos="fade-right" data-aos-duration="800">
            <p class="lav-biz-quote-eyebrow">— Cotización corporativa</p>
            <h1 class="lav-biz-quote-title">Cuéntanos de tu empresa y te preparamos una propuesta</h1>
            <p class="lav-biz-quote-desc">
              Completa el formulario en menos de dos minutos. Nuestro equipo comercial te contacta con una propuesta ajustada a tu volumen, rubro y frecuencia de retiro.
            </p>

            <ul class="lav-biz-quote-list">
              <li><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Sin compromiso, respuesta en 24-48 hrs hábiles</li>
              <li><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Logística y retiro adaptados a tu operación</li>
              <li><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Más de 20 años trabajando con empresas de Aysén</li>
            </ul>

            <div class="lav-biz-quote-alt">
              <p>¿Prefieres hablar directo?</p>
              <a href="https://wa.me/56984284828" target="_blank" rel="noopener noreferrer" class="lav-biz-quote-alt-link">
                <i class="bi bi-whatsapp" aria-hidden="true"></i> +56 9 8428 4828
              </a>
              <a href="mailto:ventas@lavaustral.cl" class="lav-biz-quote-alt-link">
                <i class="bi bi-envelope" aria-hidden="true"></i> ventas@lavaustral.cl
              </a>
            </div>
          </div>

          <div class="lav-biz-quote-card" data-aos="fade-left" data-aos-duration="800" aria-label="Formulario de cotización">

            @if (session('success'))
              <div class="lav-biz-quote-alert lav-biz-quote-alert-success" role="status">
                {{ session('success') }}
              </div>
            @endif

            @if ($errors->any())
              <div class="lav-biz-quote-alert lav-biz-quote-alert-error" role="alert">
                Revisa los campos marcados abajo antes de continuar.
              </div>
            @endif

            <h2 class="lav-biz-quote-card-title">Solicitar cotización</h2>
            <p class="lav-biz-quote-card-desc">Te toma menos de dos minutos.</p>

            <form action="{{ route('business.quote.store') }}" method="POST" class="lav-biz-quote-form" novalidate>
              @csrf

              <div class="lav-form-group">
                <label for="company_name">Nombre de la empresa</label>
                <input type="text" id="company_name" name="company_name" value="{{ old('company_name') }}" placeholder="Ej: Hotel Loberías de Aysén" required>
                @error('company_name') <span class="lav-form-error">{{ $message }}</span> @enderror
              </div>

              <div class="lav-form-row">
                <div class="lav-form-group">
                  <label for="industry">Rubro</label>
                  <select id="industry" name="industry" required>
                    <option value="" disabled {{ old('industry') ? '' : 'selected' }}>Selecciona un rubro</option>
                    <option value="hoteleria" {{ old('industry') === 'hoteleria' ? 'selected' : '' }}>Hotelería y turismo</option>
                    <option value="salud" {{ old('industry') === 'salud' ? 'selected' : '' }}>Salud y clínicas</option>
                    <option value="industria_acuicola" {{ old('industry') === 'industria_acuicola' ? 'selected' : '' }}>Industria / acuícola</option>
                    <option value="mineria" {{ old('industry') === 'mineria' ? 'selected' : '' }}>Minería</option>
                    <option value="gastronomia" {{ old('industry') === 'gastronomia' ? 'selected' : '' }}>Gastronomía y catering</option>
                    <option value="otro" {{ old('industry') === 'otro' ? 'selected' : '' }}>Otro</option>
                  </select>
                  @error('industry') <span class="lav-form-error">{{ $message }}</span> @enderror
                </div>

                <div class="lav-form-group">
                  <label for="monthly_volume">Volumen estimado mensual</label>
                  <input type="text" id="monthly_volume" name="monthly_volume" value="{{ old('monthly_volume') }}" placeholder="Ej: 800 kg o 500 piezas" required>
                  @error('monthly_volume') <span class="lav-form-error">{{ $message }}</span> @enderror
                </div>
              </div>

              <div class="lav-form-group">
                <label for="pickup_frequency">Frecuencia de retiro requerida</label>
                <select id="pickup_frequency" name="pickup_frequency" required>
                  <option value="" disabled {{ old('pickup_frequency') ? '' : 'selected' }}>Selecciona una frecuencia</option>
                  <option value="diario" {{ old('pickup_frequency') === 'diario' ? 'selected' : '' }}>Diario</option>
                  <option value="dos_veces_semana" {{ old('pickup_frequency') === 'dos_veces_semana' ? 'selected' : '' }}>Dos veces por semana</option>
                  <option value="semanal" {{ old('pickup_frequency') === 'semanal' ? 'selected' : '' }}>Semanal</option>
                  <option value="quincenal" {{ old('pickup_frequency') === 'quincenal' ? 'selected' : '' }}>Quincenal</option>
                </select>
                @error('pickup_frequency') <span class="lav-form-error">{{ $message }}</span> @enderror
              </div>

              <div class="lav-form-row">
                <div class="lav-form-group">
                  <label for="contact_name">Nombre de contacto</label>
                  <input type="text" id="contact_name" name="contact_name" value="{{ old('contact_name') }}" placeholder="Tu nombre" required>
                  @error('contact_name') <span class="lav-form-error">{{ $message }}</span> @enderror
                </div>

                <div class="lav-form-group">
                  <label for="contact_phone">Teléfono</label>
                  <input type="tel" id="contact_phone" name="contact_phone" value="{{ old('contact_phone') }}" placeholder="+56 9 ..." required>
                  @error('contact_phone') <span class="lav-form-error">{{ $message }}</span> @enderror
                </div>
              </div>

              <div class="lav-form-group">
                <label for="contact_email">Correo electrónico</label>
                <input type="email" id="contact_email" name="contact_email" value="{{ old('contact_email') }}" placeholder="nombre@empresa.cl" required>
                @error('contact_email') <span class="lav-form-error">{{ $message }}</span> @enderror
              </div>

              <div class="lav-form-group">
                <label for="notes">Notas (opcional)</label>
                <textarea id="notes" name="notes" rows="3" placeholder="Ej: requerimos ropa hospitalaria con desinfección termoquímica...">{{ old('notes') }}</textarea>
                @error('notes') <span class="lav-form-error">{{ $message }}</span> @enderror
              </div>

              <button type="submit" class="lav-biz-quote-submit">
                <i class="bi bi-send" aria-hidden="true"></i>
                <span>Enviar solicitud de cotización</span>
              </button>

              <p class="lav-biz-quote-form-note">
                Nuestro equipo comercial revisará tu solicitud y te contactará por correo o teléfono para coordinar la propuesta.
              </p>
            </form>

          </div>

        </div>
      </div>
    </section>

    <style>
      .lav-biz-quote { padding: 72px 0 96px; background: var(--lav-bg-light); }
      .lav-biz-quote .container { max-width: 1300px; }

      .lav-biz-quote-grid {
        display: grid;
        grid-template-columns: 460px 1fr;
        gap: 64px;
        align-items: start;
      }

      .lav-biz-quote-eyebrow {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--lav-primary);
        margin-bottom: 18px;
      }

      .lav-biz-quote-title {
        font-size: 34px;
        font-weight: 800;
        line-height: 1.25;
        color: var(--lav-dark);
        margin-bottom: 18px;
      }

      .lav-biz-quote-desc {
        font-size: 16px;
        line-height: 1.6;
        color: var(--lav-text-secondary);
        margin-bottom: 28px;
      }

      .lav-biz-quote-list {
        list-style: none;
        margin: 0 0 40px;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .lav-biz-quote-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 15px;
        color: var(--lav-dark);
      }

      .lav-biz-quote-list li i {
        color: var(--lav-primary);
        font-size: 16px;
      }

      .lav-biz-quote-alt {
        background: #FFFFFF;
        border-radius: 16px;
        padding: 24px;
      }

      .lav-biz-quote-alt p {
        font-size: 13px;
        font-weight: 600;
        color: var(--lav-text-secondary);
        margin-bottom: 12px;
      }

      .lav-biz-quote-alt-link {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 15px;
        font-weight: 600;
        color: var(--lav-dark) !important;
        margin-bottom: 8px;
      }

      .lav-biz-quote-alt-link:last-child { margin-bottom: 0; }
      .lav-biz-quote-alt-link i { color: var(--lav-primary); font-size: 17px; }

      /* Card del formulario */
      .lav-biz-quote-card {
        background: #FFFFFF;
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 20px 48px rgba(27, 43, 58, 0.08);
      }

      .lav-biz-quote-card-title {
        font-size: 22px;
        font-weight: 700;
        color: var(--lav-dark);
        margin-bottom: 4px;
      }

      .lav-biz-quote-card-desc {
        font-size: 14px;
        color: var(--lav-text-secondary);
        margin-bottom: 28px;
      }

      .lav-biz-quote-alert {
        padding: 14px 16px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 24px;
      }

      .lav-biz-quote-alert-success {
        background: #E4F3EC;
        color: #1F6E4A;
      }

      .lav-biz-quote-alert-error {
        background: #FBE7E7;
        color: #A93226;
      }

      .lav-biz-quote-form {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .lav-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }

      .lav-form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .lav-form-group label {
        font-size: 13px;
        font-weight: 700;
        color: var(--lav-dark);
      }

      .lav-form-group input,
      .lav-form-group select,
      .lav-form-group textarea {
        border: 1px solid var(--lav-border);
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 15px;
        color: var(--lav-dark);
        background: #FFFFFF;
        width: 100%;
      }

      .lav-form-group input:focus,
      .lav-form-group select:focus,
      .lav-form-group textarea:focus {
        outline: none;
        border-color: var(--lav-primary);
      }

      .lav-form-group textarea {
        resize: vertical;
      }

      .lav-form-error {
        font-size: 12px;
        color: #A93226;
        font-weight: 600;
      }

      .lav-biz-quote-submit {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: var(--lav-dark);
        color: #FFFFFF;
        font-size: 16px;
        font-weight: 700;
        padding: 16px 24px;
        border: none;
        border-radius: 999px;
        cursor: pointer;
        transition: background-color .2s ease;
        margin-top: 8px;
      }

      .lav-biz-quote-submit:hover {
        background: #0F1C27;
      }

      .lav-biz-quote-form-note {
        font-size: 12px;
        line-height: 1.5;
        color: var(--lav-text-secondary);
        text-align: center;
        margin: 4px 0 0;
      }

      @media (max-width: 992px) {
        .lav-biz-quote-grid { grid-template-columns: 1fr; }
      }

      @media (max-width: 576px) {
        .lav-form-row { grid-template-columns: 1fr; }
        .lav-biz-quote-card { padding: 28px 22px; }
      }
    </style>

@endsection