@extends('administration.layouts.master')
@section('page_content')

<!-- PAGE TITLE -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">@lang('translation.sf_menus.administration.main')</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="#">@lang('translation.sf_menus.administration.main')</a></li>
                    <li class="breadcrumb-item active">@lang('translation.sf_menus.administration.custom_fields')</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xxl-12">
        <div class="card" style="box-shadow: none;">
            <div class="card-header">
                <ul class="nav nav-tabs-custom rounded card-header-tabs border-bottom-0" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" data-bs-toggle="tab" href="#vehicleDetailsSheets" role="tab" aria-selected="false">
                            @Lang('translation.contents.vehicle_details_sheets')
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" data-bs-toggle="tab" href="#vehicleDocsSheet" role="tab" aria-selected="false">
                            @Lang('translation.contents.vehicle_docs_sheet')
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" data-bs-toggle="tab" href="#vehicleTechnicalSheets" role="tab" aria-selected="false">
                            @Lang('translation.contents.vehicle_technical_sheets')
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" data-bs-toggle="tab" href="#driverDetailsSheet" role="tab" aria-selected="false">
                            @Lang('translation.contents.driver_details_sheet')
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" data-bs-toggle="tab" href="#vehicleIssuesLabels" role="tab" aria-selected="false">
                            @Lang('translation.contents.vehicle_issues_labels')
                        </a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content text-muted">
                    <div class="tab-pane active" id="vehicleDetailsSheets" role="tabpanel">

                        <div class="row g-2">

                            <!-- Search -->
                            <div class="col-sm-4">
                                <div class="search-box">
                                    <input id="vehicle_details_sheets_search" type="text" data-sf-vehicle-details-sheets-search="search" class="form-control" placeholder="@Lang('translation.search')...">
                                    <i class="ri-search-line search-icon"></i>
                                </div>
                            </div>
                            
                            <div class="col-sm-auto ms-auto">
                                <div class="list-grid-nav hstack gap-1">

                                    <!-- Export -->
                                    <div class="dropdown">
                                        <button class="btn btn-soft-info btn-icon fs-14" type="button" id="dropdownMenuButtonVehicleDetailsSheets" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-download-line"></i>
                                        </button>
                                        <div id="vehicle_details_sheets_export" class="dropdown-menu dropdown-menu-md py-0" aria-labelledby="dropdownMenuButtonVehicleDetailsSheets">
                                            <div class="list-group list-group-fill-success">
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="copy">
                                                    <i class="ri-file-copy-fill align-middle me-2"></i>
                                                    @Lang('translation.export_copy_to_clipboard')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="excel">
                                                    <i class="ri-file-excel-2-fill align-middle me-2"></i>
                                                    @Lang('translation.export_as_excel')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="csv">
                                                    <i class="ri-file-excel-fill align-middle me-2"></i>
                                                    @Lang('translation.export_as_csv')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="pdf">
                                                    <i class="ri-file-pdf-fill align-middle me-2"></i>
                                                    @Lang('translation.export_as_pdf')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="print">
                                                    <i class="ri-printer-fill align-middle me-2"></i>
                                                    @Lang('translation.export_print')
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Filter -->
                                    <button type="button" class="btn btn-soft-info btn-icon fs-14" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="ri-filter-line"></i>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-md p-4">
                                        <form>
                                            <div class="mb-2">
                                                <label class="form-label" for="vehicle_details_sheets_filter_name">@Lang('translation.contents.name')</label>
                                                <input type="text" class="form-control form-control-sm vehicle-details-sheets-filter-input" id="vehicle_details_sheets_filter_name" name="vehicle_details_sheets_filter_name">
                                            </div>
                                            <div class="mb-2">
                                                <label class="form-label" for="vehicle_details_sheets_filter_type">@Lang('translation.contents.type')</label>
                                                <select class="form-control form-control-sm vehicle-details-sheets-filter-input" id="vehicle_details_sheets_filter_type" name="vehicle_details_sheets_filter_type"></select>
                                            </div>
                                            <div class="mb-2">
                                                <label class="form-label" for="vehicle_details_sheets_filter_status">@Lang('translation.contents.status')</label>
                                                <select class="form-control form-control-sm vehicle-details-sheets-filter-input" id="vehicle_details_sheets_filter_status" name="vehicle_details_sheets_filter_status"></select>
                                            </div>
                                            <button type="button" id="btn_vehicle_details_sheets_filter" class="btn btn-primary btn-sm btn-vehicle-details-sheets-filter">@Lang('translation.submit')</button>
                                            <button type="button" id="btn_vehicle_details_sheets_filter_reset" class="btn btn-primary btn-sm btn-vehicle-details-sheets-filter-reset">@Lang('translation.reset')</button>
                                        </form>
                                    </div>

                                    <!-- Add -->
                                    @if(auth()->user()->hasPermissionTo('new', null))
                                    <button class="btn btn-success addVehicleDetailsSheets-modal" data-bs-toggle="modal" data-bs-target="#addVehicleDetailsSheetsModal">
                                        <i class="ri-add-fill me-1 align-bottom"></i> @Lang('translation.add')
                                    </button>
                                    @endif

                                </div>
                            </div>
                        </div>
                        
                        <div class="table-responsive">
                            <div class="table-responsive">
                                <table id="list_vehicle_details_sheets" class="table table-borderless table-centered align-middle table-nowrap mb-0" style="width:100%"></table>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="vehicleDocsSheet" role="tabpanel">

                        <div class="row g-2">

                            <!-- Search -->
                            <div class="col-sm-4">
                                <div class="search-box">
                                    <input id="vehicle_docs_sheet_search" type="text" data-sf-vehicle-docs-sheet-search="search" class="form-control" placeholder="@Lang('translation.search')...">
                                    <i class="ri-search-line search-icon"></i>
                                </div>
                            </div>
                            
                            <div class="col-sm-auto ms-auto">
                                <div class="list-grid-nav hstack gap-1">

                                    <!-- Export -->
                                    <div class="dropdown">
                                        <button class="btn btn-soft-info btn-icon fs-14" type="button" id="dropdownMenuButtonVehicleDocsSheet" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-download-line"></i>
                                        </button>
                                        <div id="vehicle_docs_sheet_export" class="dropdown-menu dropdown-menu-md py-0" aria-labelledby="dropdownMenuButtonVehicleDocsSheet">
                                            <div class="list-group list-group-fill-success">
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="copy">
                                                    <i class="ri-file-copy-fill align-middle me-2"></i>
                                                    @Lang('translation.export_copy_to_clipboard')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="excel">
                                                    <i class="ri-file-excel-2-fill align-middle me-2"></i>
                                                    @Lang('translation.export_as_excel')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="csv">
                                                    <i class="ri-file-excel-fill align-middle me-2"></i>
                                                    @Lang('translation.export_as_csv')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="pdf">
                                                    <i class="ri-file-pdf-fill align-middle me-2"></i>
                                                    @Lang('translation.export_as_pdf')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="print">
                                                    <i class="ri-printer-fill align-middle me-2"></i>
                                                    @Lang('translation.export_print')
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Filter -->
                                    <button type="button" class="btn btn-soft-info btn-icon fs-14" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="ri-filter-line"></i>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-md p-4">
                                        <form>
                                            <div class="mb-2">
                                                <label class="form-label" for="vehicle_docs_sheet_filter_name">@Lang('translation.contents.name')</label>
                                                <input type="text" class="form-control form-control-sm vehicle-docs-sheet-filter-input" id="vehicle_docs_sheet_filter_name" name="vehicle_docs_sheet_filter_name">
                                            </div>
                                            <div class="mb-2">
                                                <label class="form-label" for="vehicle_docs_sheet_filter_notes">@Lang('translation.contents.notes')</label>
                                                <input type="text" class="form-control form-control-sm vehicle-docs-sheet-filter-input" id="vehicle_docs_sheet_filter_notes" name="vehicle_docs_sheet_filter_notes">
                                            </div>
                                            <div class="mb-2">
                                                <label class="form-label" for="vehicle_docs_sheet_filter_status">@Lang('translation.contents.status')</label>
                                                <select class="form-control form-control-sm vehicle-docs-sheet-filter-input" id="vehicle_docs_sheet_filter_status" name="vehicle_docs_sheet_filter_status"></select>
                                            </div>
                                            <button type="button" id="btn_vehicle_docs_sheet_filter" class="btn btn-primary btn-sm btn-vehicle-docs-sheet-filter">@Lang('translation.submit')</button>
                                            <button type="button" id="btn_vehicle_docs_sheet_filter_reset" class="btn btn-primary btn-sm btn-vehicle-docs-sheet-filter-reset">@Lang('translation.reset')</button>
                                        </form>
                                    </div>

                                    <!-- Add -->
                                    @if(auth()->user()->hasPermissionTo('new', null))
                                    <button class="btn btn-success addVehicleDocsSheet-modal" data-bs-toggle="modal" data-bs-target="#addVehicleDocsSheetModal">
                                        <i class="ri-add-fill me-1 align-bottom"></i> @Lang('translation.add')
                                    </button>
                                    @endif

                                </div>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table id="list_vehicle_docs_sheet" class="table table-borderless table-centered align-middle table-nowrap mb-0" style="width:100%"></table>
                        </div>

                    </div>
                    <div class="tab-pane" id="vehicleTechnicalSheets" role="tabpanel">

                        <div class="row g-2">

                            <!-- Search -->
                            <div class="col-sm-4">
                                <div class="search-box">
                                    <input id="vehicle_technical_sheets_search" type="text" data-sf-vehicle-technical-sheets-search="search" class="form-control" placeholder="@Lang('translation.search')...">
                                    <i class="ri-search-line search-icon"></i>
                                </div>
                            </div>
                            
                            <div class="col-sm-auto ms-auto">
                                <div class="list-grid-nav hstack gap-1">

                                    <!-- Export -->
                                    <div class="dropdown">
                                        <button class="btn btn-soft-info btn-icon fs-14" type="button" id="dropdownMenuButtonVehicleTechnicalSheets" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-download-line"></i>
                                        </button>
                                        <div id="vehicle_technical_sheets_export" class="dropdown-menu dropdown-menu-md py-0" aria-labelledby="dropdownMenuButtonVehicleTechnicalSheets">
                                            <div class="list-group list-group-fill-success">
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="copy">
                                                    <i class="ri-file-copy-fill align-middle me-2"></i>
                                                    @Lang('translation.export_copy_to_clipboard')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="excel">
                                                    <i class="ri-file-excel-2-fill align-middle me-2"></i>
                                                    @Lang('translation.export_as_excel')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="csv">
                                                    <i class="ri-file-excel-fill align-middle me-2"></i>
                                                    @Lang('translation.export_as_csv')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="pdf">
                                                    <i class="ri-file-pdf-fill align-middle me-2"></i>
                                                    @Lang('translation.export_as_pdf')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="print">
                                                    <i class="ri-printer-fill align-middle me-2"></i>
                                                    @Lang('translation.export_print')
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Filter -->
                                    <button type="button" class="btn btn-soft-info btn-icon fs-14" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="ri-filter-line"></i>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-md p-4">
                                        <form>
                                            <div class="mb-2">
                                                <label class="form-label" for="vehicle_technical_sheets_filter_name">@Lang('translation.contents.name')</label>
                                                <input type="text" class="form-control form-control-sm vehicle-technical-sheets-filter-input" id="vehicle_technical_sheets_filter_name" name="vehicle_technical_sheets_filter_name">
                                            </div>
                                            <div class="mb-2">
                                                <label class="form-label" for="vehicle_technical_sheets_filter_type">@Lang('translation.contents.type')</label>
                                                <select class="form-control form-control-sm vehicle-technical-sheets-filter-input" id="vehicle_technical_sheets_filter_type" name="vehicle_technical_sheets_filter_type"></select>
                                            </div>
                                            <div class="mb-2">
                                                <label class="form-label" for="vehicle_technical_sheets_filter_category">@Lang('translation.contents.category')</label>
                                                <select class="form-control form-control-sm vehicle-technical-sheets-filter-input" id="vehicle_technical_sheets_filter_category" name="vehicle_technical_sheets_filter_category"></select>
                                            </div>
                                            <div class="mb-2">
                                                <label class="form-label" for="vehicle_technical_sheets_filter_status">@Lang('translation.contents.status')</label>
                                                <select class="form-control form-control-sm vehicle-technical-sheets-filter-input" id="vehicle_technical_sheets_filter_status" name="vehicle_technical_sheets_filter_status"></select>
                                            </div>
                                            <button type="button" id="btn_vehicle_technical_sheets_filter" class="btn btn-primary btn-sm btn-vehicle-technical-sheets-filter">@Lang('translation.submit')</button>
                                            <button type="button" id="btn_vehicle_technical_sheets_filter_reset" class="btn btn-primary btn-sm btn-vehicle-technical-sheets-filter-reset">@Lang('translation.reset')</button>
                                        </form>
                                    </div>

                                    <!-- Add -->
                                    @if(auth()->user()->hasPermissionTo('new', null))
                                    <button class="btn btn-success addVehicleTechnicalSheets-modal" data-bs-toggle="modal" data-bs-target="#addVehicleTechnicalSheetsModal">
                                        <i class="ri-add-fill me-1 align-bottom"></i> @Lang('translation.add')
                                    </button>
                                    @endif

                                </div>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table id="list_vehicle_technical_sheets" class="table table-borderless table-centered align-middle table-nowrap mb-0" style="width:100%"></table>
                        </div>

                    </div>
                    <div class="tab-pane" id="driverDetailsSheet" role="tabpanel">

                        <div class="row g-2">

                            <!-- Search -->
                            <div class="col-sm-4">
                                <div class="search-box">
                                    <input id="driver_details_sheet_search" type="text" data-sf-driver-details-sheet-search="search" class="form-control" placeholder="@Lang('translation.search')...">
                                    <i class="ri-search-line search-icon"></i>
                                </div>
                            </div>
                            
                            <div class="col-sm-auto ms-auto">
                                <div class="list-grid-nav hstack gap-1">

                                    <!-- Export -->
                                    <div class="dropdown">
                                        <button class="btn btn-soft-info btn-icon fs-14" type="button" id="dropdownMenuButtonDriverDetailsSheet" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-download-line"></i>
                                        </button>
                                        <div id="driver_details_sheet_export" class="dropdown-menu dropdown-menu-md py-0" aria-labelledby="dropdownMenuButtonDriverDetailsSheet">
                                            <div class="list-group list-group-fill-success">
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="copy">
                                                    <i class="ri-file-copy-fill align-middle me-2"></i>
                                                    @Lang('translation.export_copy_to_clipboard')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="excel">
                                                    <i class="ri-file-excel-2-fill align-middle me-2"></i>
                                                    @Lang('translation.export_as_excel')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="csv">
                                                    <i class="ri-file-excel-fill align-middle me-2"></i>
                                                    @Lang('translation.export_as_csv')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="pdf">
                                                    <i class="ri-file-pdf-fill align-middle me-2"></i>
                                                    @Lang('translation.export_as_pdf')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="print">
                                                    <i class="ri-printer-fill align-middle me-2"></i>
                                                    @Lang('translation.export_print')
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Filter -->
                                    <button type="button" class="btn btn-soft-info btn-icon fs-14" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="ri-filter-line"></i>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-md p-4">
                                        <form>
                                            <div class="mb-2">
                                                <label class="form-label" for="driver_details_sheet_filter_name">@Lang('translation.contents.name')</label>
                                                <input type="text" class="form-control form-control-sm driver-details-sheet-filter-input" id="driver_details_sheet_filter_name" name="driver_details_sheet_filter_name">
                                            </div>
                                            <div class="mb-2">
                                                <label class="form-label" for="driver_details_sheet_filter_type">@Lang('translation.contents.type')</label>
                                                <select class="form-control form-control-sm driver-details-sheet-filter-input" id="driver_details_sheet_filter_type" name="driver_details_sheet_filter_type"></select>
                                            </div>
                                            <div class="mb-2">
                                                <label class="form-label" for="driver_details_sheet_filter_status">@Lang('translation.contents.status')</label>
                                                <select class="form-control form-control-sm driver-details-sheet-filter-input" id="driver_details_sheet_filter_status" name="driver_details_sheet_filter_status"></select>
                                            </div>
                                            <button type="button" id="btn_driver_details_sheet_filter" class="btn btn-primary btn-sm btn-driver-details-sheet-filter">@Lang('translation.submit')</button>
                                            <button type="button" id="btn_driver_details_sheet_filter_reset" class="btn btn-primary btn-sm btn-driver-details-sheet-filter-reset">@Lang('translation.reset')</button>
                                        </form>
                                    </div>

                                    <!-- Add -->
                                    @if(auth()->user()->hasPermissionTo('new', null))
                                    <button class="btn btn-success addDriverDetailsSheet-modal" data-bs-toggle="modal" data-bs-target="#addDriverDetailsSheetModal">
                                        <i class="ri-add-fill me-1 align-bottom"></i> @Lang('translation.add')
                                    </button>
                                    @endif

                                </div>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table id="list_driver_details_sheet" class="table table-borderless table-centered align-middle table-nowrap mb-0" style="width:100%"></table>
                        </div>

                    </div>
                    <div class="tab-pane" id="vehicleIssuesLabels" role="tabpanel">

                        <div class="row g-2">

                            <!-- Search -->
                            <div class="col-sm-4">
                                <div class="search-box">
                                    <input id="vehicle_issues_labels_search" type="text" data-sf-vehicle-issues-labels-search="search" class="form-control" placeholder="@Lang('translation.search')...">
                                    <i class="ri-search-line search-icon"></i>
                                </div>
                            </div>
                            
                            <div class="col-sm-auto ms-auto">
                                <div class="list-grid-nav hstack gap-1">

                                    <!-- Export -->
                                    <div class="dropdown">
                                        <button class="btn btn-soft-info btn-icon fs-14" type="button" id="dropdownMenuButtonVehicleIssuesLabels" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-download-line"></i>
                                        </button>
                                        <div id="vehicle_issues_labels_export" class="dropdown-menu dropdown-menu-md py-0" aria-labelledby="dropdownMenuButtonVehicleIssuesLabels">
                                            <div class="list-group list-group-fill-success">
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="copy">
                                                    <i class="ri-file-copy-fill align-middle me-2"></i>
                                                    @Lang('translation.export_copy_to_clipboard')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="excel">
                                                    <i class="ri-file-excel-2-fill align-middle me-2"></i>
                                                    @Lang('translation.export_as_excel')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="csv">
                                                    <i class="ri-file-excel-fill align-middle me-2"></i>
                                                    @Lang('translation.export_as_csv')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="pdf">
                                                    <i class="ri-file-pdf-fill align-middle me-2"></i>
                                                    @Lang('translation.export_as_pdf')
                                                </a>
                                                <a href="#" class="list-group-item list-group-item-action" data-sf-export="print">
                                                    <i class="ri-printer-fill align-middle me-2"></i>
                                                    @Lang('translation.export_print')
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Filter -->
                                    <button type="button" class="btn btn-soft-info btn-icon fs-14" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="ri-filter-line"></i>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-md p-4">
                                        <form>
                                            <div class="mb-2">
                                                <label class="form-label" for="vehicle_issues_labels_filter_name">@Lang('translation.contents.name')</label>
                                                <input type="text" class="form-control form-control-sm vehicle-issues-labels-filter-input" id="vehicle_issues_labels_filter_name" name="vehicle_issues_labels_filter_name">
                                            </div>
                                            <div class="mb-2">
                                                <label class="form-label" for="vehicle_issues_labels_filter_description">@Lang('translation.contents.description')</label>
                                                <input type="text" class="form-control form-control-sm vehicle-issues-labels-filter-input" id="vehicle_issues_labels_filter_description" name="vehicle_issues_labels_filter_description">
                                            </div>
                                            <div class="mb-2">
                                                <label class="form-label" for="vehicle_issues_labels_filter_status">@Lang('translation.contents.status')</label>
                                                <select class="form-control form-control-sm vehicle-issues-labels-filter-input" id="vehicle_issues_labels_filter_status" name="vehicle_issues_labels_filter_status"></select>
                                            </div>
                                            <button type="button" id="btn_vehicle_issues_labels_filter" class="btn btn-primary btn-sm btn-vehicle-issues-labels-filter">@Lang('translation.submit')</button>
                                            <button type="button" id="btn_vehicle_issues_labels_filter_reset" class="btn btn-primary btn-sm btn-vehicle-issues-labels-filter-reset">@Lang('translation.reset')</button>
                                        </form>
                                    </div>

                                    <!-- Add -->
                                    @if(auth()->user()->hasPermissionTo('new', null))
                                    <button class="btn btn-success addVehicleIssueLabel-modal" data-bs-toggle="modal" data-bs-target="#addVehicleIssueLabelModal">
                                        <i class="ri-add-fill me-1 align-bottom"></i> @Lang('translation.add')
                                    </button>
                                    @endif

                                </div>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table id="list_vehicle_issues_labels" class="table table-borderless table-centered align-middle table-nowrap mb-0" style="width:100%"></table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- -->
