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

@section('content')
<div class="bg-white border border-slate-200 p-3 shadow-sm">
  <div class="flex items-center justify-between gap-3 flex-wrap">
    <div>
      <div class="text-base font-bold text-slate-900">{{ __('customers.customers') }}</div>
    </div>

    <a href="{{ route('user.customers.create') }}"
       class="px-3 py-1.5 bg-slate-900 text-white text-xs hover:bg-slate-800">
      + {{ __('customers.add_customer') }}
    </a>
  </div>

  <form class="mt-3 grid md:grid-cols-4 gap-2 text-xs" method="GET">
    <input
      class="border border-slate-300 px-2.5 py-1.5 text-xs"
      name="search"
      value="{{ request('search') }}"
      placeholder="{{ __('customers.search_name_phone') }}"
    >

    <select class="border border-slate-300 px-2.5 py-1.5 text-xs" name="status">
      <option value="">{{ __('customers.all_status') }}</option>
      <option value="active" @selected(request('status')==='active')>{{ __('customers.active') }}</option>
      <option value="inactive" @selected(request('status')==='inactive')>{{ __('customers.inactive') }}</option>
    </select>

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

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

  <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.name') }}</th>
          <th class="py-2 pr-3 font-semibold">{{ __('customers.phone') }}</th>
          <th class="py-2 pr-3 font-semibold">{{ __('customers.due') }}</th>
          <th class="py-2 pr-3 font-semibold">{{ __('customers.status') }}</th>
          <th class="py-2 text-right font-semibold">{{ __('customers.action') }}</th>
        </tr>
      </thead>

      <tbody>
        @forelse($customers as $c)
          <tr class="border-b border-slate-200 last:border-0">
            <td class="py-2.5 pr-3 font-semibold text-slate-800">{{ $c->name }}</td>

            <td class="py-2.5 pr-3 text-slate-700">{{ $c->phone }}</td>

            <td class="py-2.5 pr-3 font-bold {{ $c->current_due > 0 ? 'text-rose-600' : 'text-emerald-600' }}">
              {{ number_format($c->current_due, 2) }}
            </td>

            <td class="py-2.5 pr-3">
              <span class="inline-block px-2 py-0.5 text-[10px] border {{ $c->status==='active' ? 'bg-emerald-50 border-emerald-200 text-emerald-700' : 'bg-slate-50 border-slate-200 text-slate-600' }}">
                {{ $c->status === 'active' ? __('customers.active') : __('customers.inactive') }}
              </span>
            </td>

            <td class="py-2.5 text-right">
              <div class="inline-flex items-center gap-1 flex-wrap justify-end">
                <a class="px-2.5 py-1 bg-slate-900 text-white text-[11px] hover:bg-slate-800"
                   href="{{ route('user.customers.ledger.index', $c) }}">
                  {{ __('customers.view_ledger') }}
                </a>

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

                <form class="inline js-delete" method="POST" action="{{ route('user.customers.destroy', $c) }}">
                  @csrf
                  @method('DELETE')
                  <button type="submit" 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>
              </div>
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="5" class="py-6 text-center text-xs text-slate-500">
              {{ __('customers.no_customers_found') }}
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  <div class="mt-3 text-xs">
    {{ $customers->links() }}
  </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.js-delete').forEach(function(form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();

            Swal.fire({
                title: "{{ __('customers.delete_confirm_title') }}",
                text: "{{ __('customers.delete_confirm_text') }}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc2626',
                cancelButtonColor: '#64748b',
                confirmButtonText: "{{ __('customers.delete_confirm_button') }}",
                cancelButtonText: "{{ __('customers.cancel') }}"
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        });
    });
});
</script>
@endpush