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

@section('content')
<x-filter-card>
    <x-filter-field filter="employment_sector" :label="__('customers.employment_sector')" col="col-6 col-md-3"
        :options="['gov' => __('customers.sectors.gov'), 'private' => __('customers.sectors.private'), 'military' => __('customers.sectors.military'), 'retired' => __('customers.sectors.retired')]" />
    <x-filter-field filter="id_type" :label="__('customers.id_type')" col="col-6 col-md-3"
        :options="['national_id' => __('customers.id_types.national_id'), 'iqama' => __('customers.id_types.iqama')]" />
    <x-filter-field filter="city" :label="__('app.city')" col="col-6 col-md-3" type="text" :placeholder="__('app.city')" />
</x-filter-card>

<div class="card shadow-sm">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <span class="fw-bold"><i class="bi bi-people me-1"></i> {{ __('app.customers') }}</span>
        @can('customers.create')
            <a href="{{ route('customers.create') }}" class="btn btn-primary btn-sm">
                <i class="bi bi-plus-lg"></i> {{ __('app.create') }}
            </a>
        @endcan
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover table-striped align-middle w-100" id="customers-table">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>{{ __('app.name') }}</th>
                        <th>{{ __('app.national_id') }}</th>
                        <th>{{ __('app.phone') }}</th>
                        <th>{{ __('app.city') }}</th>
                        <th>{{ __('app.created_at') }}</th>
                        <th>{{ __('app.actions') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    window.dtFilteredTable('#customers-table', '{{ route('customers.data') }}', [
        { data: 'id' },
        { data: 'name' },
        { data: 'national_id' },
        { data: 'phone' },
        { data: 'city' },
        { data: 'created_at' },
        { data: 'actions', orderable: false, searchable: false, className: 'text-center' },
    ]);
});
</script>
@endpush