@extends('layouts.admin')

@section('heading', 'Price Settings')
@section('subheading', 'Set prices for each garment your shop offers, by your own age types.')

@section('content')
@include('partials.master-tabs')
@if($ageTypes->isEmpty())
  <div class="card p-6 text-center">
    <p class="text-sm mb-3" style="color:#6b6470;">You haven't set up any age types yet.</p>
    <a href="{{ route('shop.ageTypes.index') }}" class="text-sm font-medium" style="color:#C2185B;">Create age types first →</a>
  </div>
@else

<div id="statusBanner" class="hidden mb-4 text-sm rounded-lg px-4 py-3" style="background:#E1F5EE; color:#0F6E56;"></div>

<div class="card p-0 overflow-x-auto">
  <table class="w-full text-sm">
    <thead>
      <tr class="text-left" style="background:#FFF9F0; color:#a19a8f;">
        <th class="px-5 py-3 font-medium text-xs">Garment</th>
        @foreach($ageTypes as $ageType)
          <th class="px-5 py-3 font-medium text-xs">{{ $ageType->name }} ₹</th>
        @endforeach
        <th class="px-5 py-3 font-medium text-xs text-right">Save</th>
      </tr>
    </thead>
    <tbody>
      @forelse($shopGarments as $sg)
        <tr class="border-t price-row" data-id="{{ $sg->id }}" style="border-color:#f2ece0;">
          <td class="px-5 py-3 font-medium" style="color:#1A1625;">
            {{ $sg->garmentType->name }}{{ $sg->garmentType->name_ta ? ' / '.$sg->garmentType->name_ta : '' }}
          </td>
          @foreach($ageTypes as $ageType)
            @php $existing = $sg->prices->firstWhere('age_type_id', $ageType->id); @endphp
            <td class="px-5 py-3">
              <input type="number" min="0" value="{{ $existing->price ?? 0 }}" data-age-type-id="{{ $ageType->id }}"
                class="price-input w-24 px-2 py-1.5 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
            </td>
          @endforeach
          <td class="px-5 py-3 text-right">
            <button type="button" class="save-price-btn text-xs px-3 py-1.5 rounded-lg font-medium text-white" style="background:#5E35B1;">Save</button>
          </td>
        </tr>
      @empty
        <tr><td colspan="{{ $ageTypes->count() + 2 }}" class="px-5 py-8 text-center" style="color:#a19a8f;">No garments offered yet.</td></tr>
      @endforelse
    </tbody>
  </table>
</div>
@endif

@endsection

@push('scripts')
<script>
document.querySelectorAll('.save-price-btn').forEach(btn => {
  btn.addEventListener('click', function () {
    const row = this.closest('.price-row');
    const shopGarmentId = row.dataset.id;

    const prices = {};
    row.querySelectorAll('.price-input').forEach(input => {
      prices[input.dataset.ageTypeId] = input.value || 0;
    });

    this.disabled = true;
    this.textContent = 'Saving...';

    fetch(`/settings/prices/${shopGarmentId}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
      body: JSON.stringify({ prices }),
    })
      .then(r => r.json())
      .then(data => {
        this.disabled = false;
        this.textContent = 'Save';
        showStatus(data.message || 'Updated');
      })
      .catch(() => {
        this.disabled = false;
        this.textContent = 'Save';
        showStatus('Something went wrong.', true);
      });
  });
});

function showStatus(msg, isError = false) {
  const banner = document.getElementById('statusBanner');
  banner.textContent = msg;
  banner.style.background = isError ? '#FCEBEB' : '#E1F5EE';
  banner.style.color = isError ? '#791F1F' : '#0F6E56';
  banner.classList.remove('hidden');
  setTimeout(() => banner.classList.add('hidden'), 2500);
}
</script>
@endpush