@extends('layouts.app')

@section('title', 'Customers')
@section('page', 'customers')
@section('customersNav', 'list')

@php
  $statusVariant = fn ($s) => $s === 'Active' ? 'success' : 'danger';
  $toneCycle = ['primary', 'success', 'warning', 'info', 'danger'];
  $totalCustomers = $customers->count();
  $activeCustomers = $customers->where('status', 'Active')->count();
  $inactiveCustomers = $customers->where('status', 'Inactive')->count();
  $totalOutstanding = $customers->sum('outstanding_amount');
@endphp

@section('content')
  @include('partials.customers-nav')

  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  <x-data-table
    id="customers-table"
    class="catalog-table customers-table"
    title="Customers"
    subtitle="Manage customer records and balances."
    search-placeholder="Search customers..."
    :selectable="false"
    :page-size="10"
  >
    <x-slot:toolbarActions>
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#customerModal" data-customer-add>
        <i class="bi bi-plus-lg"></i> Add Customer
      </button>
    </x-slot:toolbarActions>
    <x-slot:filters>
      <select class="form-select form-select-sm" data-edt-col-filter="membership" aria-label="Membership">
        <option value="">All Memberships</option>
        @foreach ($memberships as $membership)
          <option>{{ $membership->name }}</option>
        @endforeach
      </select>
      <select class="form-select form-select-sm" data-edt-col-filter="group" aria-label="Group">
        <option value="">All Groups</option>
        @foreach ($groups as $group)
          <option>{{ $group->name }}</option>
        @endforeach
      </select>
      <select class="form-select form-select-sm" data-edt-col-filter="price_group" aria-label="Price Group">
        <option value="">All Price Groups</option>
        @foreach ($priceGroups as $priceGroup)
          <option>{{ $priceGroup->name }}</option>
        @endforeach
      </select>
      <select class="form-select form-select-sm" data-edt-col-filter="status" aria-label="Status">
        <option value="">All Statuses</option>
        <option>Active</option>
        <option>Inactive</option>
      </select>
    </x-slot:filters>
    <x-slot:afterToolbar>
      <div class="product-stats-panel">
        <div class="row g-3 product-stats product-stats--4 justify-content-start">
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--primary">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-people"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Total Customers</p>
                <p class="product-kpi__value">{{ $totalCustomers }}</p>
                <p class="product-kpi__meta">All customer records</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--success">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-check-lg"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Active</p>
                <p class="product-kpi__value">{{ $activeCustomers }}</p>
                <p class="product-kpi__meta">Currently in use</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--warning">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-cash-stack"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Outstanding</p>
                <p class="product-kpi__value">{{ number_format((float) $totalOutstanding, 2) }}</p>
                <p class="product-kpi__meta">Total due amount</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--inactive">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-pause-circle-fill"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Inactive</p>
                <p class="product-kpi__value">{{ $inactiveCustomers }}</p>
                <p class="product-kpi__meta">Not available</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </x-slot:afterToolbar>
    <x-slot:head>
      <x-data-table-th label="Name" col="name" />
      <x-data-table-th label="Phone No" col="phone" />
      <x-data-table-th label="Address" col="location" />
      <x-data-table-th label="Membership" col="membership" />
      <x-data-table-th label="Group" col="group" />
      <x-data-table-th label="Price Group" col="price_group" />
      <x-data-table-th label="Loyalty Points" col="loyalty_points" sort-type="number" />
      <x-data-table-th label="Outstanding Amount" col="outstanding" sort-type="number" />
      <x-data-table-th label="Status" col="status" />
    </x-slot:head>
    <x-slot:body>
      @forelse ($customers as $row)
        @php $tone = $toneCycle[($loop->index) % count($toneCycle)]; @endphp
        <tr data-id="{{ $row->id }}">
          <td data-col="name" class="cell-primary">
            <span class="cat-cell">
              <span class="cat-cell__icon cat-cell__icon--{{ $tone }}" aria-hidden="true">
                <i class="bi bi-person"></i>
              </span>
              <span class="cat-cell__name">
                {{ $row->name }}
                @if ($row->is_locked)
                  <x-badge variant="warning" class="ms-1">Default</x-badge>
                @endif
              </span>
            </span>
          </td>
          <td data-col="phone">{{ $row->phone ?: '—' }}</td>
          <td data-col="location">{{ $row->location ?: '—' }}</td>
          <td data-col="membership">
            @if ($row->membership)
              <x-badge variant="info">{{ $row->membership->name }}</x-badge>
            @else
              <x-badge variant="neutral">—</x-badge>
            @endif
          </td>
          <td data-col="group">
            @if ($row->group)
              <x-badge variant="primary">{{ $row->group->name }}</x-badge>
            @else
              <x-badge variant="neutral">—</x-badge>
            @endif
          </td>
          <td data-col="price_group">
            @if ($row->priceGroup)
              <x-badge variant="warning">{{ $row->priceGroup->name }}</x-badge>
            @else
              <x-badge variant="neutral">—</x-badge>
            @endif
          </td>
          <td data-col="loyalty_points" data-sort-value="{{ (int) $row->loyalty_points }}">
            {{ number_format((int) $row->loyalty_points) }}
          </td>
          <td data-col="outstanding" data-sort-value="{{ $row->outstanding_amount }}">
            {{ number_format((float) $row->outstanding_amount, 2) }}
          </td>
          <td data-col="status"><x-badge :variant="$statusVariant($row->status)">{{ $row->status }}</x-badge></td>
          <td data-edt-actions>
            <div class="edt-row-actions product-actions">
              @if ($row->is_locked)
                <button
                  type="button"
                  class="btn btn-sm btn-icon product-action product-action--edit product-action--disabled"
                  title="Default customer — cannot edit"
                  aria-label="Edit disabled"
                  disabled
                >
                  <i class="bi bi-pencil" aria-hidden="true"></i>
                </button>
                <button
                  type="button"
                  class="btn btn-sm btn-icon product-action product-action--delete product-action--disabled"
                  title="Default customer — cannot delete"
                  aria-label="Delete disabled"
                  disabled
                >
                  <i class="bi bi-trash" aria-hidden="true"></i>
                </button>
              @else
                <button
                  type="button"
                  class="btn btn-sm btn-icon product-action product-action--edit"
                  title="Edit"
                  aria-label="Edit"
                  data-edt-action="edit"
                  data-backend
                  data-customer-edit
                  data-id="{{ $row->id }}"
                  data-name="{{ $row->name }}"
                  data-phone="{{ $row->phone }}"
                  data-location="{{ $row->location }}"
                  data-membership-id="{{ $row->membership_id }}"
                  data-customer-group-id="{{ $row->customer_group_id }}"
                  data-price-group-id="{{ $row->price_group_id }}"
                  data-outstanding-amount="{{ $row->outstanding_amount }}"
                  data-status="{{ $row->status }}"
                  data-update-url="{{ route('customers.update', $row) }}"
                >
                  <i class="bi bi-pencil" aria-hidden="true"></i>
                </button>
                <button
                  type="button"
                  class="btn btn-sm btn-icon product-action product-action--delete"
                  title="Delete"
                  aria-label="Delete"
                  data-edt-action="delete"
                  data-backend
                  data-delete-open
                  data-delete-url="{{ route('customers.destroy', $row) }}"
                  data-delete-label="{{ $row->name }}"
                  data-delete-type="customer"
                >
                  <i class="bi bi-trash" aria-hidden="true"></i>
                </button>
              @endif
            </div>
          </td>
        </tr>
      @empty
        <tr data-edt-empty-row>
          <td colspan="11" class="text-center text-muted py-4">No customers yet. Add your first customer.</td>
        </tr>
      @endforelse
    </x-slot:body>
  </x-data-table>

  <div class="modal fade" id="customerModal" tabindex="-1" aria-labelledby="customerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content edt-modal">
        <form id="customer-form" method="post" action="{{ route('customers.store') }}" data-store-url="{{ route('customers.store') }}">
          @csrf
          <input type="hidden" name="_method" id="customer_form_method" value="POST">
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="customerModalLabel">Add customer</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="row g-3">
              <div class="col-md-8">
                <label class="form-label" for="customer_name">Name</label>
                <input type="text" class="form-control" id="customer_name" name="name" required value="{{ old('name') }}">
              </div>
              <div class="col-md-4">
                <label class="form-label" for="customer_status">Status</label>
                <select class="form-select" id="customer_status" name="status">
                  <option value="Active" @selected(old('status', 'Active') === 'Active')>Active</option>
                  <option value="Inactive" @selected(old('status') === 'Inactive')>Inactive</option>
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="customer_phone">Phone No</label>
                <input type="text" class="form-control" id="customer_phone" name="phone" value="{{ old('phone') }}">
              </div>
              <div class="col-md-6">
                <label class="form-label" for="customer_location">Address</label>
                <input type="text" class="form-control" id="customer_location" name="location" value="{{ old('location') }}">
              </div>
              <div class="col-md-4">
                <label class="form-label" for="customer_membership">Membership</label>
                <select class="form-select" id="customer_membership" name="membership_id">
                  <option value="">None</option>
                  @foreach ($memberships as $membership)
                    <option value="{{ $membership->id }}" @selected((string) old('membership_id') === (string) $membership->id)>{{ $membership->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-4">
                <label class="form-label" for="customer_group">Group</label>
                <select class="form-select" id="customer_group" name="customer_group_id">
                  <option value="">None</option>
                  @foreach ($groups as $group)
                    <option value="{{ $group->id }}" @selected((string) old('customer_group_id') === (string) $group->id)>{{ $group->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-4">
                <label class="form-label" for="customer_price_group">Price Group</label>
                <select
                  class="form-select"
                  id="customer_price_group"
                  name="price_group_id"
                  required
                  data-default-price-group-id="{{ $defaultPriceGroupId }}"
                >
                  @foreach ($priceGroups as $priceGroup)
                    <option
                      value="{{ $priceGroup->id }}"
                      @selected((string) old('price_group_id', $defaultPriceGroupId) === (string) $priceGroup->id)
                    >{{ $priceGroup->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-4">
                <label class="form-label" for="customer_outstanding">Outstanding Amount</label>
                <input type="number" class="form-control" id="customer_outstanding" name="outstanding_amount" value="{{ old('outstanding_amount', 0) }}" min="0" step="0.01">
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary" id="customer-form-submit">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content edt-modal">
        <form id="delete-confirm-form" method="post" action="#">
          @csrf
          @method('DELETE')
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="deleteConfirmModalLabel">Delete customer</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p class="mb-0">Are you sure you want to delete <strong id="delete-confirm-name">this item</strong>? This action cannot be undone.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-danger"><i class="bi bi-trash"></i> Delete</button>
          </div>
        </form>
      </div>
    </div>
  </div>
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/products.css') }}" rel="stylesheet">
@endpush

@push('scripts')
  <script src="{{ asset('assets/js/pages/customers.js') }}"></script>
@endpush