@extends('includes/layout')
@section('main-page-content')
@php
    $organisers = $meeting->meeting_organisers;
    $employees = $meeting->meeting_users;
@endphp
    <div class="container-xxl flex-grow-1 container-p-y">
        <!-- Button with Badges -->
        <form id="edit_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">Edit Meeting</div>
                </div>
                <div class="row px-5 py-4">
                    <div class="col-6 mb-3 ">
                        <label>Meeting Title</label>
                        <input type="text" class="form-control" name="agenda" value="{{ $meeting->agenda }}">
                    </div>

                    <div class="col-6 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="">{{$user->first_name}}  {{$user->last_name}} </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" @if($meeting->is_recurring == config('constants.meeting_recurring.one_time.key')) checked @endif>
                            <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" @if($meeting->is_recurring == config('constants.meeting_recurring.recurring.key')) checked @endif>
                            <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" @if($meeting->is_recurring == config('constants.meeting_recurring.one_time.key')) style="display: none" @endif>
                        <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') }}"
                                        @if($meeting->frequency == config('constants.meeting_frequency.daily.key')) checked @endif>
                                    <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') }}"
                                        @if($meeting->frequency == config('constants.meeting_frequency.weekly.key')) checked @endif>
                                    <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') }}"
                                        @if($meeting->frequency == config('constants.meeting_frequency.monthly.key')) checked @endif>
                                    <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') }}"
                                        @if($meeting->frequency == config('constants.meeting_frequency.custom.key')) checked @endif>
                                    <label class="form-check-label " for="custom_meeting">
                                        Custom
                                    </label>
                                </div> --}}
                            </div>
                        </div>
                        @php
                            $weekdays = explode(",",$meeting->days);
                        @endphp
                        <div id="display_weekdays" @if($meeting->frequency != config('constants.meeting_frequency.weekly.key')) style="display: none;" @else style="display: block;" @endif>
                            <label class="form-label">Working days</label>
                            <div class="col-12 mb-3">
                                <button type="button" @if(in_array(config('constants.weekdays.monday'), $weekdays)) class="btn btn-outline-primary" @else class="btn btn-outline-secondary" @endif
                                    id="monday" onclick="daysFunction(this)" data-id="{{ config('constants.weekdays.monday') }}">
                                    Monday
                                </button>
                                <button type="button"  @if(in_array(config('constants.weekdays.tuesday'), $weekdays)) class="btn btn-outline-primary" @else class="btn btn-outline-secondary" @endif
                                    id="tuesday" onclick="daysFunction(this)" data-id="{{ config('constants.weekdays.tuesday') }}">
                                    Tuesday
                                </button>
                                <button type="button"  @if(in_array(config('constants.weekdays.wednesday'), $weekdays)) class="btn btn-outline-primary" @else class="btn btn-outline-secondary" @endif
                                    id="wednesday" onclick="daysFunction(this)" data-id="{{ config('constants.weekdays.wednesday') }}">
                                    Wednesday
                                </button>
                                <button type="button"  @if(in_array(config('constants.weekdays.thursday'), $weekdays)) class="btn btn-outline-primary" @else class="btn btn-outline-secondary" @endif
                                    id="thursday" onclick="daysFunction(this)" data-id="{{ config('constants.weekdays.thursday') }}">
                                    Thursday
                                </button>
                                <button type="button"  @if(in_array(config('constants.weekdays.friday'), $weekdays)) class="btn btn-outline-primary" @else class="btn btn-outline-secondary" @endif
                                    id="friday" onclick="daysFunction(this)" data-id="{{ config('constants.weekdays.friday') }}">
                                    Friday
                                </button>
                                <button type="button"  @if(in_array(config('constants.weekdays.saturday'), $weekdays)) class="btn btn-outline-primary" @else class="btn btn-outline-secondary" @endif
                                    id="saturday" onclick="daysFunction(this)" data-id="{{ config('constants.weekdays.saturday') }}">
                                    Saturday
                                </button>
                                <button type="button"  @if(in_array(config('constants.weekdays.sunday'), $weekdays)) class="btn btn-outline-primary" @else class="btn btn-outline-secondary" @endif
                                    id="sunday" onclick="daysFunction(this)" data-id="{{ config('constants.weekdays.sunday') }}">
                                    Sunday
                                </button>
                            </div>
                        </div>
                    </div>


                    <div class="col-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" value="{{$meeting->start_date}}">
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="mb-3">
                            <label for="update_meeting_end_date" class="form-label">End Date</label>
                            <input type="date" class="form-control" id="update_meeting_end_date" name="end_date" value="{{$meeting->end_date}}" @if($meeting->is_recurring == 0) disabled @endif>
                        </div>
                    </div>
                    <div class="col-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" value="{{$meeting->start_time}}">
                        </div>
                    </div>
                    <div class="col-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" value="{{$meeting->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">{{$meeting->description}}</textarea>
                        </div>
                    </div>
                    <div class="col-6">
                        <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') }}"
                                    @if($meeting->allow_meeting_members == config('constants.allow_meeting_members.everyone.key')) selected @endif>
                                {{ config('constants.allow_meeting_members.everyone.value') }}</option>
                            <option value="{{ config('constants.allow_meeting_members.specific.key') }}"
                                    @if($meeting->allow_meeting_members == config('constants.allow_meeting_members.specific.key')) selected @endif>
                                {{ 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-6">
                        <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="" @if($site->id == $meeting->site_id) selected @endif></option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6">
                        <div class="d-flex 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" @if($meeting->allow_guest) checked @endif>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="d-flex 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" @if($meeting->is_before_meeting) checked @endif>
                                </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>
        .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;
        }
    </style>

    <script>
        $(document).ready(function() {

            var multiple_user_s2 = $('.multiple_users').select2({
                placeholder: "Select employees",
                allowClear: true
            });
            var multiple_organiser_s2 = $('.multiple_organiser').select2({
                placeholder: "Select Organisers",
                allowClear: true
            });

            var organiserId = '';
            var i =0;

            var organisers = @php echo json_encode($organisers); @endphp;
            arr = [];

            organisers.forEach(function(data) {
                organiserId = data.organiser_id;
                if (multiple_organiser_s2.find('option[value="' + organiserId + '"]').length) {
                    arr[i] =  organiserId;
                    i++;
                }
            });

            multiple_organiser_s2.val(arr).trigger('change');

            var userId = '';
            var j = 0;
            user_array = [];
            var users = @php echo json_encode($employees); @endphp;

            users.forEach(function(data) {
                userId = data.employee_id;
                if (multiple_user_s2.find('option[value="' + userId + '"]').length) {
                    user_array[i] =  userId;
                    i++;
                }
            });

            multiple_user_s2.val(user_array).trigger('change');
            @if($meeting->allow_meeting_members == config('constants.allow_meeting_members.everyone.key'))
                $('.meeting_members_list').hide();
            @endif

            $('input[type=radio][name=is_recurring]').change(function() {
                if (this.value == '0') {
                    $('#display_recurring').css("display", "none");
                    $('#update_meeting_end_date').prop("disabled",true);
                } else if (this.value == '1') {
                    $('#display_recurring').css("display", "block");
                    $('#update_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('');
        }

        $('#edit_meeting').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            const days = checkSelectedWeekdays();
            formData.append('days', days);
            console.log(formData);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                url: "/meetings/update/{{$meeting->id}}",
                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() {
            $('#edit_meeting').trigger("reset");
        }
    </script>



<style>

    .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>
@endsection