@extends('layouts.app')
@section('content')
<h1>Lisaa liitteilla</h1>
<div class="card">
  <p class="muted">Luo asiakas + yhteyshenkilo + ajoneuvo liitteilla, tai valitse vain ajoneuvo (rekisteriote).</p>
  <form method="post" action="{{ route('vehicles.intake.store') }}" enctype="multipart/form-data">
    @csrf
    @php
      $vehicleTypeOptions = [
        'esteeton_taksi' => 'Esteeton taksi',
        'monitoimibussi' => 'Monitoimibussi',
        'turistibussi' => 'Turistibussi',
        'henkiloauto' => 'Henkiloauto',
        'pakettiauto' => 'Pakettiauto',
        'matkailuauto' => 'Matkailuauto',
        'muu' => 'Muu',
      ];
    @endphp

    <div class="row">
      <div>
        <label>Toimintatila</label>
        <select name="mode" id="mode_select">
          <option value="full" @selected(old('mode', 'full') === 'full')>Asiakas + yhteyshenkilo + ajoneuvo</option>
          <option value="vehicle_only" @selected(old('mode') === 'vehicle_only')>Vain ajoneuvo (rekisteriotteella)</option>
        </select>
      </div>
    </div>

    <div id="company_contact_block">
      <h3>Asiakas</h3>
      <div class="row">
        <div>
          <label>Valitse olemassa oleva asiakas</label>
          <select name="existing_company_id">
            <option value="">- Luo uusi asiakas -</option>
            @foreach($companies as $company)
              <option value="{{ $company->id }}" @selected(old('existing_company_id') == $company->id)>{{ $company->name }}</option>
            @endforeach
          </select>
        </div>
        <div><label>Uuden asiakkaan nimi</label><input name="company_name" value="{{ old('company_name') }}"></div>
        <div><label>Y-tunnus</label><input name="company_business_id" value="{{ old('company_business_id') }}"></div>
        <div><label>Asiakasnumero</label><input name="company_customer_number" value="{{ old('company_customer_number') }}"></div>
        <div><label>Sahkoposti</label><input name="company_email" value="{{ old('company_email') }}"></div>
        <div><label>Puhelin</label><input name="company_phone" value="{{ old('company_phone') }}"></div>
        <div><label>Laskutusosoite</label><input name="billing_street" value="{{ old('billing_street') }}"></div>
        <div><label>Laskutus postinumero</label><input name="billing_postal_code" value="{{ old('billing_postal_code') }}"></div>
        <div><label>Laskutus postitoimipaikka</label><input name="billing_city" value="{{ old('billing_city') }}"></div>
        <div><label>Toimitusosoite</label><input name="delivery_street" value="{{ old('delivery_street') }}"></div>
        <div><label>Toimitus postinumero</label><input name="delivery_postal_code" value="{{ old('delivery_postal_code') }}"></div>
        <div><label>Toimitus postitoimipaikka</label><input name="delivery_city" value="{{ old('delivery_city') }}"></div>
      </div>

      <h3>Yhteyshenkilo</h3>
      <div class="row">
        <div><label>Nimi</label><input name="contact_name" value="{{ old('contact_name') }}"></div>
        <div><label>Sahkoposti</label><input name="contact_email" value="{{ old('contact_email') }}"></div>
        <div><label>Puhelin</label><input name="contact_phone" value="{{ old('contact_phone') }}"></div>
        <div><label>Rooli</label><input name="contact_role" value="{{ old('contact_role', 'Yhteyshenkilo') }}"></div>
      </div>
      <div class="row">
        <div><label><input type="checkbox" name="contact_is_primary" value="1" @checked(old('contact_is_primary'))> Ensisijainen</label></div>
        <div><label><input type="checkbox" name="contact_has_signing_authority" value="1" @checked(old('contact_has_signing_authority'))> Allekirjoitusoikeus</label></div>
        <div><label><input type="checkbox" name="contact_is_offer_contract_recipient" value="1" @checked(old('contact_is_offer_contract_recipient'))> Tarjous/sopimus vastaanottaja</label></div>
      </div>
    </div>

    <h3>Ajoneuvo</h3>
    <div class="row">
      <div>
        <label>Merkki</label>
        <input id="vehicle_brand_input" name="vehicle_brand" list="vehicle_brand_list" value="{{ old('vehicle_brand') }}" autocomplete="off">
        <datalist id="vehicle_brand_list">
          @foreach(($brandOptions ?? []) as $brand)
            <option value="{{ $brand }}"></option>
          @endforeach
        </datalist>
      </div>
      <div>
        <label>Malli</label>
        <input id="vehicle_model_input" name="vehicle_model" list="vehicle_model_list" value="{{ old('vehicle_model') }}" autocomplete="off">
        <datalist id="vehicle_model_list"></datalist>
      </div>
      <div>
        <label>Ajoneuvotyyppi</label>
        <select name="vehicle_type">
          <option value="">-</option>
          @foreach($vehicleTypeOptions as $value => $label)
            <option value="{{ $value }}" @selected(old('vehicle_type') === $value)>{{ $label }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label>Kunto</label>
        <select name="condition_type">
          <option value="used" @selected(old('condition_type', 'used') === 'used')>Kaytetty</option>
          <option value="new" @selected(old('condition_type') === 'new')>Uusi</option>
        </select>
      </div>
      <div><label>VIN</label><input name="vin" value="{{ old('vin') }}"></div>
      <div><label>Rekisterinumero</label><input name="registration_number" value="{{ old('registration_number') }}"></div>
      <div><label>Kayttoonottopaiva</label><input type="date" data-flex-date="1" name="first_registration_date" value="{{ old('first_registration_date') }}"></div>
      <div><label>Valmistaja</label><input name="manufacturer_name" value="{{ old('manufacturer_name') }}"></div>
      <div><label>Rahoitusyhtio</label><input name="financing_company_name" value="{{ old('financing_company_name') }}"></div>
      <div><label>Myyntihinta sis. alv</label><input name="sales_price_vat" value="{{ old('sales_price_vat') }}"></div>
      <div><label>Ostohinta alv 0</label><input name="purchase_price_vat0" value="{{ old('purchase_price_vat0') }}"></div>
      <div><label>Rahti alv 0</label><input name="freight_vat0" value="{{ old('freight_vat0') }}"></div>
    </div>

    <label>Muistiinpanot</label>
    <textarea name="notes">{{ old('notes') }}</textarea>

    <h3>Liitteet</h3>
    <div class="row">
      <div class="dropzone" data-dropzone-for="registration_certificate_file" tabindex="0">
        <div class="dz-label">Rekisteriote (PDF)</div>
        <div class="dz-help">Pudota tiedosto tahan tai klikkaa valitaksesi</div>
        <div class="dz-file" data-file-label>-</div>
        <input type="file" name="registration_certificate_file" accept="application/pdf" style="display:none">
      </div>
      <div class="dropzone" data-dropzone-for="invoice_file" tabindex="0">
        <div class="dz-label">Lasku (PDF)</div>
        <div class="dz-help">Pudota tiedosto tahan tai klikkaa valitaksesi</div>
        <div class="dz-file" data-file-label>-</div>
        <input type="file" name="invoice_file" accept="application/pdf" style="display:none">
      </div>
      <div class="dropzone" data-dropzone-for="finance_agreement_file" tabindex="0">
        <div class="dz-label">Rahoitussopimus (PDF)</div>
        <div class="dz-help">Pudota tiedosto tahan tai klikkaa valitaksesi</div>
        <div class="dz-file" data-file-label>-</div>
        <input type="file" name="finance_agreement_file" accept="application/pdf" style="display:none">
      </div>
      <div class="dropzone" data-dropzone-for="other_file" tabindex="0">
        <div class="dz-label">Muut liitteet (PDF)</div>
        <div class="dz-help">Pudota tiedosto tahan tai klikkaa valitaksesi</div>
        <div class="dz-file" data-file-label>-</div>
        <input type="file" name="other_file" accept="application/pdf" style="display:none">
      </div>
    </div>

    <button class="btn btn-red" type="submit">Tallenna liitteilla</button>
  </form>
</div>

<style>
  .dropzone {
    border: 2px dashed #c9c9c9;
    border-radius: 8px;
    padding: 12px;
    background: #fcfcfc;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
  }
  .dropzone.dragover {
    border-color: #e41d37;
    background: #fff2f4;
  }
  .dropzone .dz-label {
    font-weight: 600;
    margin-bottom: 6px;
  }
  .dropzone .dz-help {
    color: #666;
    font-size: 13px;
    margin-bottom: 6px;
  }
  .dropzone .dz-file {
    color: #222;
    font-size: 13px;
  }
</style>

<script>
  (function () {
    const modeSelect = document.getElementById('mode_select');
    const companyBlock = document.getElementById('company_contact_block');
    const brandInput = document.getElementById('vehicle_brand_input');
    const modelInput = document.getElementById('vehicle_model_input');
    const modelList = document.getElementById('vehicle_model_list');
    const brandToModels = @json($brandToModels ?? []);

    function syncMode() {
      if (!modeSelect || !companyBlock) return;
      const vehicleOnly = modeSelect.value === 'vehicle_only';
      companyBlock.style.display = vehicleOnly ? 'none' : 'block';
    }

    function syncModelOptions() {
      if (!brandInput || !modelInput || !modelList) return;
      const brand = (brandInput.value || '').trim();
      const models = brandToModels[brand] || [];
      const currentModel = (modelInput.value || '').trim();

      modelList.innerHTML = '';
      models.forEach((model) => {
        const option = document.createElement('option');
        option.value = model;
        modelList.appendChild(option);
      });
      if (currentModel !== '' && !models.includes(currentModel)) {
        const option = document.createElement('option');
        option.value = currentModel;
        modelList.appendChild(option);
      }
    }

    const zones = document.querySelectorAll('.dropzone[data-dropzone-for]');
    zones.forEach((zone) => {
      const input = zone.querySelector('input[type=\"file\"]');
      const fileLabel = zone.querySelector('[data-file-label]');
      if (!input) return;

      const updateLabel = () => {
        fileLabel.textContent = input.files && input.files.length ? input.files[0].name : '-';
      };

      const setFile = (file) => {
        if (!file) return;
        const dt = new DataTransfer();
        dt.items.add(file);
        input.files = dt.files;
        updateLabel();
      };
      const isPdfFile = (file) => {
        if (!file) return false;
        const name = String(file.name || '').toLowerCase().trim();
        const type = String(file.type || '').toLowerCase().trim();
        return type.includes('pdf') || name.endsWith('.pdf');
      };

      zone.addEventListener('click', () => input.click());
      zone.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          input.click();
        }
      });
      input.addEventListener('change', updateLabel);

      zone.addEventListener('dragenter', (e) => { e.preventDefault(); zone.classList.add('dragover'); });
      zone.addEventListener('dragover', (e) => { e.preventDefault(); zone.classList.add('dragover'); });
      zone.addEventListener('dragleave', (e) => {
        e.preventDefault();
        if (!zone.contains(e.relatedTarget)) zone.classList.remove('dragover');
      });
      zone.addEventListener('drop', (e) => {
        e.preventDefault();
        zone.classList.remove('dragover');
        const file = e.dataTransfer && e.dataTransfer.files ? e.dataTransfer.files[0] : null;
        if (!file) return;
        if (!isPdfFile(file)) {
          alert('Vain PDF-tiedostot sallittu.');
          return;
        }
        setFile(file);
      });
    });

    if (modeSelect) {
      modeSelect.addEventListener('change', syncMode);
    }
    if (brandInput) {
      brandInput.addEventListener('change', syncModelOptions);
      brandInput.addEventListener('input', syncModelOptions);
    }

    syncMode();
    syncModelOptions();
  })();
</script>
@endsection