@extends('layouts.admin')

@section('content')
    <!--App-Content-->
    <div class="app-content my-3 my-md-5">
        <div class="side-app">
            <x-page.header>Edit Meetings</x-page.header>
            @include('admin.errors.form-errors')
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Settings</h3>
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ route('groupSchedule.meeting.generate') }}"
                                id="{{ $gsid }}">
                                @csrf
                                <input type="hidden" value="{{ $gsid }}" name="gsid">
                                <div class="form-group ">
                                    <div class="form-group ">
                                        <label class="form-control-label" for="gdate">Start Date</label>
                                        <input type="date" name="gs_startdate" id="gs_startdate" placeholder="Date"
                                            class="form-control" required="">
                                    </div>
                                    <div class="form-group ">
                                        <label class="form-control-label" for="gdate">End Date</label>
                                        <input type="date" name="gs_enddate" id="gs_enddate" placeholder="Date"
                                            class="form-control" required="">
                                    </div>
                                    <div class="form-group d-none" id="account_container">
                                        <label class="form-control-label" for="account">Account</label>
                                        <select name="account" id="account" class="form-control select2"></select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    {{-- <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="mtype" id="MEETING"
                                            value="MEETING" checked>
                                        <label class="form-check-label" for="MEETING">Meeting</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="mtype" id="WEBINAR"
                                            value="WEBINAR">
                                        <label class="form-check-label" for="WEBINAR">Webinar</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="mtype" id="WEBINAR_1000"
                                            value="WEBINAR_1000">
                                        <label class="form-check-label" for="WEBINAR_1000">Webinar 1000</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="mtype" id="VCONNECT"
                                            value="VCONNECT" disabled>
                                        <label class="form-check-label" for="VCONNECT">VCONNECT</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="mtype" id="Manual_MEETING"
                                            value="Manual_MEETING" data-type="meeting">
                                        <label class="form-check-label" for="Manual_MEETING">Manual meeting</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="mtype" id="Manual_WEBINAR"
                                            value="Manual_WEBINAR" data-type="webinar">
                                        <label class="form-check-label" for="Manual_WEBINAR">Manual webinar</label>
                                    </div> --}}
                                    <div class="form-check form-check-inline" style="display: none">
                                        <input class="form-check-input" type="radio" name="mtype" id="IS_EXTERNAL"
                                            value="IS_EXTERNAL" data-type="external" checked>
                                        <label class="form-check-label" for="IS_EXTERNAL">Class</label>
                                    </div>
                                </div>
                                <div class="form-group mb-0 row justify-content-end">
                                    <div class="col-md-3">
                                        <button type="submit"
                                            class="btn btn-primary waves-effect waves-light">Generate</button>
                                    </div>
                                </div>

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

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class=" table table-striped table-bordered table-vcenter text-nowrap"
                                    id="meeting-table">
                                    <thead>
                                        <tr>
                                            {{-- <th>Number</th> --}}
                                            <th>Topic</th>
                                            {{-- <th>Zoom host</th> --}}
                                            {{-- <th>Status</th> --}}
                                            <th>Date/Time</th>
                                            <th>Cancel Meeting</th>
                                            {{-- <th>edit meeting</th> --}}
                                            {{-- <th>add discount</th> --}}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($meetings as $meeting)
                                            <tr class="text-center">
                                                {{-- <td>{{ $meeting->mnumber }}</td> --}}
                                                <td>{{ $meeting->mtopic }}</td>
                                                {{-- <td>{{ $meeting->zoom_account }}</td> --}}
                                                {{-- <td>{{ $meeting->mstatus }}</td> --}}
                                                <td>{{ $meeting->mstartdate . '/' . $meeting->mstarttime }}</td>

                                                <td style="text-align: center;">
                                                    @if ($meeting->mstatus == 'Canceled')
                                                        <a href="javascript:void(0)"
                                                            onClick="confirmCancel(event,{{ $meeting->mid }})"
                                                            class="disabled btn btn-outline-light btn-sm waves-effect waves-light"
                                                            data-bs-toggle="tooltip" data-bs-original-title="Cancel/Refund">
                                                            <i class="fa fa-window-close fs-16"></i>
                                                            <form method="POST"
                                                                action="{{ route('meetings-cancel', $meeting->mid) }}"
                                                                id="cancel-form-{{ $meeting->mid }}">
                                                                @csrf
                                                                <input name="_method" type="hidden" value="POST">

                                                            </form>
                                                        </a>
                                                        <p class="text-text-danger">Meeting Canceled</p>
                                                    @else
                                                        <a href="javascript:void(0)"
                                                            onClick="confirmCancel(event,{{ $meeting->mid }})"
                                                            class="btn btn-outline-light btn-sm waves-effect waves-light"
                                                            data-bs-toggle="tooltip" data-bs-original-title="Cancel/Refund">
                                                            <i class="fa fa-window-close fs-16"></i>
                                                            <form method="POST"
                                                                action="{{ route('meetings-cancel', $meeting->mid) }}"
                                                                id="cancel-form-{{ $meeting->mid }}">
                                                                @csrf
                                                                <input name="_method" type="hidden" value="POST">

                                                            </form>
                                                        </a>
                                                    @endif

                                                </td>
                                                {{-- <td style="text-align: center;">
                            <div data-bs-toggle="tooltip"  data-bs-original-title="Edit">
                                <button type="button"
                                    value="{{$meeting->mid}}"
                                    class="modal-effect btn btn-outline-light btn-sm waves-effect waves-light edit"
                                    data-bs-effect="effect-sign" data-bs-toggle="modal" data-bs-original-title="Edit" data-bs-target="#edit"><i
                                        class="fa fa-edit fs-16"></i>
                                </button>
                            </div>
                        </td> --}}
                                                {{-- <td>
                                                    @if ($meeting->mstatus == 'Not Started')
                                                        @if (in_array($meeting->mid, $user_has_lesson_discount->pluck('mid')->toArray()))
                                                            Discount
                                                            {{ $user_has_lesson_discount->firstWhere('mid', $meeting->mid)->discount_value }}
                                                            %
                                                            <button type="button" data-mid="{{ $meeting->mid }}"
                                                                data-coffid="{{ $meeting->coffid }}"
                                                                data-gid="{{ $meeting->gid }}"
                                                                data-gsid="{{ $meeting->gsid }}"
                                                                class="modal-effect btn btn-outline-light btn-sm waves-effect waves-light edit-lesson-discount"
                                                                data-bs-effect="effect-sign" data-bs-toggle="modal"
                                                                data-bs-original-title="Edit discount"
                                                                data-bs-target="#edit-lesson-discount">
                                                                <i class="fa fa-edit fs-16"></i>
                                                            </button>
                                                            <a href="javascript:void(0)"
                                                                onClick="confirmDelete(event,{{ $user_has_lesson_discount->firstWhere('mid', $meeting->mid)->sdid }})"
                                                                class="btn btn-outline-light btn-sm waves-effect waves-light"
                                                                data-bs-toggle="tooltip" data-bs-original-title="Delete"
                                                                title='Delete'>
                                                                <i class="fa fa-trash fs-16"></i>
                                                                <form method="POST"
                                                                    action="{{ route('admin.groupschedule.removeMeetingDiscount') }}"
                                                                    id="delete-form-{{ $user_has_lesson_discount->firstWhere('mid', $meeting->mid)->sdid }}">
                                                                    @csrf
                                                                    <input name="_method" type="hidden" value="DELETE">
                                                                    <input name="mid" type="hidden"
                                                                        value="{{ $meeting->mid }}">
                                                                </form>
                                                            </a>
                                                        @else
                                                            <button type="button" data-mid="{{ $meeting->mid }}"
                                                                data-coffid="{{ $meeting->coffid }}"
                                                                data-gid="{{ $meeting->gid }}"
                                                                data-gsid="{{ $meeting->gsid }}"
                                                                class="add-lesson-discount modal-effect btn btn-outline-light btn-sm waves-effect waves-light add-lesson-discount"
                                                                data-bs-effect="effect-sign" data-bs-toggle="modal"
                                                                data-bs-original-title="Add discount"
                                                                data-bs-target="#add-lesson-discount">
                                                                <i class="fa fa-plus fs-16"></i>
                                                            </button>
                                                        @endif
                                                    @else
                                                        Meeting {{ $meeting->mstatus }}
                                                    @endif
                                                </td> --}}
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Edit form modal -->
        <div class="modal  fade effect-sign show" id="edit" tabdocumentation="-1" role="dialog"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="example-Modal3">Edit</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="POST" action="" id="meeting_form_update" enctype="multipart/form-data">
                            @csrf

                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="meeting_topic">Meeting topic <span
                                                class="text-danger">(required)</span></label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" id="meeting_topic" class="form-control" required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="meeting_desc">Meeting desc <span
                                                class="text-danger">(required)</span></label>
                                    </div>
                                    <div class="col-md-9">
                                        <textarea id="meeting_desc" class="form-control" required></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="meeting_start_date">Meeting duration <span
                                                class="text-danger">(required)</span></label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="number" min="15" id="meeting_duration" class="form-control"
                                            required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="meeting_start_date">Start date <span
                                                class="text-danger">(required)</span></label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="data" id="meeting_start_date" class="form-control" required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="meeting_start_time">Start time <span
                                                class="text-danger">(required)</span></label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="time" id="meeting_start_time" class="form-control" required>
                                    </div>
                                </div>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" id="submit" class="btn btn-primary" value="">Submit</button>
                        <input type="hidden" id="board_id" name="bid" value="0">
                    </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Add lesson discount Form --}}
        <div class="modal  fade effect-sign show" id="add-lesson-discount" tabdocumentation="-1" role="dialog"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="example-Modal3">Add lesson discount</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="POST" action="{{ route('admin.groupschedule.addMeetingDiscount') }}"
                            enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="mid" value="" id="discount-lesson-mid">
                            <input type="hidden" name="coffid" value="" id="discount-lesson-coffid">
                            <input type="hidden" name="gid" value="" id="discount-lesson-gid">
                            <input type="hidden" name="gsid" value="" id="discount-lesson-gsid">
                            <input type="hidden" name="added_by" value="{{ auth()->id() }}">

                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="board_name_update">Discount Value <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="number" min="0" name="discount_value" class="form-control"
                                            id="discount" placeholder="" required>
                                    </div>
                                </div>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" id="submit" class="btn btn-primary" value="">Add</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Edit lesson discount Form --}}
        <div class="modal  fade effect-sign show" id="edit-lesson-discount" tabdocumentation="-1" role="dialog"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="example-Modal3">Edit lesson discount</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="POST" action="{{ route('admin.groupschedule.editMeetingDiscount') }}"
                            enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="mid" value="" id="edit-discount-lesson-mid">
                            <input type="hidden" name="coffid" value="" id="edit-discount-lesson-coffid">
                            <input type="hidden" name="gid" value="" id="edit-discount-lesson-gid">
                            <input type="hidden" name="gsid" value="" id="edit-discount-lesson-gsid">
                            <input type="hidden" name="added_by" value="{{ auth()->id() }}">
                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2" for="board_name_update">Discount Value <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="number" min="0" name="discount_value" class="form-control"
                                            id="discount" placeholder="" required>
                                    </div>
                                </div>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" id="submit" class="btn btn-primary" value="">Update</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    @endsection

    @section('admin-js')
        <script>
            // $(document).ready(function(){

            //     Get Record data using it's id
            //     jQuery('body').on('click', '.edit', function () {
            //         var meeting_id = $(this).val();
            //         $.get('edit/getMeeting/' + meeting_id, function (data) {
            //            // jQuery('#meeting_title').val(data.mtitle)
            //             jQuery('#meeting_topic').val(data.mtopic)
            //             jQuery('#meeting_desc').val(data.mdesc)
            //             jQuery('#meeting_start_date').val(data.mstartdate)
            //             jQuery('#meeting_start_time').val(data.mstarttime)
            //             jQuery('#meeting_duration').val(data.mduration)
            //             jQuery('#meeting_form_update').attr('action','{{ URL::to('/staff/meetings') }}' + '/' + meeting_id)
            //         })
            //     });

            // })

            // Cancel Meeting
            function confirmCancel(e, id) { //on add input button click
                e.preventDefault();
                Swal.fire({
                    title: "Are you sure?",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Yes, Cancel the meeting!"
                }).then(function(result) {
                    if (result.value) {
                        document.getElementById(`cancel-form-${id}`).submit();
                    }
                });
            }

            $('#meeting-table').dataTable({
                "drawCallback": function(settings) {

                    // add mid, gid, gsid, coffid to the hidden input in the add lesson discount modal form
                    $('.add-lesson-discount').click(function() {
                        console.log('dsada')
                        $('#discount-lesson-mid').val($(this).attr('data-mid'))
                        $('#discount-lesson-gid').val($(this).attr('data-gid'))
                        $('#discount-lesson-gsid').val($(this).attr('data-gsid'))
                        $('#discount-lesson-coffid').val($(this).attr('data-coffid'))
                    })

                    // update lesson discount modal form
                    $('.edit-lesson-discount').on('click', function() {
                        $('#edit-discount-lesson-mid').val($(this).attr('data-mid'))
                        $('#edit-discount-lesson-gid').val($(this).attr('data-gid'))
                        $('#edit-discount-lesson-gsid').val($(this).attr('data-gsid'))
                        $('#edit-discount-lesson-coffid').val($(this).attr('data-coffid'))
                    })
                },
                "bPaginate": true,
                "searching": true,
                "ordering": true,
                "info": true,
            })
        </script>

        <script>
             $('.form-check-input').on('change', function() {
                if($(this).val() == 'Manual_MEETING' || $(this).val() == 'Manual_WEBINAR'){
                    var $account = $('#account');
                    $('#account_container').removeClass('d-none')
                    $('#account').empty();
                    $('#account').append(`<option value="0" disabled selected>Processing...</option>`);
                    $.ajax({
                        url: "{{ route('getActiveZoomMeetings') }}",
                        data: {
                            type: $(this).attr('data-type')
                        },
                        success: function(data) {
                            $('#account').empty();
                            $('#account').append(`<option value="0" disabled selected>Select account*</option>`);
                            $.each(data, function(id, value) {
                                $account.append(`<option value=${value.email}> ${value.email} ${value.is_webinar ? '(webinar)':''}</option>`);
                            });
                        }
                    });
                }else{
                    $('#account_container').addClass('d-none')
                }
            });
        </script>
    @endsection