@extends('mgh_theme.app',['datatable'=>1])
@section('content')
    <div class="content">

        <!-- Start Content-->
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">{{env('APP_NAME')}}</a></li>
                                <li class="breadcrumb-item"><a href="javascript: void(0);">Time Slot Allotment</a></li>
                                <li class="breadcrumb-item"><a href="#">Group</a></li>
                            </ol>
                        </div>
                        <h4 class="page-title">Group List</h4>
                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-lg-12 pb-3">
                    <div class="text-right">
                        <button type="button" class="btn btn-purple waves-effect waves-light data_add_new" data-toggle="modal" data-target="#con-close-modal">Add Group</button>
                    </div>
                </div>
            </div>
            @include('mgh_theme.session')
            @include('mgh_theme.error')
            <div class="row">
                <div class="col-12">
                    <div class="card-box table-responsive">
                        <h4 class="header-title pb-2">The List Of Guest Park</h4>

                        <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th>SL NO</th>
                                    <th>Name</th>
                                    <th>Priority</th>
                                    <th>Allocated time</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($groups as $group)
                                <tr>
                                    <td>{{$loop->iteration}}</td>
                                    <td>{{$group->name}}</td>
                                    <td>{{isset($group->priority) ? $default_data['priority'][$group->priority] : ''}}</td>
                                    <td>{{$group->duration_hour}} Hours {{$group->duration_minute}} Minute</td>
                                    <td class="d-flex">
                                        <a href="{{route('group.show',['group'=>$group->id])}}" class="my-auto mr-2 ml-2"><i class="mdi mdi-eye"></i></a>
                                        <a href="#" data="{{$group->id}}" class="table-action-btn data_edit my-auto mr-2 ml-2" data-toggle="modal" data-target="#con-close-modal"><i class="mdi mdi-pencil"></i></a>
                                        <form action="{{route('group.destroy',['group'=>$group->id])}}" method="post">@csrf @method('DELETE') <button onclick="return confirm('Are your sure ?')" class="btn btn-light btn-sm" type="submit" ><i class="mdi mdi-close"></i></button></form>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- end row -->

        </div>
        <!-- end container-fluid -->

    </div>
    <!-- end content -->
@endsection
@section('modal')
    <div id="con-close-modal" class="modal fade " tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title myLargeModalLabel"></h4>
                </div>
                <div class="modal-body data_modal">
                    <!-- end row -->

                </div>
{{--                <div class="modal-footer">--}}
{{--                    <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>--}}
{{--                    <button type="button" class="btn btn-info waves-effect waves-light">Save changes</button>--}}
{{--                </div>--}}
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            var posturl;
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $('.data_edit').on('click',function(){
                $('#myLargeModalLabel').text('Update Group');
                jQuery.ajax({
                    url: '{{url('/group')}}/'+$(this).attr('data')+'/edit',
                    method: 'get',
                    success: function (result) {
                        $('.data_modal').html(result);
                    }
                });
            });
            $('.data_add_new').on('click',function(){
                $('#myLargeModalLabel').html('Add new Group');
                jQuery.ajax({
                    url: '{{url('/group')}}/create',
                    method: 'get',
                    success: function (result) {
                        $('.data_modal').html(result);
                    }
                });
            });


        });
    </script>
@endsection