@section('content')
    <!--begin::Subheader-->
    <div class="subheader py-2 py-lg-4 subheader-transparent" id="kt_subheader">
        <div class="container 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::Mobile Toggle-->
                <button class="burger-icon burger-icon-left mr-4 d-inline-block d-lg-none" id="kt_subheader_mobile_toggle">
                    <span></span>
                </button>
                <!--end::Mobile Toggle-->
                <!--begin::Page Heading-->
                <div class="d-flex align-items-baseline flex-wrap mr-5">
                    <!--begin::Page Title-->
                    <h5 class="text-dark font-weight-bold my-1 mr-5">Inbox</h5>
                    <!--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">
                            <a href="" class="text-muted">Apps</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="" class="text-muted">Inbox</a>
                        </li>
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page Heading-->
            </div>
            <!--end::Info-->
        </div>
    </div>
    <!--end::Subheader-->
    <input type="hidden" id="type_inbox" value="meetings">
    <input type="hidden" id="is_read" value="all">
    <!--begin::Inbox-->
    <div class="d-flex flex-row">
        <!--begin::Aside-->
        <div class="flex-row-auto offcanvas-mobile w-200px w-xxl-275px" id="kt_inbox_aside">
            <!--begin::Card-->
            <div class="card card-custom card-stretch">
                <!--begin::Body-->
                <div class="card-body px-5">
                    {{-- <!--begin::Compose-->
                    <div class="px-4 mt-4 mb-10">
                        <a href="#" class="btn btn-block btn-primary font-weight-bold text-uppercase py-4 px-6 text-center" data-toggle="modal" data-target="#kt_inbox_compose">New Message</a>
                    </div>
                    <!--end::Compose--> --}}
                    <!--begin::Navigations-->
                    <div class="navi navi-hover navi-active navi-link-rounded navi-bold navi-icon-center navi-light-icon">
                        <!--begin::Item-->
                        <div class="navi-item my-2">
                            <a href="#" class="navi-link active" onclick="$('.navi-link').removeClass('active'); $(this).addClass('active');load_data_inbox('{{ route('inboxMeetingData') }}','','all','meetings')">
                                <span class="navi-icon mr-4">
                                    <span class="svg-icon svg-icon-primary svg-icon-lg">
                                        <!--begin::Svg Icon | path:assets/media/svg/icons/Communication/Mail-heart.svg-->
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect x="0" y="0" width="24" height="24" />
                                                <path d="M6,2 L18,2 C18.5522847,2 19,2.44771525 19,3 L19,13 C19,13.5522847 18.5522847,14 18,14 L6,14 C5.44771525,14 5,13.5522847 5,13 L5,3 C5,2.44771525 5.44771525,2 6,2 Z M13.8,4 C13.1562,4 12.4033,4.72985286 12,5.2 C11.5967,4.72985286 10.8438,4 10.2,4 C9.0604,4 8.4,4.88887193 8.4,6.02016349 C8.4,7.27338783 9.6,8.6 12,10 C14.4,8.6 15.6,7.3 15.6,6.1 C15.6,4.96870845 14.9396,4 13.8,4 Z" fill="#000000" opacity="0.3" />
                                                <path d="M3.79274528,6.57253826 L12,12.5 L20.2072547,6.57253826 C20.4311176,6.4108595 20.7436609,6.46126971 20.9053396,6.68513259 C20.9668779,6.77033951 21,6.87277228 21,6.97787787 L21,17 C21,18.1045695 20.1045695,19 19,19 L5,19 C3.8954305,19 3,18.1045695 3,17 L3,6.97787787 C3,6.70173549 3.22385763,6.47787787 3.5,6.47787787 C3.60510559,6.47787787 3.70753836,6.51099993 3.79274528,6.57253826 Z" fill="#000000" />
                                            </g>
                                        </svg>
                                        <!--end::Svg Icon-->
                                    </span>
                                </span>
                                <span class="navi-text font-weight-bolder font-size-lg">Inbox Meetings</span>
                                <span class="navi-label">
                                    {{-- <span class="label label-rounded label-light-success font-weight-bolder">3</span> --}}
                                </span>
                            </a>
                        </div>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <div class="navi-item my-2">
                            <a href="#" class="navi-link" onclick="$('.navi-link').removeClass('active'); $(this).addClass('active');load_data_inbox('{{ route('inboxMeetingData') }}','','all','task')">
                                <span class="navi-icon mr-4">
                                    <span class="svg-icon svg-icon-danger svg-icon-lg">
                                        <!--begin::Svg Icon | path:assets/media/svg/icons/Communication/Mail-heart.svg-->
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect x="0" y="0" width="24" height="24" />
                                                <path d="M6,2 L18,2 C18.5522847,2 19,2.44771525 19,3 L19,13 C19,13.5522847 18.5522847,14 18,14 L6,14 C5.44771525,14 5,13.5522847 5,13 L5,3 C5,2.44771525 5.44771525,2 6,2 Z M13.8,4 C13.1562,4 12.4033,4.72985286 12,5.2 C11.5967,4.72985286 10.8438,4 10.2,4 C9.0604,4 8.4,4.88887193 8.4,6.02016349 C8.4,7.27338783 9.6,8.6 12,10 C14.4,8.6 15.6,7.3 15.6,6.1 C15.6,4.96870845 14.9396,4 13.8,4 Z" fill="#000000" opacity="0.3" />
                                                <path d="M3.79274528,6.57253826 L12,12.5 L20.2072547,6.57253826 C20.4311176,6.4108595 20.7436609,6.46126971 20.9053396,6.68513259 C20.9668779,6.77033951 21,6.87277228 21,6.97787787 L21,17 C21,18.1045695 20.1045695,19 19,19 L5,19 C3.8954305,19 3,18.1045695 3,17 L3,6.97787787 C3,6.70173549 3.22385763,6.47787787 3.5,6.47787787 C3.60510559,6.47787787 3.70753836,6.51099993 3.79274528,6.57253826 Z" fill="#000000" />
                                            </g>
                                        </svg>
                                        <!--end::Svg Icon-->
                                    </span>
                                </span>
                                <span class="navi-text font-weight-bolder font-size-lg">Inbox Tasks</span>
                                <span class="navi-label">
                                    {{-- <span class="label label-rounded label-light-success font-weight-bolder">3</span> --}}
                                </span>
                            </a>
                        </div>
                        <!--end::Item-->
                    </div>
                    <!--end::Navigations-->
                </div>
                <!--end::Body-->
            </div>
            <!--end::Card-->
        </div>
        <!--end::Aside-->
        <!--begin::List-->
        <div class="flex-row-fluid ml-lg-8 d-block" id="kt_inbox_list">
            <!--begin::Card-->
            <div class="card card-custom card-stretch">
                <!--begin::Header-->
                <div class="card-header row row-marginless align-items-center flex-wrap py-5 h-auto">
                    <!--begin::Toolbar-->
                    <div class="col-12 col-sm-6 col-xxl-4 order-2 order-xxl-1 d-flex flex-wrap align-items-center">
                        <div class="d-flex align-items-center mr-1 my-2">                            
                            <div class="dropdown">
                                <span class="btn btn-clean btn-icon btn-sm mr-1" data-toggle="dropdown">
                                    <i class="ki ki-bold-arrow-down icon-sm"></i>
                                </span>
                                <div class="dropdown-menu dropdown-menu-left p-0 m-0 dropdown-menu-sm">
                                    <ul class="navi py-3">
                                        <li class="navi-item">
                                            <a href="#" class="navi-link" onclick="load_data_inbox('{{ route('inboxMeetingData') }}','','all', $('#type_inbox').val())">
                                                <span class="navi-text">All</span>
                                            </a>
                                        </li>
                                        <li class="navi-item">
                                            <a href="#" class="navi-link" onclick="load_data_inbox('{{ route('inboxMeetingData') }}','',true, $('#type_inbox').val())">
                                                <span class="navi-text">Read</span>
                                            </a>
                                        </li>
                                        <li class="navi-item">
                                            <a href="#" class="navi-link" onclick="load_data_inbox('{{ route('inboxMeetingData') }}','',false, $('#type_inbox').val())">
                                                <span class="navi-text">Unread</span>
                                            </a>
                                        </li>                                        
                                    </ul>
                                </div>
                            </div>
                            <span class="btn btn-clean btn-icon btn-sm mr-2" data-toggle="tooltip" title="Reload list" onclick="load_data_inbox('{{ route('inboxMeetingData') }}','','all',$('#type_inbox').val())">
                                <i class="ki ki-refresh icon-1x"></i>
                            </span>
                        </div>
                        {{-- <div class="d-flex align-items-center mr-1 my-2">                                                        
                            <span class="btn btn-default btn-icon btn-sm mr-2" data-toggle="tooltip" title="Mark as read">
                                <span class="svg-icon svg-icon-md">
                                    <!--begin::Svg Icon | path:assets/media/svg/icons/General/Duplicate.svg-->
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect x="0" y="0" width="24" height="24" />
                                            <path d="M15.9956071,6 L9,6 C7.34314575,6 6,7.34314575 6,9 L6,15.9956071 C4.70185442,15.9316381 4,15.1706419 4,13.8181818 L4,6.18181818 C4,4.76751186 4.76751186,4 6.18181818,4 L13.8181818,4 C15.1706419,4 15.9316381,4.70185442 15.9956071,6 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
                                            <path d="M10.1818182,8 L17.8181818,8 C19.2324881,8 20,8.76751186 20,10.1818182 L20,17.8181818 C20,19.2324881 19.2324881,20 17.8181818,20 L10.1818182,20 C8.76751186,20 8,19.2324881 8,17.8181818 L8,10.1818182 C8,8.76751186 8.76751186,8 10.1818182,8 Z" fill="#000000" />
                                        </g>
                                    </svg>
                                    <!--end::Svg Icon-->
                                </span>
                            </span>                            
                        </div> --}}
                    </div>
                    <!--end::Toolbar-->
                    <!--begin::Search-->
                    <div class="col-xxl-3 d-flex order-1 order-xxl-2 align-items-center justify-content-center">
                        <div class="input-group input-group-lg input-group-solid my-2">
                            <input type="text" class="form-control pl-4" id="keyword" placeholder="Search..." />
                            <div class="input-group-append">
                                <span class="input-group-text pr-3">
                                    <span class="svg-icon svg-icon-lg">
                                        <!--begin::Svg Icon | path:assets/media/svg/icons/General/Search.svg-->
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect x="0" y="0" width="24" height="24" />
                                                <path d="M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
                                                <path d="M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,13.7614237 8.23857625,16 11,16 Z M11,18 C7.13400675,18 4,14.8659932 4,11 C4,7.13400675 7.13400675,4 11,4 C14.8659932,4 18,7.13400675 18,11 C18,14.8659932 14.8659932,18 11,18 Z" fill="#000000" fill-rule="nonzero" />
                                            </g>
                                        </svg>
                                        <!--end::Svg Icon-->
                                    </span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <!--end::Search-->
                    <!--begin::Pagination-->
                    <div class="col-12 col-sm-6 col-xxl-4 order-2 order-xxl-3 d-flex align-items-center justify-content-sm-end text-right my-2">
                        {{-- <!--begin::Per Page Dropdown-->
                        <div class="d-flex align-items-center mr-2" data-toggle="tooltip" title="Records per page">
                            <span class="text-muted font-weight-bold mr-2" data-toggle="dropdown">1 - 50 of 235</span>
                        </div>
                        <!--end::Per Page Dropdown--> --}}
                        <!--begin::Arrow Buttons-->
                        {{-- <span class="btn btn-default btn-icon btn-sm mr-2" data-toggle="tooltip" title="Previose page">
                            <i class="ki ki-bold-arrow-back icon-sm"></i>
                        </span>
                        <span class="btn btn-default btn-icon btn-sm mr-2" data-toggle="tooltip" title="Next page">
                            <i class="ki ki-bold-arrow-next icon-sm"></i>
                        </span> --}}
                        <!--end::Arrow Buttons-->                        
                        <div class="d-flex justify-content-between align-items-center flex-wrap mt-4">
                            <div class="d-flex flex-wrap mr-3">
                                <div class="pagination-wrapper"></div>
                            </div>
                        </div>
                    </div>
                    <!--end::Pagination-->
                </div>
                <!--end::Header-->
                <!--begin::Body-->
                <div class="card-body table-responsive px-0" id="list_inbox">
                    {{-- <!--begin::Items-->
                    <div class="list list-hover min-w-500px" data-inbox="list">
                        <!--begin::Item-->
                        <div class="d-flex align-items-start list-item card-spacer-x py-3" data-inbox="message">
                            <!--begin::Toolbar-->
                            <div class="d-flex align-items-center">
                                <!--begin::Author-->
                                <div class="d-flex align-items-center flex-wrap w-xxl-200px mr-3" data-toggle="view">
                                    <span class="symbol symbol-60 mr-3">
                                        <span class="symbol-label" style="background-image: url('assets/media/users/100_13.jpg')"></span>
                                    </span>
                                    <a href="#" class="font-weight-bold text-dark-75 text-hover-primary">Sean Paul</a>
                                </div>
                                <!--end::Author-->
                            </div>
                            <!--end::Toolbar-->
                            <!--begin::Info-->
                            <div class="flex-grow-1 mt-2 mr-2" data-toggle="view">
                                <div>
                                    <span class="font-weight-bolder font-size-lg mr-2">Digital PPV Customer Confirmation -</span>
                                    <span class="text-muted">Thank you for ordering UFC 240 Holloway vs Edgar Alternate camera angles...</span>
                                </div>
                                <div class="mt-2">
                                    <span class="label label-light-primary font-weight-bold label-inline mr-1">inbox</span>
                                    <span class="label label-light-danger font-weight-bold label-inline">task</span>
                                </div>
                            </div>
                            <!--end::Info-->
                            <!--begin::Datetime-->
                            <div class="mt-2 mr-3 font-weight-bolder w-50px text-right" data-toggle="view">8:30 PM</div>
                            <!--end::Datetime-->
                        </div>
                        <!--end::Item-->                        
                    </div>
                    <!--end::Items--> --}}
                </div>
                <!--end::Body-->
            </div>
            <!--end::Card-->
        </div>
        <!--end::List-->
        <!--begin::View-->
        <div class="flex-row-fluid ml-lg-8 d-none" id="kt_inbox_view">
            <!--begin::Card-->
            <div class="card card-custom card-stretch">
                <!--begin::Header-->
                <div class="card-header align-items-center flex-wrap justify-content-between py-5 h-auto">
                    <!--begin::Left-->
                    <div class="d-flex align-items-center my-2">
                        <a href="#" class="btn btn-clean btn-icon btn-sm mr-6" data-inbox="back">
                            <i class="flaticon2-left-arrow-1"></i>
                        </a>                                                                        
                    </div>
                    <!--end::Left-->                    
                </div>
                <!--end::Header-->
                <!--begin::Body-->
                <div class="card-body p-0">
                    <!--begin::Header-->
                    <div class="d-flex align-items-center justify-content-between flex-wrap card-spacer-x py-5">
                        <!--begin::Title-->
                        <div class="d-flex align-items-center mr-2 py-2">
                            <div class="font-weight-bold font-size-h3 mr-3" id="tittle_view"></div>
                            <span class="label label-light-primary font-weight-bold label-inline mr-2">inbox</span>
                            <span class="label label-light-danger font-weight-bold label-inline">important</span>
                        </div>
                        <!--end::Title-->                        
                    </div>
                    <!--end::Header-->
                    <!--begin::Messages-->
                    <div class="mb-3">
                        <div class="cursor-pointer shadow-xs toggle-on" data-inbox="message">
                            <div class="d-flex align-items-center card-spacer-x py-6">
                                <span class="symbol symbol-50 mr-4">
                                    <span class="symbol-label" id="user_img_view" style="background-image: url('{{ asset('assets/media/logos/no_img.png') }}')"></span>
                                </span>
                                <div class="d-flex flex-column flex-grow-1 flex-wrap mr-2">
                                    <div class="d-flex">
                                        <a href="#" class="font-size-lg font-weight-bolder text-dark-75 text-hover-primary mr-2" id="name_user_view"></a>
                                        <div class="font-weight-bold text-muted">
                                        <span class="label label-success label-dot mr-2"></span></div>
                                    </div>
                                    <div class="d-flex flex-column">
                                        <div class="toggle-off-item">
                                            <span class="font-weight-bold text-muted cursor-pointer" data-toggle="dropdown">to me
                                            <i class="flaticon2-down icon-xs ml-1 text-dark-50"></i></span>
                                            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-left p-5">
                                                <table>
                                                    <tr>
                                                        <td class="text-muted min-w-75px py-2">From</td>
                                                        <td id="name_user_from_view"></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-muted py-2">Date:</td>
                                                        <td id="send_date_view"></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-muted py-2">Subject:</td>
                                                        <td id="subject_view"></td>
                                                    </tr>                                                    
                                                </table>
                                            </div>
                                        </div>
                                        <div class="text-muted font-weight-bold toggle-on-item" data-inbox="toggle"></div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div class="font-weight-bold text-muted mr-2" id="send_date_view2"></div>
                                </div>
                            </div>
                            <div class="card-spacer-x py-3 toggle-off-item" id="message_view"></div>
                        </div>                        
                    </div>
                    <!--end::Messages-->                    
                </div>
                <!--end::Body-->
            </div>
            <!--end::Card-->
        </div>
        <!--end::View-->
    </div>
    <!--end::Inbox-->
@endsection
@section('script')
    @include('content.others.inbox.action')
@endsection