@extends('layouts.app')
@section('title', __('nav.customers'))
@section('content')
<div class="d-flex justify-content-between mb-3">
    <h1 class="h4 mb-0">{{ __('nav.customers') }}</h1>
    @can('customers.create')<a class="btn btn-success" href="{{ route('customers.create') }}">{{ __('messages.create') }}</a>@endcan
</div>
<form class="row g-2 mb-3">
    <div class="col-md-4"><input class="form-control" name="q" value="{{ request('q') }}" placeholder="{{ __('messages.search') }}"></div>
    <div class="col-md-2">
        <select class="form-select" name="customer_type">
            <option value="">{{ __('messages.customer_type') }}</option>
            <option value="individual" @selected(request('customer_type')==='individual')>{{ __('status.customer_individual') }}</option>
            <option value="company" @selected(request('customer_type')==='company')>{{ __('status.customer_company') }}</option>
        </select>
    </div>
    <div class="col-md-2"><button class="btn btn-outline-secondary">{{ __('messages.filter') }}</button></div>
</form>
<div class="card"><div class="table-responsive">
<table class="table compact-table mb-0">
    <thead><tr>
        <th>{{ __('messages.name') }}</th><th>{{ __('messages.phone') }}</th>
        <th>{{ __('messages.customer_type') }}</th><th>{{ __('nav.lines') }}</th>
        <th>{{ __('messages.status') }}</th><th></th>
    </tr></thead>
    <tbody>
    @forelse($customers as $c)
        <tr>
            <td><a href="{{ route('customers.show',$c) }}">{{ $c->name }}</a></td>
            <td>{{ $c->phone }}</td>
            <td>{{ $c->customer_type->label() }}</td>
            <td>{{ $c->lines_count }}</td>
            <td>{{ $c->status->label() }}</td>
            <td>@can('customers.edit')<a href="{{ route('customers.edit',$c) }}">{{ __('messages.edit') }}</a>@endcan</td>
        </tr>
    @empty
        <tr><td colspan="6">{{ __('messages.no_results') }}</td></tr>
    @endforelse
    </tbody>
</table></div>
@include('partials.pagination', ['paginator' => $customers])
</div>
@endsection