@extends('backend.layouts.app')

@section('title',__('label.listing_hospital_page_title').' | '.env('APP_NAME'))

@push('after-styles')
    <!-- DataTables -->
    <link href="{{ asset('public/js/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css"/>
@endpush

@section('breadcrumb')
    <div class="subheader py-2 py-lg-4 subheader-solid" id="kt_subheader">
        <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
            <!--begin::Info-->
            <div class="d-flex align-items-center flex-wrap mr-1">
                <!--begin::Page Heading-->
                <div class="d-flex align-items-baseline mr-5">
                    <!--begin::Page Title-->
                    <!--end::Page Title-->
                    <!--begin::Breadcrumb-->
                    <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                        <li class="breadcrumb-item active">
                            <a href="{{ route('admin.dashboard') }}" class="text-muted">{{ __('breadcrumb.dashboard') }}</a>
                        </li>
                        <li class="breadcrumb-item active">
                            {{ __('breadcrumb.hospital') }}
                        </li>
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page Heading-->
            </div>
            <!--end::Info-->
        </div>
    </div>
@endsection

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card card-custom">
                    <div class="card-header flex-wrap border-0 pt-6 pb-0">
                        <div class="card-title">
                            <h3>{{ __('label.listing_hospital_table_title') }}</h3>
                        </div>

                        <div class="card-toolbar">
                            <!--begin::Button-->
                            <a href="{{ route('admin.hospitals.create') }}" class="btn btn-primary font-weight-bolder">
                                <i class="fas fa-plus fa-sm"></i> {{ __('buttons.create_hospital') }}
                            </a>
                            <!--end::Button-->
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="mb-7">
                            <div class="row align-items-center">
                                <div class="col-lg-12 col-xl-12">
                                    <div class="row align-items-center">
                                    <div class="col-md-3 my-2 my-md-0">
                                            <div class="d-flex align-items-center">
                                                {{ Form::text('name',null,['class' => 'form-control selectpicker datatable-input change-action','id' => 'title','placeholder' => __('label.search')]) }}
                                            </div>
                                        </div>
                                        <div class="col-md-3 my-md-0">
                                            <button class="btn btn-secondary btn-secondary--icon" id="kt_reset" style="display: none">
                                                <span>
                                                    <i class="la la-close"></i>
                                                    <span>{{ __('buttons.reset') }}</span>
                                                </span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--begin: Selected Rows Group Action Form-->
                        <div class="mb-2 multiple-actions" id="checkboxActionDropdown">
                            <div class="d-flex align-items-center">
                                <div class="font-weight-bold text-danger mr-3">Selected
                                    <span id="datatableSelectedRecords">0</span> records:</div>
                                <a href="javascript:void(0);" class="btn btn-sm btn-danger mr-2 action-type" data-value="delete">Delete All</a>
                            </div>
                        </div>
                        <!--end: Selected Rows Group Action Form-->
                        <div id="kt_datatable_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer admin-table">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="datatable datatable-default datatable-bordered datatable-loaded">
                                        <table class="datatable-bordered datatable-head-custom datatable-table table-hover"
                                               id="hospital-table">
                                            <thead>
                                            <tr>
                                                <th>
                                                    <span style="width: 20px;">
                                                        <label class="checkbox checkbox-single">
                                                            <input type="checkbox"
                                                                   name="checkbox_action[]" id="checkbox-all"/>&nbsp;<span></span>
                                                        </label>
                                                    </span>
                                                </th>
                                                <th>{{ __('label.hospital_listing_heading_2') }}</th>
                                                <th>{{ __('label.hospital_listing_heading_3') }}</th>
                                                <th>{{ __('label.hospital_listing_heading_4') }}</th>
                                                <th>{{ __('label.hospital_listing_heading_5') }}</th>
                                                <th>{{ __('label.hospital_listing_heading_6') }}</th>
                                                <th>{{ __('label.hospital_listing_heading_8') }}</th>
                                                <th>{{ __('label.hospital_listing_heading_7') }}</th>
                                                <th>{{ __('label.hospital_listing_heading_9') }}</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('after-scripts')
    <!-- DataTables -->
    <script src="{{ asset('public/js/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('public/js/datatable/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('public/js/datatable/datatable-skeleton.js?v='.time()) }}"></script>
    <script>

        $(document).on('keyup', '#title', function () {
            if ($('#title').val() === '' && $('#status').val() === '') {
                $('#kt_reset').hide();
            } else {
                $('#kt_reset').show();
            }
        });

        $(document).on('change', '#status', function () {
            if ($('#title').val() === '' && $('#status').val() === '') {
                $('#kt_reset').hide();
            } else {
                $('#kt_reset').show();
            }
        });

        $(document).on('click', '#kt_reset', function () {
            $('#kt_reset').hide();
        });

        customDataTableWidget.configuration({
            element: '#hospital-table',
            listingUrl: "{{ route('admin.hospitals.listing') }}",
            deleteUrl: "{{ route("admin.hospitals.destroy", ":id") }}",
            multipleActionUrl: "",
            columns: [
                {
                    data: 'checkbox_action',
                    name: 'checkbox_action',
                    sortable: false
                },
                {
                    data: 'name',
                    name: 'name',
                    searchable: true
                },
                {
                    data: 'contact_name',
                    name: 'contact_name',
                    searchable: true
                },
                {
                    data: 'email',
                    name: 'email',
                    searchable: true
                },
                {
                    data: 'city',
                    name: 'city',
                    searchable: true
                },
                {
                    data: 'state',
                    name: 'state',
                    searchable: true
                },
                {
                    data: 'hospital_status',
                    name: 'hospital_status',
                    searchable: true
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                },
                {
                    data: 'action',
                    name: 'action',
                    sortable: false,
                    class:'text-right ws-nowrap action-col'
                }
            ],
            search: [
                {
                    key: 'name',
                    type: 'text'
                }
            ],
            defaultSortingIndex: 7,
            defaultSortingOrder: 'desc'
        });
    </script>
@endsection