@extends('layouts.app')
@section('title') {{ trans('headings.dining') }} @endsection

@section('breadcrumb', Breadcrumbs::render('dining'))
@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.dining') }}</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('dining-create') }}" class="btn btn-sm btn-dark text-white"><i
                                        class="fa fa-plus"></i>{{ trans('headings.create-new') }}</a>
                            </div>
                        </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">{{ trans('headings.clear') }}</button>
                    <button data-type="datatable" data-table="distributor-list"
                        class="btn btn-dark btn-sm datatable-filter-find">{{ trans('headings.submit') }}</button>
                </div>
            </div>
        </div>
        <x-Datatable id="tbl-dining" headers="{{ trans('headings.type') }},{{ trans('headings.image') }}"
            createUrl="dining-create" filter="false" create="false" hiddenHeaders="{{ trans('headings.created-by') }}"
            title="{{ trans('headings.dining') }}" checkbox="check">
        </x-Datatable>
    </section>
    <br>

    <div class="row ">
        <div class="col-md-6 ">
            <div class="form-group col-md-8">
                <label>
                    <h5>Bulk Action</h5>
                </label><br>
                <label>Choose Action</label>

                {!! Form::select(
                    'submit_type',
                    ['' => 'Type', '1' => 'Delete'],
                    isset($result->submit_type) ? $result->submit_type : null,
                    ['class' => ' form-control', 'required', 'id' => 'submit_type', 'data-name' => 'submit_type'],
                ) !!}
            </div>
            <div class="form-group col-md-8 text-right">
                <button id="multiple_delete" class="btn  btn-secondary"> Submit</button>
            </div>
        </div>
        
    </div>
    <div class="modal fade " id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-dialog">
            <div class="modal-content" style="width:180%">
                <div class="modal-header">
                    <h5>Change Messenger Status</h5>
                    <button type="button" class="close close-modal" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel"></h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-md-4">
                            <label>Select Messenger Status</label>
                            {!! Form::select('messenger_status', [], isset($result->messenger_status) ? $result->messenger_status : null, [
                                'class' => ' form-control',
                                'required',
                                'id' => 'messenger_status',
                                'data-name' => 'messenger_status',
                            ]) !!}
                            <span id="error-mes-status" style="color:red;"></span>

                        </div>
                        <div class="form-group col-md-4">
                            <label>Messenger Status Comment</label>

                            {{ Form::textarea('messenger_comment', isset($result->messenger_comment) ? $result->messenger_comment : null, ['class' => 'form-control', 'maxlength' => 200, 'rows' => 6, 'cols' => 40, 'id' => 'messenger_comment', 'name' => 'messenger_comment', 'placeholder' => 'Comment', 'autofocus']) }}
                        </div>
                        <div class="form-group col-md-4 hidden-reason" style="display:none">
                            <label>Select Messenger Status Reason</label>

                            <select name="messenger_status_reason" id="messenger_status_reason" class="form-control"
                                required data-name="messenger_status_reason"></select>
                            <span id="error-mes-reason" style="color:red;"></span>
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default close-modal" data-dismiss="modal">Close</button>
                    <button id="change_status" class="btn btn-secondary"> Update</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script src="{{ asset('modules/admin/dining/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