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

@section('content')
<x-filter-card>
    <x-filter-field filter="status" :label="__('app.status')" col="col-6 col-md-4"
        :options="['draft' => __('contracts.statuses.draft'), 'printed' => __('contracts.statuses.printed'), 'signed' => __('contracts.statuses.signed')]" />
</x-filter-card>

<div class="card shadow-sm">
    <div class="card-header bg-white fw-bold"><i class="bi bi-file-earmark-text me-1"></i> {{ __('contracts.contracts') }}</div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover table-striped align-middle w-100" id="contracts-table">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>{{ __('contracts.contract_number') }}</th>
                        <th>{{ __('applications.columns.applicant_name') }}</th>
                        <th>{{ __('applications.columns.finance_product') }}</th>
                        <th>{{ __('contracts.amount') }}</th>
                        <th>{{ __('app.term_months') }}</th>
                        <th>{{ __('app.status') }}</th>
                        <th>{{ __('app.created_at') }}</th>
                        <th>{{ __('app.actions') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    window.dtFilteredTable('#contracts-table', '{{ route('contracts.data') }}', [
        { data: 'id' },
        { data: 'contract_number' },
        { data: 'applicant' },
        { data: 'product' },
        { data: 'amount', className: 'text-end' },
        { data: 'term_months' },
        { data: 'status' },
        { data: 'created_at' },
        { data: 'actions', orderable: false, searchable: false, className: 'text-center' },
    ]);
});
</script>
@endpush