@extends('layouts/layoutMaster')

@section('title', __('locale.Installments'))

@section('vendor-style')
  @vite(['resources/assets/css/datatables.scss', 'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.scss'])
@endsection

@section('vendor-script')
  @vite(['resources/assets/js/datatables.js', 'resources/assets/vendor/libs/moment/moment.js', 'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js'])
@endsection


@section('content')

  <!-- Product List Table -->
  <div class="card">
    <div class="card-header border-bottom">
      <h5 class="card-title d-none">{{ __('locale.Filter') }}</h5>
      <div class="d-flex justify-content-between align-items-center row pt-0 gap-6 gap-md-0 g-md-6">
        <div class="col-md-4 installment_status"></div>
        <div class="col-md-4 customer">
          <label for="Customers" class="form-label">{{ __('locale.Drivers') }}</label>
          <select id="Customer" class="select2 form-select">
            <option value="">{{ __('locale.All') }}</option>
            @foreach ($customers as $id => $name)
              <option value="{{ $id }}">{{ $name }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-md-4 date_filter">
          <label for="bs-rangepicker-range" class="form-label">{{ __('locale.Date') }}</label>
          <input type="text" class="form-control" placeholder="YYYY-MM-DD to YYYY-MM-DD" id="bs-rangepicker-range" />
        </div>
      </div>
    </div>
    <div class="card-datatable">
      <table class="datatables-installment table">
        <thead class="border-top">
          <tr>
            <th></th>
            <th></th>
            <th>{{ __('locale.Driver Details') }}</th>
            <th>{{ __('locale.Vehicle Details') }}</th>
            <th>{{ __('locale.Date') }}</th>
            <th>{{ __('locale.Installment Details') }}</th>
            <th>{{ __('locale.Due Date') }}</th>
            <th>{{ __('locale.Status') }}</th>
            <th>{{ __('locale.Actions') }}</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
@endsection
@section('page-script')
  @vite(['resources/assets/js/installment.js', 'resources/assets/js/forms-pickers.js'])
@endsection