@extends('layouts.app')

@section('title', 'Company Details')
@section('page', 'company-details')
@section('companyNav', 'details')

@section('content')
  @include('partials.settings-company-nav')

  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  <div class="payroll-rates-page">
    <div class="payroll-rates-page__head">
      <div>
        <h1 class="payroll-rates-page__title">Company Details</h1>
        <p class="payroll-rates-page__subtitle">Basic company information shown on receipts and reports.</p>
      </div>
      <div class="payroll-rates-page__tip" role="note">
        <i class="bi bi-info-circle-fill" aria-hidden="true"></i>
        <span>Logo appears on POS receipts and printed slips.</span>
      </div>
    </div>

    @if (! $company)
      <x-alert variant="warning" icon="bi-exclamation-triangle">No companies found. Add a company first.</x-alert>
    @else
      <form method="post" action="{{ route('settings.update') }}" class="payroll-rates-form" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <article class="rate-card rate-card--violet">
          <div class="rate-card__head">
            <div class="rate-card__identity">
              <span class="rate-card__icon" aria-hidden="true"><i class="bi bi-image"></i></span>
              <div>
                <h2 class="rate-card__title">Company logo</h2>
                <p class="rate-card__desc">Upload a square or wide logo. PNG, JPG or WEBP up to 2 MB.</p>
              </div>
            </div>
          </div>
          <div class="company-logo-upload">
            <div class="company-logo-upload__preview" id="company-logo-preview">
              @if ($company->logoUrl())
                <img src="{{ $company->logoUrl() }}" alt="{{ $company->name }} logo" id="company-logo-img">
              @else
                <span class="company-logo-upload__placeholder" id="company-logo-placeholder">
                  <i class="bi bi-image" aria-hidden="true"></i>
                  <span>No logo</span>
                </span>
              @endif
            </div>
            <div class="company-logo-upload__controls">
              <label class="rate-field__label" for="company_logo">
                <i class="bi bi-upload" aria-hidden="true"></i>
                Upload logo
              </label>
              <input
                type="file"
                class="form-control"
                id="company_logo"
                name="company_logo"
                accept="image/png,image/jpeg,image/webp"
              >
              @if ($company->logoUrl())
                <div class="form-check mt-2">
                  <input type="hidden" name="remove_logo" value="0">
                  <input class="form-check-input" type="checkbox" id="remove_logo" name="remove_logo" value="1">
                  <label class="form-check-label" for="remove_logo">Remove current logo</label>
                </div>
              @endif
            </div>
          </div>
        </article>

        <article class="rate-card rate-card--teal">
          <div class="rate-card__head">
            <div class="rate-card__identity">
              <span class="rate-card__icon" aria-hidden="true"><i class="bi bi-building"></i></span>
              <div>
                <h2 class="rate-card__title">Business information</h2>
                <p class="rate-card__desc">Contact details used across the system and printed documents.</p>
              </div>
            </div>
          </div>
          <div class="rate-card__body">
            <div class="rate-field">
              <label class="rate-field__label" for="company_name">
                <i class="bi bi-shop" aria-hidden="true"></i>
                Company name
              </label>
              <div class="rate-field__control rate-field__control--plain">
                <input type="text" id="company_name" name="company_name" maxlength="150" required value="{{ old('company_name', $company->name) }}" placeholder="e.g. Nexus Restaurant">
              </div>
            </div>
            <div class="rate-field">
              <label class="rate-field__label" for="company_email">
                <i class="bi bi-envelope" aria-hidden="true"></i>
                Email
              </label>
              <div class="rate-field__control rate-field__control--plain">
                <input type="email" id="company_email" name="company_email" maxlength="150" value="{{ old('company_email', $company->email) }}" placeholder="info@example.com">
              </div>
            </div>
            <div class="rate-field">
              <label class="rate-field__label" for="company_phone">
                <i class="bi bi-telephone" aria-hidden="true"></i>
                Phone
              </label>
              <div class="rate-field__control rate-field__control--plain">
                <input type="text" id="company_phone" name="company_phone" maxlength="50" value="{{ old('company_phone', $company->phone) }}" placeholder="+94 11 234 5678">
              </div>
            </div>
            <div class="rate-field">
              <label class="rate-field__label" for="company_tax_id">
                <i class="bi bi-receipt" aria-hidden="true"></i>
                Tax / VAT number
              </label>
              <div class="rate-field__control rate-field__control--plain">
                <input type="text" id="company_tax_id" name="company_tax_id" maxlength="50" value="{{ old('company_tax_id', $company->tax_id) }}" placeholder="Optional">
              </div>
            </div>
            <div class="rate-field rate-field--full">
              <label class="rate-field__label" for="company_address">
                <i class="bi bi-geo-alt" aria-hidden="true"></i>
                Address
              </label>
              <div class="rate-field__control rate-field__control--plain">
                <textarea id="company_address" name="company_address" maxlength="500" placeholder="Street, city, postal code">{{ old('company_address', $company->address) }}</textarea>
              </div>
            </div>
          </div>
        </article>

        <div class="payroll-rates-form__actions">
          <button type="submit" class="btn btn-primary payroll-rates-form__save">
            <i class="bi bi-floppy" aria-hidden="true"></i> Save details
          </button>
        </div>
      </form>
    @endif
  </div>
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/payroll-rates.css') }}" rel="stylesheet">
@endpush

@push('scripts')
  <script>
    (function () {
      const input = document.getElementById('company_logo');
      const preview = document.getElementById('company-logo-preview');
      if (!input || !preview) return;

      input.addEventListener('change', function () {
        const file = input.files && input.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function (e) {
          let img = document.getElementById('company-logo-img');
          const placeholder = document.getElementById('company-logo-placeholder');
          if (placeholder) placeholder.remove();
          if (!img) {
            img = document.createElement('img');
            img.id = 'company-logo-img';
            img.alt = 'Company logo preview';
            preview.appendChild(img);
          }
          img.src = e.target.result;
        };
        reader.readAsDataURL(file);
      });
    })();
  </script>
@endpush