@extends('Web/layout')
@section('title','Meeting Report')
@section('content')
    <div class="pt-3">
        <div class="page-title d-flex">
            <div class="align-self-center">
                <a href="#" data-back-button class="me-3 ms-0 icon icon-xxs bg-theme rounded-s shadow-m">
                <i class="bi bi-chevron-left color-theme font-14"></i>
                </a>
            </div>
            <div class="align-self-center me-auto">
                <h1 class="color-theme mb-0 font-18">Meeting Report</h1>
            </div>
            <div class="align-self-center ms-auto">
            
            </div>
        </div>
    </div>

    <div class="content" style="margin: 0px 15px 0px 15px;">
        <div class="row">
            <div class="col-3">
                <span class="badge border border-blue-dark color-blue-dark rounded-s btn-full font-14 All vs" onclick="statusMeetingFilter('All')" style="width: 5rem ;padding-top: 10px;padding-bottom: 10px;">All</span>
            </div>
            <div class="col-3">
                <span class="badge border border-green-dark color-green-dark rounded-s btn-full font-14 Approved vs" onclick="statusMeetingFilter('Approved')" style="width: 5rem ;padding-top: 10px;padding-bottom: 10px;">Approved</span>
            </div>
            <div class="col-3">
                <span class="badge border border-yellow-dark color-yellow-dark rounded-s btn-full font-14 Pending vs" onclick="statusMeetingFilter('Pending')" style="width: 5rem ;padding-top: 10px;padding-bottom: 10px;">Pending</span>
            </div>
            <div class="col-3">
                <span class="badge border border-red-dark color-red-dark rounded-s btn-full font-14 Rejected vs" onclick="statusMeetingFilter('Rejected')" style="width: 5rem ;padding-top: 10px;padding-bottom: 10px;">Rejected</span>
            </div>
        </div>
    </div>
 
    <div class="content my-0 mt-3 mb-3 px-1">
        <div class="d-flex" >
            <div class="align-self-center" style="width:100%;">
                <h3 class="font-18 mb-2 " style="float:right;" data-bs-toggle="offcanvas" data-bs-target="#menu-transfer"><i class="bi bi-filter"></i>Filter</h3>
            </div>
          
        </div>
    </div>
   
    <div id="meetingAllData" class="mt-4">
    </div>

    <div id="menu-activity-4" class="offcanvas offcanvas-top offcanvas-detached rounded-m">
    <div class="menu-size" style="height:550px;">
        <div class="content">
            <a href="#" class="d-flex py-1 pb-4">
                <div class="align-self-center">
                    <span class="icon rounded-s me-2 gradient-green shadow-bg shadow-bg-xs" ><i class="bi bi-person-circle font-18 color-white"></i></span>
                </div>
                <div class="align-self-center ps-1">
                    <h5 class="pt-1 mb-n1">Group Meeting</h5>
                    <p class="mb-0 font-11 opacity-70">Meeting</p>
                </div>
                <div class="align-self-center ms-auto text-end">
                    <h4 class="pt-1 font-14 mb-n1 " id="m_status"></h4>
                    <p class="mb-0 font-11" id="m_date"> </p>
                </div>
            </a>
            <div class="row">
                <div class="col-12 mt-2 mb-2" id="m_image">

                </div>
            </div>
            <div class="row">
                <strong class="col-5 color-theme">No of User</strong>
                <strong class="col-7 text-end color-highlight" id="m_no_of_user"></strong>
                <div class="col-12 mt-2 mb-2">
                    <div class="divider my-0"></div>
                </div>
                <strong class="col-5 color-theme">Reference</strong>
                <strong class="col-7 text-end" id="m_reference"></strong>
                <div class="col-12 mt-2 mb-2">
                    <div class="divider my-0"></div>
                </div>
                
                <!-- <div class="col-6">
                    <a href="#" data-bs-dismiss="offcanvas" class="btn btn-s btn-full gradient-green shadow-bg shadow-bg-xs">Approve</a>
                </div>
                <div class="col-6">
                    <a href="#" data-bs-dismiss="offcanvas" class="btn btn-s btn-full gradient-red shadow-bg shadow-bg-xs">Reject</a>
                </div> -->
            </div>
        </div>
    </div>
</div>
<div id="menu-transfer"  class="offcanvas offcanvas-top offcanvas-detached rounded-m" style="display: block; visibility: visible;" aria-modal="true" role="dialog">
    <div class="menu-size" style="height:340px;">
        <div class="d-flex mx-3 mt-3 py-1">
            <div class="align-self-center">
                <h1 class="mb-0">Filter</h1>
            </div>
            <div class="align-self-center ms-auto">
                <a href="#" class="ps-4" shadow-0="" me-n2"="" data-bs-dismiss="offcanvas">
                <i class="bi bi-x color-red-dark font-26 line-height-xl"></i>
                </a>
            </div>
        </div>
        <div class="divider divider-margins mt-3"></div>
        <div class="content mt-0">
            <div class="form-custom form-label form-icon">
                <i class="bi bi-code-square font-14"></i>
                <input type="date" class="form-control rounded-xs" id="filter_start_date" placeholder="Start Date">
                <label for="c3" class="form-label-always-active color-highlight font-11">Start Date</label>
            </div>
            <div class="pb-3"></div>
            <div class="form-custom form-label form-icon">
                <i class="bi bi-code-square font-14"></i>
                <input type="date" class="form-control rounded-xs" id="filter_end_date" placeholder="End Date">
                <label for="c4" class="form-label-always-active color-highlight font-11">End Date</label>
            </div>
            <div class="pb-3"></div>
            <div class="row">
                <div class="col-6">
                    <button data-bs-dismiss="offcanvas" class="btn btn-full gradient-highlight rounded-s shadow-bg shadow-bg-s" style="width:100%;" onclick="meetingFilterDateWiseClear()" >Clear</buttom>
                </div>
                <div class="col-6">
                    <button class="btn btn-full gradient-green rounded-s shadow-bg shadow-bg-s" data-bs-dismiss="offcanvas" style="width:100%;" onclick="meetingFilterDateWise()" >Apply</buttom>
                </div>
            </div>
        </div>
        
    </div>
</div>
    
   
@endsection