@extends('includes/layout')
@section('main-page-content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="py-3 mb-4">Meeting Schedule List</h4>
        <div class="card mb-4">
            <div class="card-body">
                <div class="d-flex mb-3 border-bottom">
                    <div class="me-auto p-2">
                        <input type="text" class="form-control" placeholder="Search Meeting Name">
                    </div>
                    <div class="p-2">
                        <select class="form-select" aria-label="Default select example">
                            <option selected><span class="mdi mdi-access-point"></span>Filter</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>
                    <div class="p-2">
                        <select class="form-select" aria-label="Default select example">
                            <option selected>List</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>
                    <div class="p-2">
                        <input class="form-control" type="date">
                    </div>
                    <div class="p-2">
                        <button class="btn btn-primary px-5" data-bs-toggle="modal"
                            data-bs-target="#meeting-scheduler-model"><span class="mdi mdi-plus"></span>Add Meeting</button>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="table-responsive text-nowrap mt-3 border-bottom">
                        <table class="table">
                            <thead class="table-head-color">
                                <tr>
                                    <th style="width: 10%;">Meeting Site</th>
                                    <th style="width: 10%;">Created By</th>
                                    <th>Role</th>
                                    <th style="width: 15%;">Date</thwidth:>
                                    <th>Site</th>
                                    <th>Duration</th>
                                    <th style="width: 10%;">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="table-border-bottom-0">
                                <tr>
                                    <td>
                                        <span class="fw-medium">John</span>
                                    </td>
                                    <td>Doe</td>
                                    <td>Supervisor</td>
                                    <td>03-08-2023</td>
                                    <td>NSW</td>
                                    <td>10:00-10:40 am</td>
                                    <td><span class="badge rounded-pill bg-label-success me-1">Active</span></td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="fw-medium">John</span>
                                    </td>
                                    <td>Doe</td>
                                    <td>Supervisor</td>
                                    <td>03-08-2023</td>
                                    <td>NSW</td>
                                    <td>10:00-10:40 am</td>
                                    <td><span class="badge rounded-pill bg-label-success me-1">Active</span></td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="fw-medium">John</span>
                                    </td>
                                    <td>Doe</td>
                                    <td>Supervisor</td>
                                    <td>03-08-2023</td>
                                    <td>NSW</td>
                                    <td>10:00-10:40 pm</td>
                                    <td><span class="badge rounded-pill bg-label-success me-1">Active</span></td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="fw-medium">John</span>
                                    </td>
                                    <td>Doe</td>
                                    <td>Supervisor</td>
                                    <td>03-08-2023</td>
                                    <td>NSW</td>
                                    <td>10:00-10:40 am</td>
                                    <td><span class="badge rounded-pill bg-label-success me-1">Active</span></td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="fw-medium">John</span>
                                    </td>
                                    <td>Doe</td>
                                    <td>Supervisor</td>
                                    <td>03-08-2023</td>
                                    <td>NSW</td>
                                    <td>10:00-10:40 pm</td>
                                    <td><span class="badge rounded-pill bg-label-success me-1">Active</span></td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="fw-medium">John</span>
                                    </td>
                                    <td>Doe</td>
                                    <td>Supervisor</td>
                                    <td>03-08-2023</td>
                                    <td>NSW</td>
                                    <td>10:00-10:40 am</td>
                                    <td><span class="badge rounded-pill bg-label-success me-1">Active</span></td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="fw-medium">John</span>
                                    </td>
                                    <td>Doe</td>
                                    <td>Supervisor</td>
                                    <td>03-08-2023</td>
                                    <td>NSW</td>
                                    <td>10:00-10:40 pm</td>
                                    <td><span class="badge rounded-pill bg-label-success me-1">Active</span></td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="fw-medium">John</span>
                                    </td>
                                    <td>Doe</td>
                                    <td>Supervisor</td>
                                    <td>03-08-2023</td>
                                    <td>NSW</td>
                                    <td>10:00-10:40 am</td>
                                    <td><span class="badge rounded-pill bg-label-success me-1">Active</span></td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="fw-medium">John</span>
                                    </td>
                                    <td>Doe</td>
                                    <td>Supervisor</td>
                                    <td>03-08-2023</td>
                                    <td>NSW</td>
                                    <td>10:00-10:40 pm</td>
                                    <td><span class="badge rounded-pill bg-label-success me-1">Active</span></td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="fw-medium">John</span>
                                    </td>
                                    <td>Doe</td>
                                    <td>Supervisor</td>
                                    <td>03-08-2023</td>
                                    <td>NSW</td>
                                    <td>10:00-10:40 pm</td>
                                    <td><span class="badge rounded-pill bg-label-success me-1">Active</span></td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="fw-medium">John</span>
                                    </td>
                                    <td>Doe</td>
                                    <td>Supervisor</td>
                                    <td>03-08-2023</td>
                                    <td>NSW</td>
                                    <td>10:00-10:40 pm</td>
                                    <td><span class="badge rounded-pill bg-label-success me-1">Active</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <nav aria-label="Page navigation" class="mt-3">
                        <ul class="pagination justify-content-end">
                            <li class="page-item prev">
                                <a class="page-link waves-effect" href="javascript:void(0);"><i
                                        class="tf-icon mdi mdi-chevron-double-left"></i></a>
                            </li>
                            <li class="page-item">
                                <a class="page-link waves-effect" href="javascript:void(0);">1</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link waves-effect" href="javascript:void(0);">2</a>
                            </li>
                            <li class="page-item active">
                                <a class="page-link waves-effect" href="javascript:void(0);">3</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link waves-effect" href="javascript:void(0);">4</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link waves-effect" href="javascript:void(0);">5</a>
                            </li>
                            <li class="page-item next">
                                <a class="page-link waves-effect" href="javascript:void(0);"><i
                                        class="tf-icon mdi mdi-chevron-double-right"></i></a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="meeting-scheduler-model" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-bottom ">
                    <h5 class="modal-title mb-2" id="exampleModalLabel">Create A New Meeting</h5>
                    <button type="button" class="btn-close border mb-2" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12 mb-3">
                            <label for="schedule_meeting_title">Meeting Title</label>
                            <input type="text" class="form-control" id="schedule_meeting_title">
                        </div>
                        <div class="col-lg-6 col-md-12 mb-3">
                            <label for="schedule_meeting_duration">Duration</label>
                            <div class="input-group">
                                <input type="time" aria-label="start_time" class="form-control">
                                <input type="time" aria-label="end_time" class="form-control">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12 mb-3">
                            <label for="schedule_meeting_date">Date</label>
                            <input type="date" class="form-control" id="schedule_meeting_date">
                        </div>
                        <div class="col-12 mb-3">
                            <label for="schedule_meeting_site">Site Name</label>
                            <input type="text" class="form-control" id="schedule_meeting_sites">
                        </div>
                        <div class="col-12 mb-3">
                            <label for="schedule_meeting_member">Meeting Member</label>
                            <div class="input-group">
                                <select class="form-select schedule_meeting_member" multiple="multiple"
                                    aria-label="Default select example">
                                    <option value="All">All</option>
                                    <option value="Salam Aslam">Salam Aslam</option>
                                    <option value="Abdul Rehman">Abdul Rehman</option>
                                    <option value="Afaq Ahmad">Afaq Ahmad</option>
                                    <option value="Nouman">Nouman</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-top">
                    <button type="button" class="btn btn-outline-primary">Save & Publish</button>
                    <button type="button" class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('css-js')
    <script>
        function previewThumbnail() {
            const thumbnailInput = document.querySelector('input[name="thumbnail"]');
            const thumbnailPreview = document.getElementById('thumbnail-preview');
            const file = thumbnailInput.files[0];

            if (file) {
                const reader = new FileReader();
                reader.onload = function() {
                    thumbnailPreview.innerHTML =
                        `<img src="${reader.result}" class="rounded-circle" alt="Thumbnail Preview" style="width:65%;height:auto">`;
                };
                reader.readAsDataURL(file);
            }
        }
        $(document).ready(function() {
            var selectElement = $('.schedule_meeting_member');
            selectElement.select2({
                width: '100%',
            });
            selectElement.on('select2:select', function(e) {
                var selectedValues = $(this).val();
                if (selectedValues && selectedValues.includes('All')) {
                    selectedValues = ['All'];
                } else {
                    var allIndex = selectedValues.indexOf('All');
                    if (allIndex !== -1) {
                        selectedValues.splice(allIndex, 1);
                    }
                }
                $(this).val(selectedValues).trigger('change');
            });
            selectElement.on('select2:unselect', function(e) {
                var selectedValues = $(this).val();
                if (selectedValues && selectedValues.includes('All')) {
                    selectedValues = ['All'];
                }
                $(this).val(selectedValues).trigger('change');
            });
        });

        $(document).ready(function() {
            $(document).on('focus', '.select2-container--default .select2-selection--multiple', function() {
                $(this).css('border', '2px solid #16b1ff');
            });
            $(document).on('blur', '.select2-container--default .select2-selection--multiple', function(event) {
                if (!$(event.relatedTarget).closest('.select2-container--default').length) {
                    $(this).css('border', '');
                }
            });
        });
    </script>
@endsection