@extends('includes/layout')
@section('main-page-content')
    <div class="full_loader"></div>
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card mb-4">
            <div class="card-body">
                <div class="meeting-section border-bottom py-2 justify-content-between align-items-center">
                    <form method="GET" action="{{ url('meetings') }}" style="width: 50%;">
                        <div class="me-auto search-bar">
                            <div class="form-group has-search" style="width: 50%;">
                                <span class="mdi mdi-magnify form-control-feedback"></span>
                                <input type="text" name="search" class="form-control search-input" placeholder="Search by meeting or site name" value="{{ request('search') }}">
                            </div>
                            <button class="btn btn-success btn-sm p-2 waves-effect waves-light filter-btn" type="submit">
                                <span class="mdi mdi-filter-outline me-1"></span>
                                Search
                            </button>
                        </div>
                    </form>
                    <div class="grid-view  align-items-center">
                        <button class="btn btn-outline-primary me-2 px-2" id="grid_view_button" onclick="activeView('grid')">
                            Grid View
                            <span class="mdi mdi-grid ms-1"></span>
                        </button>
                        {{-- <button class="calender-btn btn btn-outline-dark text-dark me-2 px-2" id="calendar_view_button"
                            onclick="activeView('calendar')">
                            <span class="mdi mdi-calendar-blank me-1"></span>
                            Calender
                        </button> --}}
                        @if (in_array('Meetings Manager Maintain', Session::get('permissions')))
                            <a href="{{ route('meetings.create') }}" class="btn btn-primary px-3">
                                <span class="mdi mdi-plus me-1"></span>Add Meeting
                            </a>
                        @endif
                    </div>
                </div>
                <div id="meeting_grid_view">
                    @include('Meetings.grid')
                </div>
                <div id="meeting_calendar_view" style="display: none">
                    @include('Meetings.calendar')
                </div>
            </div>
        </div>
    </div>

    {{-- <div class="layout-overlay layout-menu-toggle"></div> --}}
@endsection

@section('css-js')
<style>
    .filter-btn {
        margin-left: 16px
    }

    .meeting-section,
    .search-bar,
    .grid-view {
        display: flex;
        /* Adjust margin-bottom as needed */
    }

    @media only screen and (max-width: 320px) {

        .meeting-section,
        .search-bar,
        .grid-view {
            display: block;
            /* Adjust margin-bottom as needed */
        }

        .filter-btn {
            margin-left: 0px;
            margin-top: 10px;
        }

        .calender-btn {
            margin-top: 10px;
        }

        .btn.btn-outline-primary {
            margin-top: 10px;
        }

        .btn.btn-primary {
            margin-top: 10px;
        }
    }

    @media only screen and (max-width: 360px) {
        .btn.btn-primary {
            margin-top: 10px;
        }
    }

    @media only screen and (min-width: 321px) and (max-width: 425px) {
        .search-bar {
            display: flex;
            margin-bottom: 10px;
        }

        .filter-btn {
            margin-top: 0px;
            margin-left: 10px;
        }

        .meeting-section,
        .grid-view {
            display: block;
            /* Adjust margin-bottom as needed */
        }

    }

    @media only screen and (min-width: 426px) and (max-width: 768px) {

        .meeting-section,
        .grid-view {
            display: block;
            /* Adjust margin-bottom as needed */
        }

        .grid-view {
            margin-top: 10px;
        }
    }


    .has-search .search-input {
        padding-left: 2.375rem;
    }

    .has-search .form-control-feedback {
        position: absolute;
        width: 2.375rem;
        height: 2.375rem;
        line-height: 2.375rem;
        text-align: center;
    }

    .card-border {
        border-radius: 15px;
        border: 1px solid rgb(211, 210, 210);
    }

    @media only screen and (max-width: 1024px) {
        .view_btn {
            font-size: xx-small;
        }

        .svg-h-w svg {
            width: 20px;
            height: 20px;
        }
    }

    .select2-container {
        z-index: 10000;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .c_header {
        background-color: #019FF3;
    }

    .btn_color {
        background-color: white;
        color: #019FF3;
    }

    .btn_color:hover {
        background-color: white;
        color: #019FF3;
    }

    .img-overlap {
        margin-left: -3px;
        margin-right: -3px;
    }
</style>

<script>
    $(document).ready(function() {
        $('.full_loader').addClass('d-none');  // Initially hide the loader
        function loader(show) {
            if (show) {
                // Show the loader
                $('.full_loader').removeClass('d-none');

                // Automatically hide the loader after 2 seconds (2000 milliseconds)
                setTimeout(function() {
                    $('.full_loader').addClass('d-none');
                }, 1000);  // 1000ms = 1 seconds
            } else {
                // Directly hide the loader when `show` is false
                $('.full_loader').addClass('d-none');
            }
        }
    });
    function activeView(view) {
        if (view == 'grid') {
            $('#meeting_calendar_view').hide();
            $('#meeting_grid_view').show();
            $('#calendar_view_button').addClass('btn-outline-dark text-dark');
            $('#calendar_view_button').removeClass('btn-outline-primary');
            $('#grid_view_button').addClass('btn-outline-primary');
            $('#grid_view_button').removeClass('btn-outline-dark text-dark');
        } else {
            $('#meeting_grid_view').hide();
            $('#meeting_calendar_view').show();
            $('#calendar_view_button').removeClass('btn-outline-dark text-dark');
            $('#calendar_view_button').addClass('btn-outline-primary');
            $('#grid_view_button').removeClass('btn-outline-primary');
            $('#grid_view_button').addClass('btn-outline-dark text-dark');
        }
    }
</script>
@endsection