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

@section('content')
<div class="bg-white border border-slate-200 p-3 shadow-sm">

  <div class="flex items-start justify-between gap-3 flex-wrap">
    <div>
      <div class="text-base font-bold text-slate-900">{{ __('customers.customer_ledger') }}</div>
      <div class="text-xs font-semibold mt-1">
        {{ $customer->name }}
        @if($customer->phone)
          <span class="text-[10px] text-slate-500">({{ $customer->phone }})</span>
        @endif
      </div>
    </div>

    <div class="flex gap-1 flex-wrap">
      <a class="px-2.5 py-1 text-xs border border-slate-300 hover:bg-slate-50"
         href="{{ route('user.customers.index') }}">
        {{ __('customers.back') }}
      </a>

      <a class="px-2.5 py-1 bg-slate-900 text-white text-xs hover:bg-slate-800"
         href="{{ route('user.customers.ledger.bill.create', $customer) }}">
        + {{ __('customers.add_bill') }}
      </a>

      <a class="px-2.5 py-1 bg-emerald-600 text-white text-xs hover:bg-emerald-700"
         href="{{ route('user.customers.ledger.payment.create', $customer) }}">
        + {{ __('customers.add_payment') }}
      </a>

      <a class="px-2.5 py-1 bg-slate-700 text-white text-xs hover:bg-slate-800"
         href="{{ route('user.customers.ledger.adjust.create', $customer) }}">
        + {{ __('customers.add_adjust') }}
      </a>
    </div>
  </div>

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

  {{-- SUMMARY --}}
  <div class="mt-3 grid md:grid-cols-3 gap-2">
    <div class="p-3 border border-slate-200 bg-slate-50">
      <div class="text-[10px] text-slate-500">{{ __('customers.total_debit_bills') }}</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-[10px] text-slate-500">{{ __('customers.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 ? 'bg-rose-50 border-rose-200' : 'bg-emerald-50 border-emerald-200' }}">
      <div class="text-[10px] {{ $currentDue > 0 ? 'text-rose-700' : 'text-emerald-700' }}">
        {{ __('customers.current_due') }}
      </div>
      <div class="text-base font-bold {{ $currentDue > 0 ? 'text-rose-700' : 'text-emerald-700' }}">
        {{ number_format($currentDue, 2) }}
      </div>
    </div>
  </div>

  {{-- FILTER --}}
  <form class="mt-3 grid md:grid-cols-8 gap-2 text-xs" method="GET">
    <select class="border border-slate-300 px-2 py-1.5" name="type">
      <option value="">{{ __('customers.all_types') }}</option>
      <option value="bill" @selected(request('type') === 'bill')>{{ __('customers.bill') }}</option>
      <option value="payment" @selected(request('type') === 'payment')>{{ __('customers.payment') }}</option>
      <option value="adjust" @selected(request('type') === 'adjust')>{{ __('customers.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="{{ __('customers.month') }}"
    >

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

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

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

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

  {{-- TABLE --}}
  <div class="mt-3 overflow-x-auto">
    <table class="min-w-full text-xs">
      <thead>
        <tr class="text-left text-slate-500 border-b border-slate-200">
          <th class="py-2 pr-3 font-semibold">{{ __('customers.date') }}</th>
          <th class="py-2 pr-3 font-semibold">{{ __('customers.type') }}</th>
          <th class="py-2 pr-3 font-semibold">{{ __('customers.debit') }}</th>
          <th class="py-2 pr-3 font-semibold">{{ __('customers.credit') }}</th>
          <th class="py-2 pr-3 font-semibold">{{ __('customers.bill_proof') }}</th>
          <th class="py-2 pr-3 font-semibold">{{ __('customers.note') }}</th>
          <th class="py-2 text-right font-semibold">{{ __('customers.action') }}</th>
        </tr>
      </thead>

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

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

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

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

            <td class="py-2.5 pr-3">
              <div class="flex flex-col gap-0.5">
                @if($t->bill_photo)
                  <a class="underline text-[11px]" target="_blank" href="{{ asset($t->bill_photo) }}">
                    {{ __('customers.view_bill') }}
                  </a>
                @endif

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

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

            <td class="py-2.5 pr-3 text-slate-600 max-w-[280px] text-[11px]">
              {{ $t->note }}
            </td>

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

              <form class="inline js-delete" method="POST"
                    action="{{ route('user.customers.ledger.destroy', [$customer, $t]) }}">
                @csrf
                @method('DELETE')
                <button class="px-2.5 py-1 bg-rose-50 text-rose-700 text-[11px] hover:bg-rose-100 border border-rose-200">
                  {{ __('customers.delete') }}
                </button>
              </form>
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="7" class="py-6 text-center text-xs text-slate-500">
              {{ __('customers.no_transactions_found') }}
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  <div class="mt-3 text-xs">
    {{ $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: "{{ __('customers.delete_transaction_confirm') }}",
        text: "{{ __('customers.delete_transaction_not_recoverable') }}",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: "{{ __('customers.yes_delete') }}",
        cancelButtonText: "{{ __('customers.cancel') }}"
      }).then((r) => { if (r.isConfirmed) f.submit(); });
    });
  });
});
</script>
@endsection