@extends('includes/layout')
@section('main-page-content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <!-- Button with Badges -->
        <form id="add_new_meeting" onsubmit="return false;">
            @csrf
            <div class="card mb-4 ">
                <div class="border-bottom p-3 px-5">
                    <div class="h4 pb-0 mb-0 m-header">Create A New Meeting</div>
                </div>
                <div class="row px-5 py-4">
                    <div class="col-lg-6 col-sm-12 mb-3 ">
                        <label>Meeting Title</label>
                        <input type="text" class="form-control" name="agenda">
                    </div>
                    <div class="col-lg-6 col-sm-12 mb-3 ">
                        <label>Organiser</label>
                        <select class="form-select mb-3 multiple_organiser" multiple name="organiser_ids[]"
                            id="organiser_id">
                            @foreach ($users as $user)
                                <option value="">                                     </option>
                            @endforeach
                        </select>
                        <!-- <input type="text" class="form-control" name="organiser"> -->
                    </div>
                </div>
                <div class="bg-primary h-px-40 p-0 mb-3">
                    <div class="d-flex pt-2">
                        <div class="form-check">
                            <input class="form-check-input form-check-input-css" type="radio" name="is_recurring"
                                id="one_time_meeting" style="border: none" value="0" checked>
                            <label class="form-check-label form-check-label-css text-white" for="one_time_meeting">
                                One Time
                            </label>
                        </div>
                        <div class="form-check ms-2">
                            <input class="form-check-input form-check-input-css" type="radio" name="is_recurring"
                                id="recurring_meeting" style="border: none" value="1">
                            <label class="form-check-label form-check-label-css text-white" for="recurring_meeting">
                                Recurring
                            </label>
                        </div>
                    </div>
                </div>
                <div class="row px-5">
                    <div id="display_recurring" style="display: none">
                        <div class="col-6 mb-3">
                            <div class="d-flex justify-content-between">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="frequency" id="daily_meeting"
                                        value="{{ config('constants.meeting_frequency.daily.key') }}">
                                    <label class="form-check-label " for="daily_meeting">
                                        Daily
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="frequency" id="weekly_meeting"
                                        value="{{ config('constants.meeting_frequency.weekly.key') }}">
                                    <label class="form-check-label " for="weekly_meeting">
                                        Weekly
                                    </label>
                                </div>
                                {{-- <div class="form-check">
                                    <input class="form-check-input" type="radio" name="frequency" id="monthly_meeting"
                                        value="{{config('constants.meeting_frequency.monthly.key')}}">
                                    <label class="form-check-label " for="monthly_meeting">
                                        Monthly
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="frequency" id="custom_meeting"
                                        value="{{config('constants.meeting_frequency.custom.key')}}">
                                    <label class="form-check-label " for="custom_meeting">
                                        Custom
                                    </label>
                                </div> --}}
                            </div>
                        </div>
                        <div id="display_weekdays" style="display: none;">
                            <label class="form-label">Working days</label>
                            <div class="col-12 mb-3">
                                <button type="button" class="work-day-btn btn btn-outline-secondary mb-2 mt-2" id="monday"
                                    onclick="daysFunction(this)"
                                    data-id="{{ config('constants.weekdays.monday') }}">Monday</button>
                                <button type="button" class="work-day-btn btn btn-outline-secondary mb-2 mt-2" id="tuesday"
                                    onclick="daysFunction(this)"
                                    data-id="{{ config('constants.weekdays.tuesday') }}">Tuesday</button>
                                <button type="button" class="work-day-btn btn btn-outline-secondary mb-2 mt-2" id="wednesday"
                                    onclick="daysFunction(this)"
                                    data-id="{{ config('constants.weekdays.wednesday') }}">Wednesday</button>
                                <button type="button" class="work-day-btn btn btn-outline-secondary mb-2 mt-2" id="thursday"
                                    onclick="daysFunction(this)"
                                    data-id="{{ config('constants.weekdays.thursday') }}">Thursday</button>
                                <button type="button" class="work-day-btn btn btn-outline-secondary mb-2 mt-2" id="friday"
                                    onclick="daysFunction(this)"
                                    data-id="{{ config('constants.weekdays.friday') }}">Friday</button>
                                <button type="button" class="work-day-btn btn btn-outline-secondary mb-2 mt-2" id="saturday"
                                    onclick="daysFunction(this)"
                                    data-id="{{ config('constants.weekdays.saturday') }}">Saturday</button>
                                <button type="button" class="work-day-btn btn btn-outline-secondary mb-2 mt-2" id="sunday"
                                    onclick="daysFunction(this)"
                                    data-id="{{ config('constants.weekdays.sunday') }}">Sunday</button>
                            </div>
                        </div>
                    </div>


                    <div class="col-lg-3 col-sm-3">
                        <div class="mb-3">
                            <label for="m_start_date" class="form-label">Start Date</label>
                            <input type="date" class="form-control" id="m_start_date" name="start_date"
                                min="{{ date('Y-m-d') }}">
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-3">
                        <div class="mb-3">
                            <label for="create_meeting_end_date" class="form-label">End Date</label>
                            <input type="date" class="form-control" id="create_meeting_end_date" name="end_date"
                                disabled>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-3">
                        <div class="mb-3">
                            <label for="m_start_time" class="form-label">Start Time</label>
                            <input type="time" class="form-control" id="m_start_time" name="start_time">
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-3">
                        <div class="mb-3">
                            <label for="m_end_time" class="form-label">End Time</label>
                            <input type="time" class="form-control" id="m_end_time" name="end_time">
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="mb-3">
                            <label for="meeting_description" class="form-label">Description</label>
                            <textarea class="form-control" id="meeting_description" rows="3" name="description"></textarea>
                        </div>
                    </div>
                    <div class="col-lg-6 col-12">
                        <label for="meeting_member" class="form-label">Meeting Members <span class="text-danger">*</span></label>
                        <select class="form-select mb-3 allow_meeting_members" aria-label="Default select example"
                            id="allow_meeting_members" name="allow_meeting_members">
                            <option value="{{ config('constants.allow_meeting_members.everyone.key') }}">
                                {{ config('constants.allow_meeting_members.everyone.value') }}</option>
                            <option value="{{ config('constants.allow_meeting_members.specific.key') }}">
                                {{ config('constants.allow_meeting_members.specific.value') }}</option>
                        </select>
                        <div class="meeting_members_list">
                            <select class="form-select mb-3 multiple_users" multiple aria-label="Default select example"
                                id="meeting_member" name="employee_ids[]">
                                @foreach ($users as $user)
                                    <option value="">                                         </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-6 col-12">
                        <label for="meeting_site" class="form-label">Select Site <span class="text-danger">*</span></label>
                        <select class="form-select mb-3" aria-label="Default select example" id="meeting_site"
                            name="site_id">
                            <option disabled selected>--select--</option>
                            @foreach ($sites as $site)
                                <option value=""></option>
                            @endforeach
                        </select>
                    </div>

                    {{-- <div class="meeting_members_list">
                        <div class="col-6">
                            <div class="form-group has-search">
                                <span class="mdi mdi-magnify form-control-feedback"></span>
                                <input type="text" class="form-control search-field border-0 py-2" placeholder="Search" id="search_employees">
                                <button class="search-close-btn border-0" type="button" onclick="clearSearchFilter()">
                                    <span class="mdi mdi-close-circle-outline"></span>
                                </button>
                            </div>
                        </div>
                        <div class="col-6" id="employee_search_results"></div>
                    </div> --}}

                    {{-- <div class="col-6">
                        <div class="form-group mb-3">
                            <label for="client_white_card" class="form-label text-dark">Meeting Document</label>
                            <div class="document d-flex justify-content-between input-group">
                                <span style="font-size:14px" class="ms-2 mt-1"id="file-label1">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="" alt="Thumnail Preview" width="15px" height="15px" />
                                </label>
                                <input type="file" name="doc_1" class="doc_1 form-control visually-hidden" id="client_passport_upload"
                                    accept=".pdf, .doc, .docx, .jpg, .jpeg, .png, .gif, .mp4, .avi, .mov, .wmv" onchange="uploadDocument(this)">
                            </div>
                        </div>
                        <div class="d-flex mb-3 mt-2">
                            <h6 class="mt-2 p-1 mb-0">Is document necessary to read?</h6>
                            <div class="mt-2">
                                <div class="form-check form-check-inline ms-4">
                                    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1" name="guest_allowed">
                                </div>
                            </div>
                        </div>
                    </div> --}}
                    <div class="col-6">
                        <div class="check-box mb-3 mt-2">
                            <h6 class="mt-2 p-1 mb-0">Is guest user allowed?</h6>
                            <div class="mt-2">
                                <div class="form-check form-check-inline ms-4">
                                    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1"
                                        name="allow_guest">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="check-box mb-3 mt-2">
                            <h6 class="mt-2 p-1 mb-0">Before Clock in</h6>
                            <div class="mt-2">
                                <div class="form-check form-check-inline ms-4">
                                    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1"
                                        name="is_before_meeting">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="border-top p-3 d-flex justify-content-end">
                    <button class="btn btn-outline-light text-dark me-2" type="button"
                        onclick="clearForm()">CLEAR</button>
                    <button class="btn btn-primary waves-effect" type="submit">SAVE</button>
                </div>
            </div>
        </form>

    </div>
@endsection


@section('css-js')
    <style>

@media only screen and (min-width: 320px) and (max-width: 425px){
    .work-day-btn{
        width: 100%;
    }
}
        .check-box {
            display: flex;
        }

        @media only screen and (min-width: 320px) and (max-width: 568px) {
            .check-box {
            display: block;
        }
        }

        .select2-container .select2-search--inline .select2-search__field {
            height: 27px;
            padding: 6px;
        }

        .select2-container--default.select2-container--focus .select2-selection--multiple {
            border: 1px solid #dadada;
            border-radius: 2px !important;
        }

        .select2-container--default .select2-selection--multiple {
            border-radius: 2px;
            border: 1px solid #dadada;
        }

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

        .search-field {
            background-color: #F6F6F6;
        }

        .search-field:focus {
            background-color: #F6F6F6;
        }

        .has-search .form-control-feedback {
            position: absolute;
            z-index: 2;
            display: block;
            width: 2.375rem;
            /* height: 2.375rem; */
            line-height: 2.375rem;
            text-align: center;
            pointer-events: none;
        }

        .search-close-btn {
            position: relative;
            left: 600px;
            bottom: 32px;
            color: #15A7F5;
        }

        .m-header {
            font-size: 18px;
            font-weight: 600;
            line-height: 27px;
        }

        label {
            color: #666666;
            font-size: 10px;
            font-weight: 600;
            line-height: 15px;
        }

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

        .form-check-input-css[type="radio"] {
            display: none;
        }

        .form-check-label-css {
            cursor: pointer;
            padding-left: 25px;
        }

        .form-check-input-css[type="radio"]+.form-check-label-css:before {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-right: 5px;
            border: 2px solid #fff;
            border-radius: 50%;
            vertical-align: middle;
            transition: background-color 0.3s, border-color 0.3s;
            margin-bottom: 2px;
        }

        .form-check-input-css[type="radio"]:checked+.form-check-label:before {
            background-color: white;
            border-color: white;
        }
    </style>

    <script>
        $(document).ready(function() {
            // $('#checkbox1').change(function() {
            //     if(this.checked) {
            //         var returnVal = confirm("Are you sure?");
            //         $(this).prop("checked", returnVal);
            //     }
            //     $('#textbox1').val(this.checked);
            // });
            $('.multiple_users').select2({
                placeholder: "Select employees",
                allowClear: true
            });
            $('.multiple_organiser').select2({
                placeholder: "Select Organisers",
                allowClear: true
            });
            $('.meeting_members_list').hide();

            $('input[type=radio][name=is_recurring]').change(function() {
                if (this.value == '0') {
                    $('#display_recurring').css("display", "none");
                    $('#create_meeting_end_date').prop("disabled", true);
                } else if (this.value == '1') {
                    $('#display_recurring').css("display", "block");
                    $('#create_meeting_end_date').prop("disabled", false);
                }
            });

            $('input[type=radio][name=frequency]').change(function() {
                if (this.value == '2') {
                    $('#display_weekdays').css("display", "block");
                } else {
                    $('#display_weekdays').css("display", "none");
                }
            });

            $('input[type=select][name=allow_meeting_members]').change(function() {
                if (this.value == '0') {
                    $('.meeting_members_list').css("display", "none");
                } else if (this.value == '1') {
                    $('.meeting_members_list').css("display", "block");
                }
            });

            $("select.allow_meeting_members").change(function() {
                var data = $(this).children("option:selected").val();
                if (data == '0') {
                    $('.meeting_members_list').css("display", "none");
                } else if (data == '1') {
                    $('.meeting_members_list').css("display", "block");
                }
            });
        });

        function daysFunction(obj) {
            data = $(obj).attr('id');
            if ($(obj).hasClass('btn-outline-primary')) {
                $(obj).removeClass('btn-outline-primary');
                $(obj).addClass('btn-outline-secondary');
            } else {
                $(obj).removeClass('btn-outline-secondary');
                $(obj).addClass('btn-outline-primary');
            }
        }

        function clearSearchFilter() {
            $('#search_employees').val('');
            $('#employee_search_results').html('');
        }

        $('#search_employees').on("input", function(e) {
            s_data = this.value;
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "GET",
                url: "{{ url('/search/employees') }}",
                data: {
                    search: s_data
                },
                success: function(response) {
                    var html = "";
                    $.each(response.data, function(index, element) {
                        html += `<div class="d-flex justify-content-between mb-3">
                            <div class="d-flex text-black">
                                <div class="ms-2">` + element.first_name + ' ' + element.middle_name + ' ' + element
                            .last_name + `</div>
                            </div>
                            <div>
                                <a href="{{ url('user-profile/` +element.emp_id+ `') }}">
                                    View Profile
                                    <span class="mdi mdi-eye-outline cursor-pointer"></span>
                                </a>
                            </div>
                        </div>`;
                    });
                    $('#employee_search_results').html(`<div class="mb-3">SEARCH RESULT</div>` + html);
                },
            });
        });

        $('#add_new_meeting').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            const days = checkSelectedWeekdays();
            formData.append('days', days);

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                url: "{{ url('/meetings') }}",
                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);
                    }
                }
            });

        });

        function checkSelectedWeekdays() {
            const days = [];
            var i = 0;
            if ($('#monday').hasClass('btn-outline-primary')) {
                days[i] = $('#monday').attr('data-id');
                i++;
            }
            if ($('#tuesday').hasClass('btn-outline-primary')) {
                days[i] = $('#tuesday').attr('data-id');
                i++;
            }
            if ($('#wednesday').hasClass('btn-outline-primary')) {
                days[i] = $('#wednesday').attr('data-id');
                i++;
            }
            if ($('#thursday').hasClass('btn-outline-primary')) {
                days[i] = $('#thursday').attr('data-id');
                i++;
            }
            if ($('#friday').hasClass('btn-outline-primary')) {
                days[i] = $('#friday').attr('data-id');
                i++;
            }
            if ($('#saturday').hasClass('btn-outline-primary')) {
                days[i] = $('#saturday').attr('data-id');
                i++;
            }
            if ($('#sunday').hasClass('btn-outline-primary')) {
                days[i] = $('#sunday').attr('data-id');
                i++;
            }
            return days;
        }

        function clearForm() {
            $('#add_new_meeting').trigger("reset");
        }
    </script>
@endsection