@extends('dashboard.base.base',['toolbar' => [
       ['title' => __('dashboard.breadcrumbs.administration_control_panel.title') , 'route' => null],
       ['title' => null , 'route' => null],
       ['title' => __('dashboard.facilities.title') , 'route' => dashboard_route('facilities.index')]
    ]])
@section('css')
<!--begin::Page Vendor Stylesheets(used by this page)-->
<link href="{{asset('dashboard_assets/assets/plugins/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
<!--end::Page Vendor Stylesheets-->
@endsection
@section('content')
<div class="page_content">
    <!--begin::Tables Widget 1-->
    <div class="card card-xxl-stretch mb-5 mb-xl-8">
        <!--begin::Body-->
        <div class="card-body py-10">
            <!--begin::Wrapper-->
            <div>
                <div class="row">
                    <div class="col-sm-6">
                        <form id="general_search_from" action="{!! dashboard_route('facilities.index') !!}" method="get">
                            <div class="row">
                                <div class="col-sm-8">
                                    <input name="general_search" class="form-control form-control-solid ps-15 mb-5" placeholder="{{__('dashboard.facilities.actions.search')}}"/>
                                </div>
                                <div class="col-sm-2">
                                    <button type="submit" class="btn btn-flex btn-base w-100 mb-5">{{__('dashboard.facilities.actions.search')}}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-sm-5"></div>  
                    <div class="col-sm-1"> 
                        <a href="{{ dashboard_route('facilities.create') }}" class="alert alert-primary btn btn-base w-100 mb-5">  {{__('dashboard.facilities.actions.create')}}</a>
                    </div>
                </div>
            </div>
            <div class="d-flex flex-stack mb-5">
                <!--begin::Group actions-->
                <div class="d-flex justify-content-end align-items-center d-none" data-kt-docs-table-toolbar="selected">
                    <div class="fw-bolder me-5">
                        <span class="me-2" data-kt-docs-table-select="selected_count"></span> 
                    </div>

                    <button type="button" class="btn btn-danger" data-bs-toggle="tooltip" title="Coming Soon">
                        
                    </button>
                </div>
                <!--end::Group actions-->
            </div>
            <!--end::Wrapper-->
            <!--begin::Datatable-->
            <table id="kt_datatable_table" class="table align-middle table-row-dashed fs-6 gy-5 text-center">
                <thead>
                <tr class="text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
                    <th class="w-10px pe-2">
                        <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                            <input class="form-check-input" type="checkbox" data-kt-check="true" data-kt-check-target="#kt_datatable_example_1 .form-check-input" value="1"/>
                        </div>
                    </th>
                    <th>{{__('dashboard.facilities.facility_number')}}</th>
                    <th>{{__('dashboard.facilities.actions.title')}}</th>
                </tr>
                </thead>
                <tbody class="text-gray-600 fw-bold">
                </tbody>
            </table>
            <!--end::Datatable-->
        </div>
        <!--end::Body-->
    </div>
    
    <!--end::Tables Widget 1-->
</div>

@endsection

@section('js')
<script src="{{asset('dashboard_assets/assets/plugins/custom/datatables/datatables.bundle.js')}}"></script>
<script>
    "use strict";

// Class definition
var KTDatatablesServerSide = function () {
    // Shared variables
    var table;
    var dt;
    var filterPayment;

    // Private functions
    var initDatatable = function () {
        dt = $("#kt_datatable_table").DataTable({
            searchDelay: 500,
            processing: true,
            serverSide: true,
            paging: true,
            lengthMenu: [ 5, 10, 25, 50, 75, 100 ],
            stateSave: false,
            pageLength: 10,
            select: {
                style: 'os',
                selector: 'td:first-child',
                className: 'row-selected'
            },
            ajax: {
                url: "{!! dashboard_route('facilities.index') !!}",
            },
            columns: [
                { data: 'id' },
                { data: 'id' },
                { data: 'options' },

            ],
            columnDefs: [
                {
                    targets: 0,
                    orderable: false,
                    render: function (data, type, row) {
                        return `
                            <div class="form-check form-check-sm form-check-custom form-check-solid">
                                <input class="form-check-input" type="checkbox" value="${data}" />
                            </div>`;
                    }
                }          
            ],
            // Add data-filter attribute
            createdRow: function (row, data, dataIndex) {
                
            }
        });

        table = dt.$;
    }
    var handleSearchDatatable = function () {
        $("#general_search_from").on('submit',function(e){
            e.preventDefault();
            var url = $(this).attr('action');
            var data = $(this).serialize();
            url = url + '?' + data;
            dt.ajax.url(url).load()
        });
    }
    // Public methods
    return {
        init: function () {
            initDatatable();
            handleSearchDatatable();
        }
    }
}();

// On document ready
KTUtil.onDOMContentLoaded(function () {
    KTDatatablesServerSide.init();
});
function delete_confirm(element,event){
    var form =  $(element).closest("form");
    event.preventDefault();
    swal.fire({
        title: `{!! __('dashboard.swal.delete_confirm') !!}`,
        text: `{!! __('dashboard.swal.delete_note') !!}`,
        icon: "warning",
        buttons: true,
        dangerMode: true,
        showCloseButton: true,
    }).then((willDelete) => {
        if (willDelete.isConfirmed) {
            form.submit();
        }
    });
}
</script>
@endsection