@extends('layouts.admin')
@section('title', 'Settings')

@section('content')
@php
  $field = 'h-11 w-full px-3 rounded-xl border border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-sm outline-none focus:ring-2 ring-brand-500';
  $label = 'block mb-1.5 text-sm font-semibold text-slate-700 dark:text-slate-300';
  $hint  = 'mt-1 text-xs text-slate-500';
  $mobiles = old('mobiles', $setting->mobiles ?: ['']);
  if (empty($mobiles)) { $mobiles = ['']; }
@endphp

{{-- Breadcrumb --}}
<div class="flex items-center gap-2 text-sm text-slate-500">
  <span>Settings</span><span>/</span><span class="text-slate-800 dark:text-slate-200 font-medium">Company information</span>
</div>

@if (session('success'))
  <div class="px-4 py-3 rounded-xl bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border border-emerald-500/30 text-sm font-medium">{{ session('success') }}</div>
@endif

@if ($errors->any())
  <div class="px-4 py-3 rounded-xl bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/30 text-sm">
    <ul class="list-disc ml-5">@foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
  </div>
@endif

<form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data"
      class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 overflow-hidden">
  @csrf
  @method('PUT')

  <div class="p-6 border-b border-slate-200 dark:border-slate-800">
    <h2 class="font-bold text-lg">Company information</h2>
    <p class="text-sm text-slate-500">Ei tothho gulo invoice er header o footer e auto boshbe. Arabic version English theke auto toiri hobe.</p>
  </div>

  <div class="p-6 grid grid-cols-1 lg:grid-cols-3 gap-8">

    {{-- Left: Logo + Footer image --}}
    <div class="space-y-8">

      {{-- Logo --}}
      <div>
        <label class="{{ $label }}">Company logo</label>
        <div class="rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 p-5 text-center">
          <div class="mx-auto w-32 h-32 rounded-2xl bg-slate-100 dark:bg-slate-800 grid place-items-center overflow-hidden">
            @if ($setting->logo_url)
              <img id="logoPreview" src="{{ $setting->logo_url }}" alt="Logo" class="w-full h-full object-contain">
            @else
              <img id="logoPreview" src="" alt="Logo" class="w-full h-full object-contain hidden">
              <svg id="logoPlaceholder" class="w-10 h-10 text-slate-400" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A1.5 1.5 0 0 0 21.75 19.5v-15A1.5 1.5 0 0 0 20.25 3H3.75A1.5 1.5 0 0 0 2.25 4.5v15A1.5 1.5 0 0 0 3.75 21Z"/></svg>
            @endif
          </div>

          <label class="mt-4 inline-flex items-center h-10 px-4 rounded-xl bg-slate-900 dark:bg-slate-700 text-white text-sm font-semibold cursor-pointer hover:opacity-90">
            Choose logo
            <input type="file" name="logo" id="logoInput" accept="image/*" class="hidden">
          </label>
          <p class="mt-2 text-xs text-slate-500">PNG, JPG, WEBP, SVG — max 2MB</p>

          @if ($setting->logo)
            <label class="mt-3 inline-flex items-center gap-2 text-sm text-red-500 cursor-pointer">
              <input type="checkbox" name="remove_logo" value="1" class="rounded"> Remove current logo
            </label>
          @endif
        </div>
      </div>

      {{-- Footer image --}}
      <div>
        <label class="{{ $label }}">Invoice footer image</label>
        <div class="rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 p-5 text-center">
          <div class="mx-auto w-full h-24 rounded-xl bg-slate-100 dark:bg-slate-800 grid place-items-center overflow-hidden">
            @if ($setting->footer_url)
              <img id="footerPreview" src="{{ $setting->footer_url }}" alt="Footer" class="max-w-full max-h-full object-contain">
            @else
              <img id="footerPreview" src="" alt="Footer" class="max-w-full max-h-full object-contain hidden">
              <span id="footerPlaceholder" class="text-xs text-slate-400">Brand logos strip</span>
            @endif
          </div>

          <label class="mt-4 inline-flex items-center h-10 px-4 rounded-xl bg-slate-900 dark:bg-slate-700 text-white text-sm font-semibold cursor-pointer hover:opacity-90">
            Choose footer image
            <input type="file" name="footer_image" id="footerInput" accept="image/*" class="hidden">
          </label>
          <p class="mt-2 text-xs text-slate-500">Lomba strip image bhalo — PNG, JPG, WEBP, max 4MB</p>

          @if ($setting->footer_image)
            <label class="mt-3 inline-flex items-center gap-2 text-sm text-red-500 cursor-pointer">
              <input type="checkbox" name="remove_footer" value="1" class="rounded"> Remove current footer
            </label>
          @endif
        </div>
      </div>
    </div>

    {{-- Right: Fields --}}
    <div class="lg:col-span-2 space-y-5">

      <div class="grid md:grid-cols-2 gap-5">
        <div>
          <label class="{{ $label }}">Company name (English) <span class="text-red-500">*</span></label>
          <input type="text" name="name" value="{{ old('name', $setting->name) }}" required class="{{ $field }}" placeholder="Company name">
        </div>
        <div>
          <label class="{{ $label }}">Company name (Arabic)</label>
          <input type="text" name="name_ar" dir="rtl" value="{{ old('name_ar', $setting->name_ar) }}" class="{{ $field }}" placeholder="Khali rakhle auto toiri hobe">
        </div>
      </div>

      <div class="grid md:grid-cols-2 gap-5">
        <div>
          <label class="{{ $label }}">Below company name (English)</label>
          <textarea name="tagline" rows="3" class="w-full px-3 py-2.5 rounded-xl border border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-sm outline-none focus:ring-2 ring-brand-500" placeholder="ELECTRICAL AND SANITARY TRADING&#10;SOLE PROPRIETORSHIP L.L.C">{{ old('tagline', $setting->tagline) }}</textarea>
          <p class="{{ $hint }}">Protita line alada line e likhun.</p>
        </div>
        <div>
          <label class="{{ $label }}">Below company name (Arabic)</label>
          <textarea name="tagline_ar" dir="rtl" rows="3" class="w-full px-3 py-2.5 rounded-xl border border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-sm outline-none focus:ring-2 ring-brand-500" placeholder="Khali rakhle auto toiri hobe">{{ old('tagline_ar', $setting->tagline_ar) }}</textarea>
        </div>
      </div>

      <div class="grid md:grid-cols-2 gap-5">
        <div>
          <label class="{{ $label }}">Company location (English)</label>
          <input type="text" name="address" value="{{ old('address', $setting->address) }}" class="{{ $field }}" placeholder="Address, city">
        </div>
        <div>
          <label class="{{ $label }}">Company location (Arabic)</label>
          <input type="text" name="address_ar" dir="rtl" value="{{ old('address_ar', $setting->address_ar) }}" class="{{ $field }}" placeholder="Khali rakhle auto toiri hobe">
        </div>
      </div>
      <p class="{{ $hint }} -mt-3">Arabic box khali rakhe Save korle English theke auto Arabic hobe. Pore English bodlale Arabic box muche abar Save korun.</p>

      <div class="grid md:grid-cols-2 gap-5">
        <div>
          <label class="{{ $label }}">TRN (VAT number)</label>
          <input type="text" name="trn" value="{{ old('trn', $setting->trn) }}" class="{{ $field }}" placeholder="TRN">
        </div>
        <div>
          <label class="{{ $label }}">Email</label>
          <input type="email" name="email" value="{{ old('email', $setting->email) }}" class="{{ $field }}" placeholder="email@example.com">
        </div>
      </div>

      <div>
        <label class="{{ $label }}">Telephone</label>
        <input type="text" name="telephone" value="{{ old('telephone', $setting->telephone) }}" class="{{ $field }}" placeholder="Telephone number">
      </div>

      <div>
        <label class="{{ $label }}">Mobile number</label>
        <div id="mobileList" class="space-y-3">
          @foreach ($mobiles as $m)
            <div class="mobile-row flex items-center gap-2">
              <input type="text" name="mobiles[]" value="{{ $m }}" class="{{ $field }}" placeholder="Mobile number">
              <button type="button" class="remove-mobile shrink-0 w-11 h-11 grid place-items-center rounded-xl text-red-500 border border-red-500/30 hover:bg-red-500/10" title="Remove">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg>
              </button>
            </div>
          @endforeach
        </div>

        <button type="button" id="addMobile" class="mt-3 h-10 px-4 inline-flex items-center gap-2 rounded-xl border border-slate-300 dark:border-slate-700 text-sm font-semibold hover:bg-slate-100 dark:hover:bg-slate-800">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
          Add more
        </button>
      </div>
    </div>
  </div>

  <div class="px-6 py-4 border-t border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/40 flex justify-end">
    <button class="h-11 px-8 rounded-xl bg-gradient-to-r from-brand-500 to-orange-500 text-slate-900 font-bold text-sm shadow-lg shadow-brand-500/25 hover:opacity-90">Save settings</button>
  </div>
