@extends('app-new')
@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    
    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <!-- END: Page CSS-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
@endpush 

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">
                {{trans('meeting-room-booking.meeting_rooms')}}
            </h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url("$alias/home") }}">
                        {{trans('meeting-room-booking.home')}}
                    </a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{ url("$alias/meeting-room-management") }}">
                        {{trans('meeting-room-booking.master')}}
                    </a>
                    </li>
                    <li class="breadcrumb-item active">
                        {{trans('meeting-room-booking.meeting_rooms')}}
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush
@section('content')
    <section id="column-search-datatable">
        @if (isset($status))
            <!--Closable Alerts start -->
            <div class="row">
                <div class="col-md-12">
                    <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <div class="alert-body">
                            @foreach ($status['messages'] as $m)
                                {{$m}}<br>
                            @endforeach
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                </div>
            </div>
            <!--Closable Alerts end -->
        @endif  
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-start mb-0"></h2>                        
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-datatable">
                        <table class="dt-column-search table" id="organization" data-searching="false">
                            <thead>
                                <tr>
                                    <th class="text-left">S.NO</th>
                                    <th class="text-left">Name</th> 
                                    <th class="text-left">Floor</th>
                                    <th class="text-left">Capacity</th>
                                    {{-- <th class="text-left">Created By</th>                                                             --}}
                                    <th class="text-left">Status</th>
                                    <th class="text-left">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($records as $record)
                                    <tr>  
                                        <td>
                                            {{$loop->iteration}}
                                        </td>                             
                                        <td>
                                            {{$record->name}}
                                        </td> 
                                        <td> 
                                            {{ @$record->floor->name}}
                                        </td>
                                        <td>
                                            {{$record->capacity}}
                                        </td>
                                        {{-- <td>
                                            {{ @$record->createdBy->name }} {{ '(' }}{{ $record->created_by_type}}{{ ')' }}
                                        </td>                                                                         --}}
                                        <td>
                                            <div class="admin-status progStat">
                                                <span class="btn btn-xs btn-{{($record->status == 'active') ? 'success' : 'danger'}}">
                                                    {{ ucFirst($record->status) }}
                                                </span>
                                            </div>
                                        </td>
                                        <td>
                                            @if($record->status == 'active')
                                                <a href="{{$base_url}}/meeting-room/{{ $record->id }}/edit" class="btn-sm btn-info" style="margin-right: 10px;">
                                                    <i class="fa fa-edit"></i>
                                                </a>
                                                <a href="{{$base_url}}/meeting-room/{{ $record->id }}/delete" class="btn-sm btn-danger" 
                                                    onclick="return meetingRoomDelete({{ $record->id }})"
                                                    >
                                                    <i class="fa fa-trash" ></i>
                                                </a>
                                            @else
                                                <a href="{{$base_url}}/meeting-room/{{ $record->id }}/restore" class="btn-sm btn-warning" 
                                                    {{-- onclick="return confirmRestore({{ $record->id }});" --}}
                                                    >
                                                    <i class="fas fa-trash-restore"></i>
                                                </a>
                                            @endif
                                        </td>                                       
                                    </tr> 
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="deleteModalLabel"><strong>Confirm Deletion</strong></h4>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <h5><strong>Are you sure you want to Delete?</strong></h5>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">No</button>
                                    <button type="button" class="btn btn-primary" id="deleteAction">Yes</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal fade" id="confirmModalRes" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="confirmModalLabel"><strong>Confirm Restore</strong></h4>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <h5><strong>Are you sure you want to Restore?</strong></h5>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">No</button>
                                    <button type="button" class="btn btn-primary" id="confirmActionRes">Yes</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/ Column Search -->