<div id="addVehicleDetailsSheetsModal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 overflow-hidden">
            <div class="modal-header">
                <h4 class="card-title">@Lang('translation.add')</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addVehicleDetailsSheetsForm" action="{{ route('vehicle_detail_sheet.store') }}" method="POST">
                    @csrf

                    <!-- Status -->
                    <div class="mb-3">
                        <div class="form-check mb-2">
                            <input type="hidden" name="status" value="0">
                            <input class="form-check-input" type="checkbox" id="new_status" name="status" value="1" {{ old('your_checkbox', 0) ? 'checked' : '' }}>
                            <label class="form-check-label" for="status">
                                @Lang('translation.contents.active')
                            </label>
                        </div>
                    </div>

                    <!-- Name -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.name')</label>
                                <input type="text" class="form-control" id="name" name="name">
                            </div>
                        </div>
                    </div>

                    <!-- Type -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.type')</label>
                                <select class="form-select" id="type" name="type">
                                    <option value="" selected>@Lang('translation.contents.none')</option>
                                    @foreach ($sheetType as $type)
                                        <option value="{{$type->id}}">{{$type->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="text-end">
                        <button type="button" class="btn btn-soft-primary" data-bs-dismiss="modal">@Lang('translation.cancel')</button>
                        <button type="submit" class="btn btn-soft-secondary">@Lang('translation.add')</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<div id="editVehicleDetailsSheetsModal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 overflow-hidden">
            <div class="modal-header">
                <h4 class="card-title">@Lang('translation.edit')</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editVehicleDetailsSheetsForm" action="{{ route('vehicle_detail_sheet.update') }}" method="POST">
                    @csrf
                    <input type="hidden" class="form-control" id="edit_vehicle_details_sheets_id" name="vehicle_details_sheets_id">

                    <!-- Status -->
                    <div class="mb-3">
                        <div class="form-check mb-2">
                            <input type="hidden" name="status" value="0">
                            <input class="form-check-input" type="checkbox" id="edit_status" name="status" value="1" {{ old('your_checkbox', 0) ? 'checked' : '' }}>
                            <label class="form-check-label" for="status">
                                @Lang('translation.contents.active')
                            </label>
                        </div>
                    </div>

                    <!-- Name -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.name')</label>
                                <input type="text" class="form-control" id="edit_name" name="name">
                            </div>
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.type')</label>
                                <select class="form-select" id="edit_type" name="type">
                                    <option value="" selected>@Lang('translation.contents.none')</option>
                                    @foreach ($sheetType as $type)
                                        <option value="{{$type->id}}">{{$type->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="text-end">
                        <button type="button" class="btn btn-soft-primary" data-bs-dismiss="modal">@Lang('translation.cancel')</button>
                        <button type="submit" class="btn btn-soft-secondary">@Lang('translation.update')</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<!-- -->
<div id="addVehicleDocsSheetModal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 overflow-hidden">
            <div class="modal-header">
                <h4 class="card-title">@Lang('translation.add')</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addVehicleDocsSheetForm" action="{{ route('vehicle_docs_sheet.store') }}" method="POST">
                    @csrf

                    <!-- Status -->
                    <div class="mb-3">
                        <div class="form-check mb-2">
                            <input type="hidden" name="status" value="0">
                            <input class="form-check-input" type="checkbox" id="new_status" name="status" value="1" {{ old('your_checkbox', 0) ? 'checked' : '' }}>
                            <label class="form-check-label" for="status">
                                @Lang('translation.contents.active')
                            </label>
                        </div>
                    </div>

                    <!-- Name -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.name')</label>
                                <input type="text" class="form-control" id="name" name="name">
                            </div>
                        </div>
                    </div>

                    <!-- Notes -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.notes')</label>
                                <textarea type="text" class="form-control" id="notes" name="notes"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="text-end">
                        <button type="button" class="btn btn-soft-primary" data-bs-dismiss="modal">@Lang('translation.cancel')</button>
                        <button type="submit" class="btn btn-soft-secondary">@Lang('translation.add')</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<div id="editVehicleDocsSheetModal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 overflow-hidden">
            <div class="modal-header">
                <h4 class="card-title">@Lang('translation.edit')</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editVehicleDocsSheetForm" action="{{ route('vehicle_docs_sheet.update') }}" method="POST">
                    @csrf
                    <input type="hidden" class="form-control" id="edit_vehicle_docs_sheet_id" name="vehicle_docs_sheet_id">

                    <!-- Status -->
                    <div class="mb-3">
                        <div class="form-check mb-2">
                            <input type="hidden" name="status" value="0">
                            <input class="form-check-input" type="checkbox" id="edit_status" name="status" value="1" {{ old('your_checkbox', 0) ? 'checked' : '' }}>
                            <label class="form-check-label" for="status">
                                @Lang('translation.contents.active')
                            </label>
                        </div>
                    </div>

                    <!-- Name -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.name')</label>
                                <input type="text" class="form-control" id="edit_name" name="name">
                            </div>
                        </div>
                    </div>

                    <!-- Notes -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.notes')</label>
                                <textarea type="text" class="form-control" id="edit_notes" name="notes"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="text-end">
                        <button type="button" class="btn btn-soft-primary" data-bs-dismiss="modal">@Lang('translation.cancel')</button>
                        <button type="submit" class="btn btn-soft-secondary">@Lang('translation.update')</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<!-- -->
<div id="addVehicleTechnicalSheetsModal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 overflow-hidden">
            <div class="modal-header">
                <h4 class="card-title">@Lang('translation.add')</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addVehicleTechnicalSheetsForm" action="{{ route('vehicle_technical_sheet.store') }}" method="POST">
                    @csrf

                    <!-- Status -->
                    <div class="mb-3">
                        <div class="form-check mb-2">
                            <input type="hidden" name="status" value="0">
                            <input class="form-check-input" type="checkbox" id="new_status" name="status" value="1" {{ old('your_checkbox', 0) ? 'checked' : '' }}>
                            <label class="form-check-label" for="status">
                                @Lang('translation.contents.active')
                            </label>
                        </div>
                    </div>

                    <!-- Name -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.name')</label>
                                <input type="text" class="form-control" id="name" name="name">
                            </div>
                        </div>
                    </div>

                    <!-- Type -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.type')</label>
                                <select class="form-select" id="type" name="type">
                                    <option value="" selected>@Lang('translation.contents.none')</option>
                                    @foreach ($sheetType as $type)
                                        <option value="{{$type->id}}">{{$type->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Category -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.category')</label>
                                <select class="form-select" id="category" name="category">
                                    <option value="" selected>@Lang('translation.contents.none')</option>
                                    @foreach ($technicalCategory as $category)
                                        <option value="{{$category->id}}">{{$category->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="text-end">
                        <button type="button" class="btn btn-soft-primary" data-bs-dismiss="modal">@Lang('translation.cancel')</button>
                        <button type="submit" class="btn btn-soft-secondary">@Lang('translation.add')</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<div id="editVehicleTechnicalSheetsModal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 overflow-hidden">
            <div class="modal-header">
                <h4 class="card-title">@Lang('translation.edit')</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editVehicleTechnicalSheetsForm" action="{{ route('vehicle_technical_sheet.update') }}" method="POST">
                    @csrf
                    <input type="hidden" class="form-control" id="edit_vehicle_technical_sheet_id" name="vehicle_technical_sheet_id">

                    <!-- Status -->
                    <div class="mb-3">
                        <div class="form-check mb-2">
                            <input type="hidden" name="status" value="0">
                            <input class="form-check-input" type="checkbox" id="edit_status" name="status" value="1" {{ old('your_checkbox', 0) ? 'checked' : '' }}>
                            <label class="form-check-label" for="status">
                                @Lang('translation.contents.active')
                            </label>
                        </div>
                    </div>

                    <!-- Name -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.name')</label>
                                <input type="text" class="form-control" id="edit_name" name="name">
                            </div>
                        </div>
                    </div>

                    <!-- Type -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.type')</label>
                                <select class="form-select" id="edit_type" name="type">
                                    <option value="" selected>@Lang('translation.contents.none')</option>
                                    @foreach ($sheetType as $type)
                                        <option value="{{$type->id}}">{{$type->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Category -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.category')</label>
                                <select class="form-select" id="edit_category" name="category">
                                    <option value="" selected>@Lang('translation.contents.none')</option>
                                    @foreach ($technicalCategory as $category)
                                        <option value="{{$category->id}}">{{$category->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="text-end">
                        <button type="button" class="btn btn-soft-primary" data-bs-dismiss="modal">@Lang('translation.cancel')</button>
                        <button type="submit" class="btn btn-soft-secondary">@Lang('translation.update')</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<!-- -->
<div id="addDriverDetailsSheetModal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 overflow-hidden">
            <div class="modal-header">
                <h4 class="card-title">@Lang('translation.add')</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addDriverDetailsSheetForm" action="{{ route('driver_detail_sheet.store') }}" method="POST">
                    @csrf

                    <!-- Status -->
                    <div class="mb-3">
                        <div class="form-check mb-2">
                            <input type="hidden" name="status" value="0">
                            <input class="form-check-input" type="checkbox" id="new_status" name="status" value="1" {{ old('your_checkbox', 0) ? 'checked' : '' }}>
                            <label class="form-check-label" for="status">
                                @Lang('translation.contents.active')
                            </label>
                        </div>
                    </div>

                    <!-- Name -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.name')</label>
                                <input type="text" class="form-control" id="name" name="name">
                            </div>
                        </div>
                    </div>

                    <!-- Type -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.type')</label>
                                <select class="form-select" id="type" name="type">
                                    <option value="" selected>@Lang('translation.contents.none')</option>
                                    @foreach ($sheetType as $type)
                                        <option value="{{$type->id}}">{{$type->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="text-end">
                        <button type="button" class="btn btn-soft-primary" data-bs-dismiss="modal">@Lang('translation.cancel')</button>
                        <button type="submit" class="btn btn-soft-secondary">@Lang('translation.add')</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<div id="editDriverDetailsSheetModal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 overflow-hidden">
            <div class="modal-header">
                <h4 class="card-title">@Lang('translation.edit')</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editDriverDetailsSheetForm" action="{{ route('driver_detail_sheet.update') }}" method="POST">
                    @csrf
                    <input type="hidden" class="form-control" id="edit_driver_detail_sheet_id" name="driver_detail_sheet_id">

                    <!-- Status -->
                    <div class="mb-3">
                        <div class="form-check mb-2">
                            <input type="hidden" name="status" value="0">
                            <input class="form-check-input" type="checkbox" id="edit_status" name="status" value="1" {{ old('your_checkbox', 0) ? 'checked' : '' }}>
                            <label class="form-check-label" for="status">
                                @Lang('translation.contents.active')
                            </label>
                        </div>
                    </div>

                    <!-- Name -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.name')</label>
                                <input type="text" class="form-control" id="edit_name" name="name">
                            </div>
                        </div>
                    </div>

                    <!-- Type -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.type')</label>
                                <select class="form-select" id="edit_type" name="type">
                                    <option value="" selected>@Lang('translation.contents.none')</option>
                                    @foreach ($sheetType as $type)
                                        <option value="{{$type->id}}">{{$type->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="text-end">
                        <button type="button" class="btn btn-soft-primary" data-bs-dismiss="modal">@Lang('translation.cancel')</button>
                        <button type="submit" class="btn btn-soft-secondary">@Lang('translation.update')</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<!-- -->
<div id="addVehicleIssueLabelModal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 overflow-hidden">
            <div class="modal-header">
                <h4 class="card-title">@Lang('translation.add')</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addVehicleIssueLabelForm" action="{{ route('vehicle_issue_label.store') }}" method="POST">
                    @csrf

                    <!-- Status -->
                    <div class="mb-3">
                        <div class="form-check mb-2">
                            <input type="hidden" name="status" value="0">
                            <input class="form-check-input" type="checkbox" id="new_status" name="status" value="1" {{ old('your_checkbox', 0) ? 'checked' : '' }}>
                            <label class="form-check-label" for="status">
                                @Lang('translation.contents.active')
                            </label>
                        </div>
                    </div>

                    <!-- Name -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.name')</label>
                                <input type="text" class="form-control" id="name" name="name">
                            </div>
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.description')</label>
                                <textarea type="text" class="form-control" id="description" name="description"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="text-end">
                        <button type="button" class="btn btn-soft-primary" data-bs-dismiss="modal">@Lang('translation.cancel')</button>
                        <button type="submit" class="btn btn-soft-secondary">@Lang('translation.add')</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<div id="editVehicleIssueLabelModal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 overflow-hidden">
            <div class="modal-header">
                <h4 class="card-title">@Lang('translation.edit')</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editVehicleIssueLabelForm" action="{{ route('vehicle_issue_label.update') }}" method="POST">
                    @csrf
                    <input type="hidden" class="form-control" id="edit_vehicle_issue_label_id" name="vehicle_issue_label_id">

                    <!-- Status -->
                    <div class="mb-3">
                        <div class="form-check mb-2">
                            <input type="hidden" name="status" value="0">
                            <input class="form-check-input" type="checkbox" id="edit_status" name="status" value="1" {{ old('your_checkbox', 0) ? 'checked' : '' }}>
                            <label class="form-check-label" for="status">
                                @Lang('translation.contents.active')
                            </label>
                        </div>
                    </div>

                    <!-- Name -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.name')</label>
                                <input type="text" class="form-control" id="edit_name" name="name">
                            </div>
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="label" class="form-label">@Lang('translation.contents.description')</label>
                                <textarea type="text" class="form-control" id="edit_description" name="description"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="text-end">
                        <button type="button" class="btn btn-soft-primary" data-bs-dismiss="modal">@Lang('translation.cancel')</button>
                        <button type="submit" class="btn btn-soft-secondary">@Lang('translation.update')</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

@endsection
@section('custom_scripts')
    <script src="{{ URL::asset('build/js/apps/administration/custom_fields.js') }}"></script>
@endsection