</form>
@endsection

@push('scripts')
<script>
  const list = document.getElementById('mobileList');
  const fieldClass = @json($field);

  function mobileRow() {
    const row = document.createElement('div');
    row.className = 'mobile-row flex items-center gap-2';
    row.innerHTML = `
      <input type="text" name="mobiles[]" class="${fieldClass}" placeholder="Mobile number">
      <button type="button" class="remove-mobile shrink-0 w-11 h-11 grid place-items-center rounded-xl text-red-500 border border-red-500/30 hover:bg-red-500/10" title="Remove">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg>
      </button>`;
    return row;
  }

  document.getElementById('addMobile').addEventListener('click', () => {
    const row = mobileRow();
    list.appendChild(row);
    row.querySelector('input').focus();
  });

  list.addEventListener('click', (e) => {
    const btn = e.target.closest('.remove-mobile');
    if (!btn) return;
    if (list.querySelectorAll('.mobile-row').length === 1) {
      btn.closest('.mobile-row').querySelector('input').value = '';
      return;
    }
    btn.closest('.mobile-row').remove();
  });

  function livePreview(inputId, imgId, placeholderId) {
    document.getElementById(inputId).addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (!file) return;
      const img = document.getElementById(imgId);
      img.src = URL.createObjectURL(file);
      img.classList.remove('hidden');
      document.getElementById(placeholderId)?.classList.add('hidden');
    });
  }
  livePreview('logoInput', 'logoPreview', 'logoPlaceholder');
  livePreview('footerInput', 'footerPreview', 'footerPlaceholder');
</script>
@endpush