@extends('layouts.app')
@section('breadcrumb', Breadcrumbs::render('facilities'))

@section('content')
    <section class="card">
        <div class="">
            <div id="append-filter-text"></div>
        </div>
        <div class="row p-2">
            <div class="col-md-12">
                <header class="card-header bold d-flex justify-content-between px-2 pt-2 pb-3">
                    <div>{{ trans('headings.facilities') }}</div>
                    <div class="col-md-6 text-right">
                        <div class="row text-right">
                            <div class="col-md-12 text-right pt-1">
                                <a href="{{ route('facilities-create') }}" class="btn btn-sm btn-dark text-white"><i
                                        class="fa fa-plus"></i>{{ trans('headings.create-new') }}</a>
                            </div>
                            </form>
                        </div>
                    </div>
                </header>
            </div>
        </div>
        <div class="px-4 bg-light" id="filter-datatable-block__distributor-list">
            <div class="collapse mb-4 mt-4" id="collapse-table-filter-distributor-list">

                <div class="">
                    <div class="row">

                        <div class="col-md-3">
                            <div class="form-group">
                                <label>{{ __('fields.created_by') }}</label>
                                <select data-name="created by" class="form-control get-created-user"
                                    name="category_created_by">
                                    <option value="">- Created by -</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>{{ __('fields.created_at') }}</label>
                                <input data-name="created at" name="category_created_at" class="datepicker form-control"
                                    placeholder="Date" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-2 text-right">
                    <button data-type="datatable" data-table="distributor-list"
                        class="btn btn-info btn-sm reset-datatable-filter">Clear</button>
                    <button data-type="datatable" data-table="distributor-list"
                        class="btn btn-dark btn-sm datatable-filter-find">Submit</button>
                </div>
            </div>
        </div>
        <x-Datatable id="tbl-facilities" headers="type,Facility,Image" createUrl="facilities-create" filter="false"
            create="false" hiddenHeaders="created by" title="Facilities">
        </x-Datatable>

    </section>
    <style>

        img.img-thumbnail {
            background-color: #8d8383 !important;
        }
    </style>
@endsection
@section('script')
    <script src="{{ asset('modules/admin/facilities/datatable.js') }}"></script>

@endsection
@section('style')
    <style>
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked+.slider {
            background-color: #2196F3;
        }

        input:focus+.slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked+.slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }
    </style>
@endsection