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

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

  {{-- Header --}}
  <div class="flex items-start justify-between gap-3 flex-wrap border-b border-slate-200 pb-3">
    <div>
      <div class="text-base font-bold text-slate-800">{{ __('suppliers.supplier_ledger') }}</div>
      <div class="text-[12px] font-semibold mt-1">
        {{ $supplier->name }}
        @if($supplier->phone)
          <span class="text-[11px] text-slate-500">({{ $supplier->phone }})</span>
        @endif
      </div>
    </div>

    <div class="flex gap-2 flex-wrap">
      <a class="px-3 py-1.5 border border-slate-300 text-[12px] hover:bg-slate-50"
         href="{{ route('user.suppliers.index') }}">
        {{ __('suppliers.back') }}
      </a>

      <a class="px-3 py-1.5 bg-slate-900 text-white text-[12px] hover:bg-slate-800"
         href="{{ route('user.suppliers.ledger.purchase.create', $supplier->id) }}">
        + {{ __('suppliers.add_purchase') }}
      </a>

      <a class="px-3 py-1.5 bg-emerald-600 text-white text-[12px] hover:bg-emerald-700"
         href="{{ route('user.suppliers.ledger.payment.create', $supplier->id) }}">
        + {{ __('suppliers.add_payment') }}
      </a>

      <a class="px-3 py-1.5 bg-slate-700 text-white text-[12px] hover:bg-slate-800"
         href="{{ route('user.suppliers.ledger.adjust.create', $supplier->id) }}">
        + {{ __('suppliers.add_adjust') }}
      </a>
    </div>
  </div>

  @php
    $currentDue = $current_due ?? (($sum_debit ?? 0) - ($sum_credit ?? 0));
  @endphp

  {{-- Summary --}}
  <div class="mt-4 grid md:grid-cols-3 gap-3">
    <div class="p-3 border border-slate-200 bg-slate-50">
      <div class="text-[11px] text-slate-500">{{ __('suppliers.total_debit_purchases') }}</div>
      <div class="text-base font-bold">{{ number_format((float)($sum_debit ?? 0), 2) }}</div>
    </div>

    <div class="p-3 border border-slate-200 bg-slate-50">
      <div class="text-[11px] text-slate-500">{{ __('suppliers.total_credit_payments') }}</div>
      <div class="text-base font-bold">{{ number_format((float)($sum_credit ?? 0), 2) }}</div>
    </div>

    <div class="p-3 border {{ $currentDue > 0 ? 'border-rose-200 bg-rose-50' : 'border-emerald-200 bg-emerald-50' }}">
      <div class="text-[11px] {{ $currentDue > 0 ? 'text-rose-700' : 'text-emerald-700' }}">
        {{ __('suppliers.current_due') }}
      </div>
      <div class="text-base font-bold {{ $currentDue > 0 ? 'text-rose-700' : 'text-emerald-700' }}">
        {{ number_format((float)$currentDue, 2) }}
      </div>
    </div>
  </div>

  {{-- Filters --}}
  <form class="mt-4 grid md:grid-cols-8 gap-2 text-[12px]" method="GET">
    <select class="border border-slate-300 px-2 py-1.5" name="type">
      <option value="">{{ __('suppliers.all_types') }}</option>
      <option value="purchase" @selected(request('type') === 'purchase')>{{ __('suppliers.purchase') }}</option>
      <option value="payment" @selected(request('type') === 'payment')>{{ __('suppliers.payment') }}</option>
      <option value="adjust" @selected(request('type') === 'adjust')>{{ __('suppliers.adjust') }}</option>
    </select>

    <input type="date" class="border border-slate-300 px-2 py-1.5" name="date" value="{{ request('date') }}">

    <input type="number" min="1" max="12" class="border border-slate-300 px-2 py-1.5"
           name="month" value="{{ request('month') }}" placeholder="{{ __('suppliers.month') }}">

    <input type="number" min="2000" max="2100" class="border border-slate-300 px-2 py-1.5"
           name="year" value="{{ request('year') }}" placeholder="{{ __('suppliers.year') }}">

    <input class="border border-slate-300 px-2 py-1.5 md:col-span-2"
           name="search" value="{{ request('search') }}"
           placeholder="{{ __('suppliers.search_note_memo_no') }}">

    <button class="px-3 py-1.5 bg-slate-100 hover:bg-slate-200">
      {{ __('suppliers.filter') }}
    </button>

    <a class="px-3 py-1.5 border border-slate-300 text-center hover:bg-slate-50"
       href="{{ route('user.suppliers.ledger.index', $supplier->id) }}">
      {{ __('suppliers.reset') }}
    </a>
  </form>

  {{-- Table --}}
  <div class="mt-4 overflow-x-auto">
    <table class="min-w-full text-[12px]">
      <thead>
        <tr class="text-left text-slate-500 border-b border-slate-200">
          <th class="py-2">{{ __('suppliers.date') }}</th>
          <th>{{ __('suppliers.type') }}</th>
          <th>{{ __('suppliers.debit') }}</th>
          <th>{{ __('suppliers.credit') }}</th>
          <th>{{ __('suppliers.memo_proof') }}</th>
          <th>{{ __('suppliers.note') }}</th>
          <th class="text-right">{{ __('suppliers.action') }}</th>
        </tr>
      </thead>

      <tbody>
        @forelse($transactions as $t)
          <tr class="border-b border-slate-200 last:border-0">
            <td class="py-2">
              <div class="font-semibold">
                {{ optional($t->posted_at)->format('d M Y') ?? $t->created_at->format('d M Y') }}
              </div>
              <div class="text-[11px] text-slate-500">
                {{ optional($t->posted_at)->format('h:i A') ?? $t->created_at->format('h:i A') }}
              </div>
            </td>

            <td>
              <span class="px-2 py-0.5 text-[10px] border bg-slate-50">
                {{ strtoupper($t->type) }}
              </span>
              <div class="text-[11px] text-slate-500 mt-0.5">
                {{ $t->memo_no ?? $t->trx_no ?? '' }}
              </div>
            </td>

            <td class="font-semibold {{ $t->debit > 0 ? 'text-rose-600' : 'text-slate-700' }}">
              {{ number_format((float)$t->debit, 2) }}
            </td>

            <td class="font-semibold {{ $t->credit > 0 ? 'text-emerald-700' : 'text-slate-700' }}">
              {{ number_format((float)$t->credit, 2) }}
            </td>

            <td>
              <div class="flex flex-col gap-1">
                @if($t->memo_photo)
                  <a class="underline text-[11px]" target="_blank" href="{{ asset($t->memo_photo) }}">
                    {{ __('suppliers.view_memo') }}
                  </a>
                @endif

                @if($t->payment_proof_photo)
                  <a class="underline text-[11px]" target="_blank" href="{{ asset($t->payment_proof_photo) }}">
                    {{ __('suppliers.view_proof') }}
                  </a>
                @endif

                @if(!$t->memo_photo && !$t->payment_proof_photo)
                  <span class="text-slate-500 text-[11px]">—</span>
                @endif
              </div>
            </td>

            <td class="text-slate-600 max-w-[260px] whitespace-pre-line break-words">
              {{ $t->note }}
            </td>

            <td class="text-right whitespace-nowrap">
              <a class="px-3 py-1 bg-slate-100 text-[11px] hover:bg-slate-200"
                 href="{{ route('user.suppliers.ledger.edit', [$supplier->id, $t->id]) }}">
                {{ __('suppliers.edit') }}
              </a>

              <form class="inline js-delete" method="POST"
                    action="{{ route('user.suppliers.ledger.destroy', [$supplier->id, $t->id]) }}">
                @csrf
                @method('DELETE')

                <button type="submit"
                        class="px-3 py-1 bg-rose-50 text-rose-700 text-[11px] hover:bg-rose-100 border border-rose-200">
                  {{ __('suppliers.delete') }}
                </button>
              </form>
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="7" class="py-6 text-center text-[12px] text-slate-500">
              {{ __('suppliers.no_transactions_found') }}
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

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

<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_transaction_confirm_title')),
        text: @json(__('suppliers.delete_transaction_warning')),
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: @json(__('suppliers.yes_delete')),
        cancelButtonText: @json(__('suppliers.cancel'))
      }).then((r) => {
        if (r.isConfirmed) f.submit();
      });
    });
  });
});
</script>
@endsection