@extends('layouts.user')
@section('title', __('suppliers.suppliers'))

@section('content')
<div class="border border-slate-200 bg-white p-4 shadow-sm text-[13px]">

  {{-- Header --}}
  <div class="flex items-center justify-between gap-3 flex-wrap border-b border-slate-200 pb-3">
    <div>
      <div class="text-base font-bold text-slate-800">{{ __('suppliers.suppliers') }}</div>
    </div>

    <a href="{{ route('user.suppliers.create') }}"
       class="bg-slate-900 px-4 py-2 text-[12px] font-medium text-white hover:bg-slate-800">
      + {{ __('suppliers.add_supplier') }}
    </a>
  </div>

  {{-- Filters --}}
  <form class="mt-4 grid gap-2 md:grid-cols-6 text-[12px]" method="GET">
    <input class="border border-slate-300 px-3 py-2 text-[12px]"
           name="search"
           value="{{ request('search') }}"
           placeholder="{{ __('suppliers.search_name_phone') }}">

    <select class="border border-slate-300 px-3 py-2 text-[12px]" name="status">
      <option value="">{{ __('suppliers.all_status') }}</option>
      <option value="active" @selected(request('status') === 'active')>{{ __('suppliers.active') }}</option>
      <option value="inactive" @selected(request('status') === 'inactive')>{{ __('suppliers.inactive') }}</option>
    </select>

    <button class="bg-slate-100 px-4 py-2 text-[12px] hover:bg-slate-200">
      {{ __('suppliers.filter') }}
    </button>

    <a class="border border-slate-300 px-4 py-2 text-center text-[12px] hover:bg-slate-50"
       href="{{ route('user.suppliers.index') }}">
      {{ __('suppliers.reset') }}
    </a>

    <div class="md:col-span-2 flex items-center justify-end text-[11px] text-slate-500">
      {{ __('suppliers.total') }}: {{ $suppliers->total() }}
    </div>
  </form>

  {{-- Table --}}
  <div class="mt-4 overflow-x-auto">
    <table class="min-w-full text-[12px]">
      <thead>
        <tr class="border-b border-slate-200 text-left text-slate-500">
          <th class="py-2 pr-3 font-semibold">{{ __('suppliers.name') }}</th>
          <th class="py-2 pr-3 font-semibold">{{ __('suppliers.phone') }}</th>
          <th class="py-2 pr-3 font-semibold">{{ __('suppliers.opening_due') }}</th>
          <th class="py-2 pr-3 font-semibold">{{ __('suppliers.current_due') }}</th>
          <th class="py-2 pr-3 font-semibold">{{ __('suppliers.status') }}</th>
          <th class="py-2 text-right font-semibold">{{ __('suppliers.action') }}</th>
        </tr>
      </thead>

      <tbody>
        @forelse($suppliers as $s)
          <tr class="border-b border-slate-200 last:border-0">
            <td class="py-3 pr-3 align-top">
              <div class="font-semibold text-slate-800">{{ $s->name }}</div>
              <div class="text-[11px] text-slate-500">{{ $s->address }}</div>
            </td>

            <td class="pr-3 align-top text-slate-700">{{ $s->phone }}</td>

            <td class="pr-3 align-top font-semibold text-slate-800">
              {{ number_format($s->opening_balance, 2) }}
            </td>

            @php
              $due = $s->current_due ?? (($s->transactions_sum_debit ?? 0) - ($s->transactions_sum_credit ?? 0));
            @endphp

            <td class="pr-3 align-top font-bold {{ $due > 0 ? 'text-rose-600' : 'text-emerald-700' }}">
              {{ number_format($due, 2) }}
            </td>

            <td class="pr-3 align-top">
              <span class="inline-block border px-2 py-1 text-[11px]
                {{ $s->status === 'active'
                  ? 'bg-emerald-50 border-emerald-200 text-emerald-700'
                  : 'bg-slate-50 border-slate-200 text-slate-600' }}">
                {{ $s->status === 'active' ? __('suppliers.active') : __('suppliers.inactive') }}
              </span>
            </td>

            <td class="align-top text-right whitespace-nowrap">
              <a class="inline-block bg-slate-100 px-3 py-1.5 text-[11px] hover:bg-slate-200"
                 href="{{ route('user.suppliers.ledger.index', $s) }}">
                {{ __('suppliers.view_ledger') }}
              </a>

              <a class="inline-block bg-slate-100 px-3 py-1.5 text-[11px] hover:bg-slate-200"
                 href="{{ route('user.suppliers.edit', $s) }}">
                {{ __('suppliers.edit') }}
              </a>

              <form class="inline js-delete" method="POST" action="{{ route('user.suppliers.destroy', $s) }}">
                @csrf
                @method('DELETE')
                <button class="border border-rose-200 bg-rose-50 px-3 py-1.5 text-[11px] text-rose-700 hover:bg-rose-100">
                  {{ __('suppliers.delete') }}
                </button>
              </form>
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="6" class="py-8 text-center text-[12px] text-slate-500">
              {{ __('suppliers.no_suppliers_found') }}
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  <div class="mt-4">
    {{ $suppliers->links() }}
  </div>
</div>

{{-- SweetAlert delete confirm --}}
<script>
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('form.js-delete').forEach(f => {
    f.addEventListener('submit', (e) => {
      e.preventDefault();
      if (typeof Swal === 'undefined') { f.submit(); return; }

      Swal.fire({
        title: @json(__('suppliers.delete_confirm_title')),
        text: @json(__('suppliers.delete_supplier_warning')),
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: @json(__('suppliers.yes_delete')),
        cancelButtonText: @json(__('suppliers.cancel'))
      }).then((r) => {
        if (r.isConfirmed) f.submit();
      });
    });
  });
});
</script>
@endsection