@extends('includes/layout')
@section('main-page-content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card mb-4">
            <div class="card-body">

                <div class="call-detail justify-content-between align-items-center mb-3 py-2 border-bottom">
                    <h4>{{ $meeting->agenda }}</h4>
                    <div class="call-buttons justify-content-end align-items-center">
                        @if (in_array('Meetings Manager Maintain', Session::get('permissions')))
                            {{-- <button class="doc-btn btn btn-primary px-2 mx-1" data-bs-toggle="modal" data-bs-target="#add_meeting_notes">
                                <span class="mdi mdi-plus"></span>
                                Add Meeting Notes
                            </button> --}}
                            <a href="{{ route('meetings.document.edit', ['step' => 1, 'id' => $meeting->id,'sequence'=>0]) }}" class="btn btn-primary px-3 mx-1">
                                <span class="mdi mdi-plus"></span>
                                Custom Document
                            </a>

                            <button class="doc-btn btn btn-primary px-2" data-bs-toggle="modal" data-bs-target="#add_meeting_document">
                                <span class="mdi mdi-plus"></span>
                                Add Document
                            </button>
                            @if ($meeting->allow_guest)
                                <button class="guest-btn btn btn-primary px-2 ms-1" data-bs-toggle="modal"
                                    data-bs-target="#add_guest_user">
                                    <span class="mdi mdi-account-plus pe-2"></span>
                                    Add Guest
                                </button>
                            @endif
                            <a class="doc-btn btn btn-warning px-3 ms-1" href="{{ route('meeting-attendance-details', ['meeting_id' => $meeting->id]) }}" target="_blank">
                                Details
                            </a>
                            <a href="{{ route('meetings.edit', $meeting->id) }}" class="btn btn-success px-3 ms-1">Edit</a>
                            <button class="btn btn-danger px-3 ms-1" data-id="{{ $meeting->id }}" onclick="delete_modal(this)">Delete</button>
                            
                        @endif
                    </div>
                </div>
                <div class="mt-3 border-bottom">
                    <div class="h4">MEETING DESCRIPTION</div>
                    <P>{{ $meeting->description }}</P>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-sm-12 mt-3">
                        <div class="d-flex  mb-3">
                            <div class=" p-2 ">
                                <span class="mdi mdi-checkbox-marked-circle-outline check_box_mark"></span>
                            </div>
                            <div class="p-2  me-auto">ORGANISER</div>
                            <div class="p-2 ">
                                @foreach ($meeting->meeting_organisers as $organiser)
                                    {{ $organiser->organiser->first_name }} {{ $organiser->organiser->middle_name }}
                                    {{ $organiser->organiser->last_name }}
                                @endforeach
                            </div>
                        </div>
                        <div class="d-flex  mb-3">
                            <div class=" p-2 ">
                                <span class="mdi mdi-checkbox-marked-circle-outline check_box_mark"></span>
                            </div>
                            <div class="p-2  me-auto">MEETING OCCURANCE</div>
                            <div class="p-2 ">
                                @if ($meeting->is_recurring == config('constants.meeting_recurring.one_time.key'))
                                    <span
                                        class="badge bg-secondary">{{ config('constants.meeting_recurring.one_time.value') }}</span>
                                @else
                                    <span
                                        class="badge bg-secondary">{{ config('constants.meeting_recurring.recurring.value') }}</span>
                                @endif
                            </div>
                        </div>
                        @if ($meeting->is_recurring == config('constants.meeting_recurring.recurring.key'))
                            @foreach (config('constants.meeting_frequency') as $frequency)
                                @if ($frequency['key'] == $meeting->frequency)
                                    <div class="d-flex  mb-3">
                                        <div class=" p-2 ">
                                            <span class="mdi mdi-checkbox-marked-circle-outline check_box_mark"></span>
                                        </div>
                                        <div class="p-2 me-auto">MEETING FREQUENCY</div>
                                        <div class="p-2">
                                            <span class="badge bg-secondary">{{ $frequency['value'] }}</span>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        @endif
                        <div class="d-flex  mb-3">
                            <div class=" p-2 ">
                                <span class="mdi mdi-checkbox-marked-circle-outline check_box_mark"></span>
                            </div>
                            <div class="p-2  me-auto">START DATE</div>
                            <div class="p-2 ">{{ formatDate($meeting->start_date) }}</div>
                        </div>
                        <div class="d-flex  mb-3">
                            <div class=" p-2 ">
                                <span class="mdi mdi-checkbox-marked-circle-outline check_box_mark"></span>
                            </div>
                            <div class="p-2  me-auto">END DATE</div>
                            <div class="p-2 ">{{ formatDate($meeting->end_date) }}</div>
                        </div>
                        <div class="d-flex  mb-3">
                            <div class=" p-2 ">
                                <span class="mdi mdi-checkbox-marked-circle-outline check_box_mark"></span>
                            </div>
                            <div class="p-2  me-auto">TIMINGS</div>
                            <div class="p-2 ">{{ formatTime($meeting->start_time) }} TO
                                {{ formatTime($meeting->end_time) }}
                            </div>
                        </div>
                        <div class="d-flex  mb-3">
                            <div class=" p-2 ">
                                <span class="mdi mdi-checkbox-marked-circle-outline check_box_mark"></span>
                            </div>
                            <div class="p-2  me-auto">SITE</div>
                            <div class="p-2 ">{{ $meeting->meeting_site->title }}</div>
                        </div>
                        <div class="d-flex  mb-3">
                            <div class=" p-2 ">
                                <span class="mdi mdi-checkbox-marked-circle-outline check_box_mark"></span>
                            </div>
                            <div class="p-2  me-auto">MEMBER</div>
                            <div class="p-2">
                                <div class="d-flex">
                                    @if ($meeting->allow_meeting_members == config('constants.allow_meeting_members.everyone.key'))
                                        <span
                                            class="badge bg-primary">{{ config('constants.allow_meeting_members.everyone.value') }}</span>
                                    @else
                                        @foreach ($meeting->meeting_users as $user)
                                        @if (file_exists(asset($user->meeting_employees->image)))
                                            <img src="{{ asset($user->meeting_employees->image) }}" alt=""
                                                class="img-fluid w-px-30 h-px-30 rounded-circle">
                                        @else
                                            <img src="{{ asset('assets/img/default.png') }}" class="img-fluid w-px-30 h-px-30 rounded-circle">
                                        @endif
                                        @endforeach
                                        @if (count($meeting->meeting_users) > 10)
                                            <div class="border rounded-circle w-px-30 h-px-30 text-success cursor-pointer"
                                                style="padding:7px 0; text-align: center; background-color: #e2f1d5; font-size: x-small;margin-top: 1px;">
                                                @php
                                                    $count_users = count($meeting->meeting_users);
                                                    $result = $count_users - 10;
                                                @endphp
                                                <span>+ {{ $result }}</span>
                                            </div>
                                        @endif
                                        <button class="btn btn-primary btn-sm px-1 ms-2" style="text-transform:capitalize"
                                            data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"
                                            aria-controls="offcanvasRight">
                                            View
                                            <span class="mdi mdi-eye ms-1"></span>
                                        </button>
                                    @endif

                                </div>

                            </div>
                        </div>
                        @if ($meeting->allow_guest)
                            <div class="d-flex  mb-3">
                                <div class=" p-2 ">
                                    <span class="mdi mdi-checkbox-marked-circle-outline check_box_mark"></span>
                                </div>
                                <div class="p-2  me-auto">GUEST MEMBER</div>
                                <div class="p-2">
                                    <div class="d-flex">
                                        <button class="btn btn-primary btn-sm px-1 ms-2" style="text-transform:capitalize"
                                            data-bs-toggle="offcanvas" data-bs-target="#offcanvasRightGuest"
                                            aria-controls="offcanvasRightGuest">
                                            View
                                            <span class="mdi mdi-eye ms-1"></span>
                                        </button>
                                    </div>

                                </div>
                            </div>
                            <div class="d-flex  mb-3">
                                <div class=" p-2 ">
                                    <span class="mdi mdi-checkbox-marked-circle-outline check_box_mark"></span>
                                </div>
                                <div class="p-2 me-auto">Invite Guest User</div>
                                <div class="p-2">
                                    <div class="d-flex">
                                        <button class="btn btn-success btn-sm px-1 ms-2" style="text-transform:capitalize" onclick="$('#copyButton').addClass('d-none');" data-bs-toggle="modal"
                                        data-bs-target="#invite_guest_user">
                                            Invite Link
                                        </button>
                                    </div>
                                </div>
                                {{-- <div class="p-2">
                                    <div class="user-meeting-link border border-1 rounded p-2">
                                        <span class="border-end pe-2 me-1"
                                            id="copyText">{{ url('/meeting/guest/' . base64_encode($meeting->id)) }}</span>
                                        <button class="btn p-0 mdi mdi-content-copy" id="copyButton"
                                            data-clipboard-target="#copyText"></button>
                                    </div>
                                </div> --}}
                            </div>
                            
                        @endif
                        <!-- <div class="d-flex  mb-3">
                            <div class=" p-2 ">
                                <span class="mdi mdi-checkbox-marked-circle-outline check_box_mark"></span>
                            </div>
                            <div class="p-2 me-auto">Notes</div>
                            <div class="p-2">
                                <div class="d-flex">
                                    <button class="btn btn-primary btn-sm px-1 ms-2" style="text-transform:capitalize" data-bs-toggle="modal" data-bs-target="#view_meeting_notes">
                                        View
                                        <span class="mdi mdi-eye ms-1"></span>
                                    </button>
                                </div>
                            </div>
                        </div> -->
                    </div>
                    @if (count($meeting->meeting_histories) > 0)
                        <div class="col-lg-6 col-sm-12 mt-3 border-start">
                            <h3>History</h3>
                            <ul class="scroll-histories">
                                @foreach ($meeting->meeting_histories as $history)
                                    <li>@php echo $history->description; @endphp</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                  

                    <div class="col-12 @if (count($meeting->meeting_documents)) border-top @endif">
                    @if(count($meeting->meeting_documents)>0)
                    <span>Added Document</span>
                          @endif
                    @foreach ($meeting->meeting_documents as $document)

                        <div class="user-history mb-3 mt-3 border">
                            <div class="p-2">
                                <a href="{{ asset($document->document_path) }}" target="_blank">
                                    <span class="mdi mdi-folder-open folder_color"></span>
                                </a>
                            </div>
                            <div class="p-2 mx-5">{{ $document->title }}</div>
                            <div class="p-2 mx-5">{{ displayFileSize($document->document_path) }}</div>
                            <div class="p-2 me-auto mx-5">{{ formatDate($document->meeting_date) }}</div>
                            <div class="p-2 me-auto mx-5">
                                @if ($document->is_signed)
                                    <span class="badge bg-info">Signature Required</span>
                                @else
                                    <span class="badge bg-danger">Signature Not Required</span>
                                @endif
                            </div>
                            <div class="p-2 mx-3 cursor-pointer">
                                <a class="mx-1" href="{{ asset($document->document_path) }}" target="_blank">
                                    <span class="mdi mdi-cloud-download mdi-20px text-info me-1"></span>Download
                                </a>
                               
                                @if (count($document->employee_signed_document) < 1)
                                    <a class="mx-3" data-id="{{ $document->id }}" onclick="delete_document_modal(this)">
                                        <span class="mdi mdi-trash-can-outline mdi-20px text-danger me-1 delete-document-btn"></span>Delete
                                    </a>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            <!-- Render the meeting_note_documents (separate section) -->
            <div class="col-12 @if (count($meeting->meeting_note_documents)) border-top @endif">
           @if(count($meeting->meeting_note_documents)>0)
           <span>Custom Meeting Note Document</span>
           @endif
        @foreach ($meeting->meeting_note_documents as $document)
        <div class="user-history mb-3 mt-3 border">
            <div class="p-2">
                <a href="{{ asset($document->document_path) }}" target="_blank">
                    <span class="mdi mdi-folder-open folder_color"></span>
                </a>
            </div>
            <div class="p-2 mx-5">{{ $document->title }}</div>
            <div class="p-2 mx-5">{{ displayFileSize($document->document_path) }}</div>
            <div class="p-2 me-auto mx-5">{{ formatDate($document->meeting_date) }}</div>
            <div class="p-2 me-auto mx-5">
                @if ($document->is_signed)
                    <span class="badge bg-info">Signature Required</span>
                @else
                    <span class="badge bg-danger">Signature Not Required</span>
                @endif
            </div>
            <div class="p-2 me-auto mx-5">{{$document->type_of_setting??''}}</div>

            <!-- Dots for Dropdown -->
            <div class="p-2 mx-3 cursor-pointer">
                <div class="dropdown d-inline bg-none">
                    <button class="btn btn-link p-0" type="button" id="dropdownMenuButton{{ $document->id }}" data-bs-toggle="dropdown" aria-expanded="false">
                        <span class="mdi mdi-dots-vertical list_color"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ $document->id }}">
                        <li>
                            <a class="dropdown-item py-1 ps-2" href="{{ asset($document->document_path) }}" target="_blank">
                                <span class="mdi mdi-cloud-download mdi-20px text-info me-1"></span>Download
                            </a>
                        </li>
                        <!-- a -->
                        <li>
                            <a class="dropdown-item py-1 ps-2" href="/meetings/document/pdf/regenerate/download/{{$document->meeting_note_id}}" target="_blank">
                                <span class="mdi mdi-restart mdi-20px text-warning me-1"></span>Regenerate PDF
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item py-1 ps-2" href="/meetings/document/edit/1/{{$document->meeting_note_id}}/1">
                                <span class="mdi mdi-pencil mdi-20px text-warning me-1"></span>Edit
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item py-1 ps-2" data-id="{{ $document->id }}" onclick="delete_meeting_document_note__modal(this)">
                                <span class="mdi mdi-trash-can-outline mdi-20px text-danger me-1"></span>Delete
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    @endforeach
</div>


                        {{-- <div class="d-flex  mb-3 mt-3 border">
                            <div class=" p-2 ">
                                <span class="mdi mdi-folder-open folder_color"></span>
                            </div>
                            <div class="p-2 mx-3">File</div>
                            <div class="p-2 mx-3">8 MB</div>
                            <div class="p-2 me-auto mx-3">12.09.23</div>
                            <div class="p-2 mx-3 cursor-pointer">View Detail <span class="mdi mdi-eye-outline"></span></div>
                        </div>
                        <div class="d-flex  mb-3 mt-3 border">
                            <div class=" p-2 ">
                                <span class="mdi mdi-folder-open folder_color"></span>
                            </div>
                            <div class="p-2 mx-3">File</div>
                            <div class="p-2 mx-3">8 MB</div>
                            <div class="p-2 me-auto mx-3">12.09.23</div>
                            <div class="p-2 mx-3 cursor-pointer">View Detail <span class="mdi mdi-eye-outline"></span></div>
                        </div>
                        <div class="d-flex  mb-3 mt-3 border">
                            <div class=" p-2 ">
                                <span class="mdi mdi-folder-open folder_color"></span>
                            </div>
                            <div class="p-2 mx-3">File</div>
                            <div class="p-2 mx-3">8 MB</div>
                            <div class="p-2 me-auto mx-3">12.09.23</div>
                            <div class="p-2 mx-3 cursor-pointer">View Detail <span class="mdi mdi-eye-outline"></span></div>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- View Meeting Notes Modal --}}
    <div class="modal fade" id="view_meeting_notes" tabindex="-1" aria-labelledby="deletePreLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-info border-bottom">
                    <h5 class="modal-title text-white pb-2" id="deletePreLabel">Meeting Notes</h5>
                    <button type="button" class="btn-close btn-close-white  mb-2 text-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    @if ($meeting->notes == null)
                        <span class="text-danger">No Notes are available!</span>
                    @else
                        {!! $meeting->notes !!}
                    @endif
                    
                </div>
            </div>
        </div>
    </div>
    <!--Model  -->
    <div class="modal fade" id="add_meeting_notes" 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">Add Meeting Notes</h5>
                    <button type="button" class="btn-close border mb-2" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <form id="add_meeting_notes_form" onsubmit="return false;">
                    <div class="modal-body">
                        @csrf
                        <div class="row">
                            <input type="hidden" class="form-control" name="meeting_id" value="{{ $meeting->id }}">
                            <div class="col-12">
                                <label>Meeting Notes</label>
                                <textarea class="form-control" name="meeting_notes" id="meeting_notes"></textarea>    
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-top">
                        <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
 
    <!-- Modal -->
    <div class="modal fade" id="add_meeting_document" 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">Add Meeting Document</h5>
                    <button type="button" class="btn-close border mb-2" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <form id="add_meeting_document_form" onsubmit="return false;" enctype="multipart/form-data">
                    <div class="modal-body">
                        @csrf
                        <div class="row">
                            <input type="hidden" class="form-control" name="meeting_id" value="{{ $meeting->id }}">
                            <div class="col-12 mb-3">
                                <label>Title</label>
                                <input type="text" name="title" class="form-control" id="">
                            </div>
                            <div class="col-lg-12 mb-3">
                                <label>Meeting Document</label>
                                <div class="document d-flex justify-content-between input-group">
                                    <span style="font-size:14px" class="ms-2 pt-1"id="meeting_document_label">No file
                                        chosen</span>
                                    <label style="border-radius:5px;font-size:12px"
                                        class="input-group-text btn bg-success  text-white ml-5 btn-sm"
                                        for="client_passport_upload">
                                        Upload
                                        <img src="{{ url('/assets/img/upload-icon.png') }}"class="ms-1" alt="Thumnail Preview" width="15px" height="15px" />
                                    </label>
                                    <input type="file" name="meeting_document"
                                        class="doc_1 form-control visually-hidden" id="client_passport_upload"
                                        accept=".pdf, .doc, .docx, .jpg, .jpeg, .png, .gif, .mp4, .avi, .mov, .wmv"
                                        onchange="updateFileName(this)">
                                </div>
                            </div>
                            @if ($meeting->is_recurring)
                                <div class="col-12 mb-3 d-flex">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="select_meeting_date"
                                            id="all_meeting_date" value="0">
                                        <label class="form-check-label" for="all_meeting_date" id="all_meeting_date_label">
                                            All Days
                                        </label>
                                    </div>
                                    <div class="form-check mx-5">
                                        <input class="form-check-input" type="radio" name="select_meeting_date"
                                            id="select_meeting_date" value="1">
                                        <label class="form-check-label" for="select_meeting_date"
                                            id="select_meeting_date_label">
                                            Specific
                                        </label>
                                    </div>
                                </div>
                            @endif
                            
                            <div class="col-12 mb-3" id="display_meeting_date">

                                @if ($meeting->is_recurring && $meeting->frequency == config('constants.meeting_frequency.weekly.key'))
                                    <div class="col-12 mb-3" id="display_meeting_date">
                                        <label>Meeting Dates</label>
                                        <select name="meeting_date" id="" class="form-select">
                                            @foreach ($meeting->week_days as $weekday)
                                                @php
                                                    $value = explode(',', $weekday);
                                                @endphp
                                                <option value="{{ formatDate($value[0], 'Y-m-d') }}">{{ $weekday }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                @else
                                    <label>Date</label>
                                    <input type="date" name="meeting_date" id="" class="form-control"  min="{{$meeting->start_date}}" max="{{$meeting->end_date}}">
                                @endif

                            </div>

                            <div class="col-12">
                                <div class="d-flex">
                                    <h6 class="mt-2 p-1 mb-0">Signature Required</h6>
                                    <div class="mt-2">
                                        <div class="form-check form-check-inline ms-2">
                                            <input class="form-check-input" type="checkbox" id="inlineCheckbox1"
                                                value="1" name="is_signed">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-top">
                        <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @foreach ($meeting->meeting_guest_users as $guest)
        <div class="modal fade" id="edit_guest_user_{{ $guest->id }}" 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">Edit Guest User</h5>
                        <button type="button" class="btn-close border mb-2" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <form id="edit_guest_user_form_{{ $guest->id }}" class="edit_guest_user_form_class"
                        onsubmit="return false;">
                        <div class="modal-body">
                            @csrf
                            <div class="row">
                                <input type="hidden" class="form-control" name="meeting_id"
                                    value="{{ $guest->meeting_id }}">
                                <input type="hidden" class="form-control" name="guest_user_id"
                                    value="{{ $guest->id }}">
                                <div class="col-12 mb-3">
                                    <label>Name</label>
                                    <input type="text" name="name" class="form-control"
                                        value="{{ $guest->name }}">
                                </div>
                                <div class="col-12 mb-3">
                                    <label>Email</label>
                                    <input type="text" name="email" class="form-control"
                                        value="{{ $guest->email }}">
                                </div>
                                <div class="col-12 mb-3">
                                    <label>Phone Number</label>
                                    <input type="text" name="number" class="form-control"
                                        value="{{ $guest->phone_number }}">
                                </div>
                                <div class="col-12 mb-3">
                                    <label>Occupation</label>
                                    <input type="text" name="occupation" class="form-control"
                                        value="{{ $guest->occupation }}">
                                </div>
                                <div class="col-12 mb-3">
                                    <label>Details(Option)</label>
                                    <input type="text" name="details" class="form-control"
                                        value="{{ $guest->details }}">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer border-top">
                            <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endforeach

    <div class="modal fade" id="delete_meeting_modal" tabindex="-1" aria-labelledby="deletePreLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger px-4 py-2">
                    <h5 class="modal-title text-white" id="deletePreLabel">Delete</h5>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this record?<br><br>
                    <b class="text-warning">Warning:</b> This record will no longer be available. Please ensure you
                    genuinely want to delete it before clicking the delete button.
                </div>

                <div class="modal-footer border-top py-2">
                    <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Close</button>
                    <form action="{{ route('meetings.destroy', $meeting->id) }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>

            </div>
        </div>
    </div>

    <div class="modal fade" id="delete_meeting_document_modal" tabindex="-1" aria-labelledby="deletePreLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger px-4 py-2">
                    <h5 class="modal-title text-white" id="deletePreLabel">Delete</h5>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this record?<br><br>
                    <b class="text-warning">Warning:</b> This record will no longer be available. Please ensure you
                    genuinely want to delete it before clicking the delete button.
                </div>

                <div class="modal-footer border-top py-2">
                    <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Close</button>
                    <form action="{{ url('meetings/document/delete') }}" method="POST">
                        @csrf
                        <input type="hidden" name="meeting_document_id" id="delete_meeting_document_id_modal">
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>

            </div>
        </div>
    </div>
   <div class="modal fade" id="delete_meeting_document_note_modal" tabindex="-1" aria-labelledby="deletePreLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger px-4 py-2">
                    <h5 class="modal-title text-white" id="deletePreLabel">Delete</h5>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this record?<br><br>
                    <b class="text-warning">Warning:</b> This record will no longer be available. Please ensure you
                    genuinely want to delete it before clicking the delete button.
                </div>

                <div class="modal-footer border-top py-2">
                    <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Close</button>
                    <form action="{{ url('meetings/document/note/delete') }}" method="POST">
                        @csrf
                        <input type="hidden" name="meeting_document_note__id" id="delete_meeting_document_note_id_modal">
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>

            </div>
        </div>
                        </div>
    <div class="modal fade" id="delete_guest_user_modal" tabindex="-1" aria-labelledby="deletePreLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger px-4 py-2">
                    <h5 class="modal-title text-white" id="deletePreLabel">Delete</h5>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this record?<br><br>
                    <b class="text-warning">Warning:</b> This record will no longer be available. Please ensure you
                    genuinely want to delete it before clicking the delete button.
                </div>

                <div class="modal-footer border-top py-2">
                    <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Close</button>
                    <form action="{{ url('meeting/guest-user/delete') }}" method="POST">
                        @csrf
                        <input type="hidden" name="guest_user_id" id="delete_guest_user_id_modal">
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>

            </div>
        </div>
    </div>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header " style="background-color:#019FF3;">
            <h5 class="text-white" id="offcanvasRightLabel">Meeting Members</h5>
            <a type="button" class="border px-2 rounded-circle btn-text-white" data-bs-dismiss="offcanvas">X</a>
        </div>

        <div class="offcanvas-body p-0">
            <div class="h-px-30 w-auto" style="background-color:#d9eeff">
                <div class="d-flex justify-content-between py-1 px-4">
                    <div class="text_color">User</div>
                    <div class="text_color">Profile</div>
                </div>
            </div>
            <div id="tier_emp">
                @foreach ($meeting->meeting_users as $user)
                    <div class="d-flex p-2 align-items-center border-bottom py-1 justify-content-between">
                        <div class="d-flex ps-3 align-items-center py-1">
                            <div class="border rounded-circle me-2 w-px-40 h-px-40"
                                style="background-image: url('{{ asset($user->meeting_employees->image) }}'); background-size: cover; background-position: center;">
                            </div>
                            <div style="color:#4E4E4E;">{{ $user->meeting_employees->first_name }}
                                {{ $user->meeting_employees->middle_name }} {{ $user->meeting_employees->last_name }}
                            </div>
                        </div>
                        <a class="btn ps-3 reason-btn"
                            href="{{ url('/') . '/user-profile/' . $user->meeting_employees->emp_id }}" target="_blank">
                            <span class="mdi mdi-eye text-primary"></span>
                        </a>

                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="modal fade" id="add_guest_user" 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">Add Guest User</h5>
                    <button type="button" class="btn-close border mb-2" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <form id="add_guest_user_form" onsubmit="return false;">
                    <div class="modal-body">
                        @csrf
                        <div class="row">
                            <input type="hidden" class="form-control" name="meeting_id" value="{{ $meeting->id }}">
                            <div class="col-12 mb-3">
                                <label>Name</label>
                                <input type="text" name="name" class="form-control">
                            </div>
                            <div class="col-12 mb-3">
                                <label>Email</label>
                                <input type="text" name="email" class="form-control">
                            </div>
                            <div class="col-12 mb-3">
                                <label>Phone Number</label>
                                <input type="text" name="number" class="form-control">
                            </div>
                            <div class="col-12 mb-3">
                                <label>Occupation</label>
                                <input type="text" name="occupation" class="form-control">
                            </div>
                            <div class="col-12 mb-3">
                                <label>Details(Option)</label>
                                <input type="text" name="details" class="form-control">
                            </div>
                            @if ($meeting->is_recurring)
                                <div class="col-12 mb-3 d-flex">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="select_meeting_date_guest"
                                            id="all_meeting_date_guest" value="0">
                                        <label class="form-check-label" for="all_meeting_date_guest" id="all_meeting_date_guest_label">
                                            All Days
                                        </label>
                                    </div>
                                    <div class="form-check mx-5">
                                        <input class="form-check-input" type="radio" name="select_meeting_date_guest"
                                            id="select_meeting_date_guest" value="1">
                                        <label class="form-check-label" for="select_meeting_date_guest"
                                            id="select_meeting_date_guest_label">
                                            Specific
                                        </label>
                                    </div>
                                </div>
                            @endif
                            
                            <div class="col-12 mb-3" id="display_meeting_date">
                                @if ($meeting->is_recurring && $meeting->frequency == config('constants.meeting_frequency.weekly.key'))
                                    <div class="col-6 mb-3" id="display_meeting_date_guest">
                                        <label>Meeting Dates</label>
                                        <select name="meeting_date" id="" class="form-select">
                                            @foreach ($meeting->week_days as $weekday)
                                                @php
                                                    $value = explode(',', $weekday);
                                                @endphp
                                                <option value="{{ formatDate($value[0], 'Y-m-d') }}">{{ $weekday }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                @else
                                    <label>Date</label>
                                    <input type="date" name="meeting_date" id="" class="form-control"  min="{{$meeting->start_date}}" max="{{$meeting->end_date}}">
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-top">
                        <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="invite_guest_user" 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">Invite Guest User</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">
                        <input type="hidden" class="form-control" name="meeting_id" value="{{ $meeting->id }}">
                        <div class="col-12 mb-2">
                            @if ($meeting->is_recurring && $meeting->frequency == config('constants.meeting_frequency.weekly.key'))
                                <div class="col-12 mb-3">
                                    <label>Meeting Dates</label>
                                    <select name="guest_user_meeting_date" id="" class="form-select guest_user_meeting_date">
                                        @foreach ($meeting->week_days as $weekday)
                                            @php
                                                $value = explode(',', $weekday);
                                            @endphp
                                            <option value="{{ formatDate($value[0], 'Y-m-d') }}">{{ $weekday }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            @else
                                <label>Meeting Date</label>
                                <input type="date" name="guest_user_meeting_date" id="" class="form-control guest_user_meeting_date"  min="{{$meeting->start_date}}" max="{{$meeting->end_date}}">
                            @endif

                        </div>
                        <div class="col-12 mb-2 invite_link">
                            <label>Invite Link</label>
                            <div class="user-meeting-link border border-1 rounded p-2">
                                <input type="hidden" value="{{url('/meeting/guest/' . base64_encode($meeting->id))}}" id="guest_meeting_url">
                                <span class="pe-2 me-1" id="copyText">{{url('/meeting/guest/' . base64_encode($meeting->id))}}</span>
                            </div>
                        </div>
                        <div class="col-12 mb-2 meeting_note">
                        <span class="btn btn-sm btn-dark p-1 m-1">Note:</span><span>please select date to generate link.</span>

                        </div>
                        <div class="col-12">
                            <div class="d-flex justify-content-end">
                                <button class="btn btn-secondary btn-sm" id="copyButton" data-clipboard-target="#copyText">Copy Link</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRightGuest" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header " style="background-color:#019FF3;">
            <h5 class="text-white" id="offcanvasRightLabel">Guest Members</h5>
            <a type="button" class="border px-2 rounded-circle btn-text-white" data-bs-dismiss="offcanvas">X</a>
        </div>

        <div class="offcanvas-body p-0">
            <div class="h-px-30 w-auto" style="background-color:#d9eeff">
                <div class="d-flex justify-content-between py-1 px-4">
                    <div class="text_color">Name</div>
                    <div class="text_color">Details</div>
                </div>
            </div>
            <div id="tier_emp">
                @foreach ($meeting->meeting_guest_users as $guest)
                    <div class="border-bottom">
                        <div class="d-flex p-3 align-items-center py-1 justify-content-between">
                            <div style="color:#4E4E4E;">{{ $guest->name }}</div>
                            <div class=" justify-content-end">
                                <a href="#" data-bs-toggle="collapse"
                                    data-bs-target="#panelsStayOpen-collapseOne{{ $guest->id }}" aria-expanded="true"
                                    aria-controls="panelsStayOpen-collapseOne{{ $guest->id }}">
                                    <span class="mdi mdi-eye text-primary"></span>
                                </a>
                                <a href="#" onclick="edit_guest_user_modal({{ $guest->id }})">
                                    <span class="mdi mdi-account-edit text-primary"></span>
                                </a>
                                <a href="#" onclick="delete_guest_user_modal({{ $guest->id }})">
                                    <span class="mdi mdi-delete-forever text-danger"></span>
                                </a>
                            </div>

                        </div>
                        <div id="panelsStayOpen-collapseOne{{ $guest->id }}" class="accordion-collapse collapse"
                            aria-labelledby="panelsStayOpen-headingOne">
                            <div class="accordion-body p-2 align-items-center py-1 justify-content-between ">
                                <div class="d-flex p-2 align-items-center py-1 justify-content-between">
                                    <div style="color:#4E4E4E;"><b>Email:</b></div>
                                    <div>{{ $guest->email }}</div>
                                </div>
                                <div class="d-flex p-2 align-items-center py-1 justify-content-between">
                                    <div style="color:#4E4E4E;"><b>Phone Number:</b></div>
                                    <div>{{ $guest->phone_number }}</div>
                                </div>
                                <div class="d-flex p-2 align-items-center py-1 justify-content-between">
                                    <div style="color:#4E4E4E;"><b>Occupation:</b></div>
                                    <div>{{ $guest->occupation }}</div>
                                </div>
                                <div class="d-flex p-2 align-items-center py-1 justify-content-between">
                                    <div style="color:#4E4E4E;"><b>Details:</b></div>
                                    <div>{{ $guest->details }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

@endsection
@section('css-js')
    <style>
        .call-buttons{
            display: flex;
            }
        .call-detail {
            display: flex;
        }

        .user-links {
            display: flex;
        }

        .user-meeting-link {
            display: block;
            overflow-wrap: break-word;
            word-wrap: break-word;
            max-width: 100%; /* Ensures the container doesn't overflow */
        }

        .user-history {
            display: flex;
        }


        .guest-btn{
            margin-left: 0.5rem;
            padding-right: 1.5rem;
            padding-left: 1.5rem;
        }

        @media only screen and (max-width: 320px){
            .user-links {
                display: block;
            }

            .user-meeting-link {
                display: block;
            }

            .user-history {
                display: block;
            }

            .call-detail {
                display: block;
                text-align: center;
            }
            .call-buttons{
                display: block;
            }
            .guest-btn{
                margin-bottom: 10px;
            }
            .doc-btn{
                margin-bottom: 10px;
            }
        }

        @media only screen and (min-width: 321px)and (max-width: 425px) {
            .user-links {
                display: block;
            }

            .user-meeting-link {
                display: block;
            }

            .user-history {
                display: block;
            }

            .call-detail {
                display: block;
                text-align: center;
            }
            .call-buttons{
                display: block;
            }
            .doc-btn{
                margin-bottom: 10px;
            }
            .btn-danger {
                margin-top: 10px;
            }
        }

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

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

        .folder_color {
            color: #019FF3;
        }

        .check_box_mark {
            color: #019FF3;
        }

        .document {
            border-radius: 10px;
            border: 1px solid #B6BBC4;
            padding: 5px 10px 5px 5px;
        }

        .input-group-text.btn:hover {
            background-color: #337ab7;
            color: #fff;
            border-color: #2e6da4;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .scroll-histories {
            max-height: 450px;
            overflow-y: auto;
            scrollbar-color: #73CEFE #f5f2f2;
            scrollbar-width: thin;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
    <script>

        $(document).ready(function() {
            $('.invite_link').hide();
            $('#meeting_notes').summernote({
            placeholder: 'Type your content here...',
            tabsize: 2,
            height: 200
            });
        });
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize Clipboard.js
            var clipboard = new ClipboardJS('#copyButton');

            // Define success and error callbacks
            clipboard.on('success', function(e) {
                $("#copyButton").html("Copied");
                $("#copyButton").addClass("btn-primary");
                // You can provide user feedback here, e.g., show a tooltip
            });

            clipboard.on('error', function(e) {
                console.error('Error copying text to clipboard:', e.action);
                // You can provide user feedback here, e.g., show an error message
            });
        });

        function delete_document_modal(_this) {
            var id = $(_this).attr('data-id');
            $('#delete_meeting_document_id_modal').val(id);
            $('#delete_meeting_document_modal').modal('show');
        }
        function delete_meeting_document_note__modal(_this) {
            var id = $(_this).attr('data-id');
            $('#delete_meeting_document_note_id_modal').val(id);
            $('#delete_meeting_document_note_modal').modal('show');
        }
        function delete_modal(_this) {
            var id = $(_this).attr('data-id');
            $('#delete_modal_meeting_id').attr('data-id', id);
            $('#delete_meeting_modal').modal('show');
        }

        function updateFileName(input) {
            var fileName = input.files[0].name;
            var maxLength = 40;
            var label1 = input.closest('.document').querySelector('#meeting_document_label');
            if (fileName.length > maxLength) {
                fileName = fileName.substring(0, maxLength) + '...';
            }
            label1.textContent = fileName;
        }

        $(document).ready(function() {
            $('input[type=radio][name=select_meeting_date]').change(function() {
                if (this.value == '0') {
                    $('#display_meeting_date').css("display", "none");
                    $('#all_meeting_date_label').css('color', '#019FF3');
                    $('#select_meeting_date_label').css('color', '#544f5a');
                } else if (this.value == '1') {
                    $('#display_meeting_date').css("display", "block");
                    $('#all_meeting_date_label').css('color', '#544f5a');
                    $('#select_meeting_date_label').css('color', '#019FF3');
                }
            });

            $('input[type=radio][name=select_meeting_date_guest]').change(function() {
                if (this.value == '0') {
                    $('#display_meeting_date_guest').css("display", "none");
                    $('#all_meeting_date_guest_label').css('color', '#019FF3');
                    $('#select_meeting_date_guest_label').css('color', '#544f5a');
                } else if (this.value == '1') {
                    $('#display_meeting_date_guest').css("display", "block");
                    $('#all_meeting_date_guest_label').css('color', '#544f5a');
                    $('#select_meeting_date_guest_label').css('color', '#019FF3');
                }
            });

            $('input[type=date][name=guest_user_meeting_date]').change(function() {
                $('.invite_link').show();
                $('.meeting_note').hide();
                
                var meeting_date = btoa(this.value);
                var link = $('#guest_meeting_url').val();
                var new_link = link+"/"+meeting_date;
                $('#copyText').html(new_link);
                $('#copyButton').removeClass('d-none');
            });
            $('.download_meeting_document').on('click', function() {
                var documentTitle = $(this).data('document-title');
                var documentUrl = $(this).data('document-url');
                var downloadLink = document.createElement('a');
                downloadLink.href = documentUrl;
                downloadLink.download = documentTitle;
                downloadLink.click();
                var newTab = window.open(documentUrl, '_blank');

                if (!newTab) {
                    console.log('Popup blocked. Please allow popups and try again.');
                }
            });
        })

        $('#display_meeting_date').hide();
        $('#display_meeting_date_guest').hide();

        $('#add_meeting_document_form').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                url: "/meeting/document/store",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    // toastr.success(response.message);
                    var meeting_id = response.data.id;
                    window.location.href = "{{ url('/') }}/meetings/" + meeting_id;
                },
                error: function(response) {
                    if (response.status == 422) {
                        var error = response.responseJSON.message;
                        toastr.error(error);
                    } else if (response.status == 500) {
                        toastr.error("Something went wrong");
                    } else {
                        toastr.error(response.responseJSON.message);
                    }
                }
            });

        });

        $('#add_meeting_notes_form').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                url: "/meeting/notes/store",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    // toastr.success(response.message);
                    var meeting_id = response.data.id;
                    window.location.href = "{{ url('/') }}/meetings/" + meeting_id;
                },
                error: function(response) {
                    if (response.status == 422) {
                        var error = response.responseJSON.message;
                        toastr.error(error);
                    } else if (response.status == 500) {
                        toastr.error("Something went wrong");
                    } else {
                        toastr.error(response.responseJSON.message);
                    }
                }
            });

        });

        $('#add_guest_user_form').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                url: "/meeting/guest/add",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    // toastr.success(response.message);
                    var meeting_id = response.data.meeting_id;
                    window.location.href = "{{ url('/') }}/meetings/" + meeting_id;
                },
                error: function(response) {
                    if (response.status == 422) {
                        var error = response.responseJSON.message;
                        toastr.error(error);
                    } else if (response.status == 500) {
                        toastr.error("Something went wrong");
                    } else {
                        toastr.error(response.responseJSON.message);
                    }
                }
            });

        });

        function edit_guest_user_modal(id) {
            $('#edit_guest_user_' + id).modal('show');
        }

        $('.edit_guest_user_form_class').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);

            for (var pair of formData.entries()) {
                console.log(pair[0] + ': ' + pair[1]);
            }


            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                url: "/meeting/guest/update",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    // toastr.success(response.message);
                    var meeting_id = response.data.meeting_id;
                    window.location.href = "{{ url('/') }}/meetings/" + meeting_id;
                },
                error: function(response) {
                    if (response.status == 422) {
                        var error = response.responseJSON.message;
                        toastr.error(error);
                    } else if (response.status == 500) {
                        toastr.error("Something went wrong");
                    } else {
                        toastr.error(response.responseJSON.message);
                    }
                }
            });

        });

        function delete_guest_user_modal(id) {
            $('#delete_guest_user_id_modal').val(id);
            $('#delete_guest_user_modal').modal('show');
        }
    </script>
@endsection