@extends('layouts/layoutMaster')

@section('title', __('Clients'))

<!-- Vendor Styles -->
@section('vendor-style')
  @vite([
    'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
    'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
    'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
  ])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
  @vite([
    'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
  ])
@endsection

@section('content')
  <div class="row mb-3">
    <div class="col">
      <div class="float-start">
        <h4 class="mt-2">{{__('Clients')}}</h4>
      </div>
    </div>
    <div class="col">
      <div class="float-end">
        <a href="{{ route('client.create') }}" class="btn btn-primary">Create new</a>
      </div>
    </div>
  </div>

  <!-- Filter Section -->
  <div class="row mb-3">
    <div class="col-md-3 mb-3">
      <label for="nameFilter" class="form-label">@lang('Client Name')</label>
      <input type="text" id="nameFilter" name="nameFilter" class="form-control" placeholder="@lang('Search by name')">
    </div>
    <div class="col-md-3 mb-3">
      <label for="ownerFilter" class="form-label">@lang('Owner')</label>
      <select id="ownerFilter" name="ownerFilter" class="form-select">
        <option value="">@lang('All Owners')</option>
        @foreach($users as $user)
          <option value="{{ $user->id }}">{{ $user->code }} - {{ $user->getFullName() }}</option>
        @endforeach
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="statusFilter" class="form-label">@lang('Status')</label>
      <select id="statusFilter" name="statusFilter" class="form-select">
        <option value="">@lang('All')</option>
        <option value="active">@lang('Active')</option>
        <option value="inactive">@lang('Inactive')</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="regionFilter" class="form-label">@lang('Region')</label>
      <select id="regionFilter" name="regionFilter" class="form-select">
        <option value="">@lang('All Regions')</option>
        @foreach($regions as $region)
          <option value="{{ $region }}">{{ $region }}</option>
        @endforeach
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="lastActivityStartDate" class="form-label">@lang('Last Activity Start Date')</label>
      <input type="date" id="lastActivityStartDate" name="lastActivityStartDate" class="form-control">
    </div>
    <div class="col-md-3 mb-3">
      <label for="lastActivityEndDate" class="form-label">@lang('Last Activity End Date')</label>
      <input type="date" id="lastActivityEndDate" name="lastActivityEndDate" class="form-control">
    </div>
    <div class="col-md-3 mb-3 d-flex align-items-end">
      <button type="button" class="btn btn-outline-secondary w-100" id="clearFiltersBtn">
        @lang('Clear Filters')
      </button>
    </div>
  </div>

  <!-- Clients table card -->
  <div class="card">
    <div class="card-datatable table-responsive">
      <table class="datatables-clients table border-top">
        <thead>
        <tr>
          <th>@lang('Sl.No')</th>
          <th>@lang('Name')</th>
          <th>@lang('Phone Number')</th>
          <th>@lang('Email')</th>
          <th>@lang('Address')</th>
          <th>@lang('City/Municipality')</th>
          <th>@lang('Province')</th>
          <th>@lang('Status')</th>
          <th>@lang('Actions')</th>
        </tr>
        </thead>
      </table>
    </div>
  </div>
@endsection

@section('page-script')
  @vite(['resources/assets/js/app/client-index.js'])
@endsection