@endsection 
@push('footer-script') 
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>

    <script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
    <!-- END: Page Vendor JS-->
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>


    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/tables/table-datatables-basic.js"></script>
    <script src="/app-assets/js/scripts/tables/table-datatables-advanced.js"></script>
    <!-- END: Page JS-->
    <script>
        // function callDt() {
        //     var dt_filter_table = $('.dt-column-search'); 

        //     if ($('body').attr('data-framework') === 'laravel') {
        //         assetPath = $('body').attr('data-asset-path');
        //     }

        //     if (dt_filter_table.length) {
                
        //         var dt_filter = dt_filter_table.DataTable({
        //         ajax: {
        //             "url": "{!! route('meeting-room.all',['alias'=>$alias]) !!}",
        //             "dataType": "json",
        //             "type": "POST",
        //             "data": {
        //                 _token: "{{csrf_token()}}"
        //             }
        //         },
        //         "columns": [{
        //             "data": "id",
        //             render: function(data, type, row, meta) {
        //                 return ($('#organization').DataTable().page.info().page*$('#organization').DataTable().page.info().length)+(meta.row + 1);
        //             }
        //         }, {
        //             "data": "name",
        //             render: function(data, type, row, meta) {
        //                 var _data="";
        //                 if (type === "display") {
        //                     _data+='<p style="text-overflow: ellipsis;max-width:150px;display:block;white-space: nowrap;overflow:hidden;">'+data+'</p>';
        //                     _data+='<label class="label label-success badge badge-light-primary"> ('+row.members.length+' Members) </label>';
        //                 }
        //                 return _data; 
        //             }
        //         }, {
        //             "data": "id",
        //             "orderable": false,
        //             render: function(data, type,row) {
        //                 var data="";
        //                 if (type === "display") {
                            
        //                     row.members.forEach(function(e,i){
        //                         var img="";
        //                         if(e.media.length>0){
        //                             img='/storage/'+e.media[0].id+'/'+e.media[0].file_name;
        //                         }
        //                         data +='<img data-toggle="tooltip" data-original-title="{{ ucwords('+e.name+') }}" title="'+e.name+'" src="'+img+'" alt="user" class="img-circle" width="25" height="25" onerror="this.src=\'/assets/img/default-profile-3.png\'"> ';
        //                     })
        //                     return data;
        //                 }
        //                 return data; 
        //             }
        //         }, {
        //             "data": "status",
        //             render: function(data, type) {
        //                 if (type === "display") {
        //                     if (data == "active") {
        //                         data =  feather.icons['circle'].toSvg({ class: 'font-4 badge rounded-pill badge-glow bg-success' }) + " " + data;
        //                     } else {
        //                         data =  feather.icons['circle'].toSvg({ class: 'font-4 badge rounded-pill badge-glow bg-danger' }) + " " + data;
        //                     }
        //                     return data;
        //                 }
        //                 return data;
        //             }
        //         },  
        //         {
        //             "data": "status",
        //             "orderable": false,
        //         }],
        //         dom: '<"card-header border-bottom p-1"<"head-label"><"dt-action-buttons text-end"B>><"d-flex justify-content-between align-items-center mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
        //         orderCellsTop: true,
        //         language: {
        //             paginate: {
        //             previous: '&nbsp;',
        //             next: '&nbsp;'
        //             }
        //         },
                
        //         buttons: [{
        //             extend: 'collection',
                    
        //             text: feather.icons['plus'].toSvg({ class: 'me-50 font-small-4' }) + "{{trans('meeting-room-booking.add_new')}}",
        //             className: 'create-new btn btn-primary',
        //             attr: {
        //                 'onclick':"document.location.href='{{$base_url}}/meeting-room/create';"
        //             },
        //             init: function (api, node, config) {
        //                 $(node).removeClass('btn-secondary');
        //             }
        //         }],
        //     });
        //     }

        //     $('div.head-label').html('<h6 class="mb-0">{{trans("master/master.sub_department_listing")}}</h6>');
        // };  
        
        function callDt() {
            var dt_filter_table = $('.dt-column-search'); 

            if ($('body').attr('data-framework') === 'laravel') {
                assetPath = $('body').attr('data-asset-path');
            }

            if (dt_filter_table.length) {
                
                var dt_filter = dt_filter_table.DataTable({
                dom: '<"card-header border-bottom p-1"<"head-label"><"dt-action-buttons text-end"B>><"d-flex justify-content-between align-items-center mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
                orderCellsTop: true,
                language: {
                    paginate: {
                    previous: '&nbsp;',
                    next: '&nbsp;'
                    }
                },
                
                buttons: [{
                    extend: 'collection',
                    
                    text: feather.icons['plus'].toSvg({ class: 'me-50 font-small-4' }) + "{{trans('meeting-room-booking.add_new')}}",
                    className: 'create-new btn btn-primary',
                    attr: {
                        'onclick':"document.location.href='{{$base_url}}/meeting-room/create';"
                    },
                    init: function (api, node, config) {
                        $(node).removeClass('btn-secondary');
                    }
                }],
            });
            }
        }; 
        $(window).on('load', function() {
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        });
        $(document).ready(function(){
            callDt();
        })
    </script>
    <!-- END: Page JS-->
    <script>
        
        function meetingRoomDelete(id) {
            $('#deleteModal').modal('show');
            $('#deleteAction').off('click').on('click', function() {
                window.location.href = "{{$base_url}}/meeting-room/"+id+"/delete";
            });
            return false;
        }

        function confirmRestore(id) {
            $('#confirmModalRes').modal('show');
            $('#confirmActionRes').off('click').on('click', function() {
                window.location.href = "{{$base_url}}/meeting-room/"+id+"/restore";
            });
            return false;
        }

    </script>
@endpush