@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Meetings</x-page.header>
        @include('admin.errors.form-errors')
        <div class="row">
            <div class="col-md-12">

                        <div class="col-xl-12 col-lg-12 col-md-12">
                            <div class="border-0 mb-5 course-details">
                        <div class="wideget-user-tab wideget-user-tab3">
                            <div class="tab-menu-heading">
                                <div class="tabs-menu1">
                                    <ul class="nav">
                                        <li class="ms-0"><a href="#tab-meetings"  class="active" data-bs-toggle="tab">Meetings</a>
                                        </li>
                                        <li><a href="#tab-extra" data-bs-toggle="tab"  >Extra Meetings</a></li>


                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="tab-content border-0 p-5 bg-white details-tab-content">
                            <div class="tab-pane active" id="tab-meetings">
                                <div class="table-responsive">
                                    <table class="data-table-example table table-striped table-bordered table-vcenter text-nowrap">
                                        <thead>
                                            <tr>
                                                <th>Group</th>
                                                <th>Number</th>
                                                <th>Topic</th>

                                                <th>Status</th>
                                                <th>Date/Time</th>
                                                <th>Attendance</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                    @foreach ($meetings as $meeting )
                                    <tr class="text-center">
                                        <td>{{$meeting->gname}}</td>
                                    <td>{{$meeting->mnumber}}</td>

                                    <td>{{$meeting->mtitle}}</td>

                                    <td>{{$meeting->mstatus}}</td>
                                    <td>{{$meeting->mstartdate .'/'. $meeting->mstarttime}}</td>

                                    <td style="text-align: center;">
                                      <a href="{{route('meeting.attendance',$meeting->mid)}}" class="btn btn-outline-light btn-sm waves-effect waves-light">View</a>


                                    </td>
                                    </tr>
                                    @endforeach
                                        </tbody>
                                    </table>
                                    </div>
                            </div>

                            <div class="tab-pane" id="tab-extra">
                                <table class="data-table-example table table-striped table-bordered table-vcenter text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Number</th>
                                            <th>Topic</th>
                                            <th>Status</th>
                                            <th>Date/Time</th>
                                            <th>Attendance</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                @foreach ($extraMeetings as $meeting )
                                <tr class="text-center">

                                <td>{{$meeting->mnumber}}</td>

                                <td>{{$meeting->mtitle}}</td>

                                <td>{{$meeting->mstatus}}</td>
                                <td>{{$meeting->mstartdate .'/'. $meeting->mstarttime}}</td>

                                <td style="text-align: center;">
                                  <a href="{{route('meeting.attendance',$meeting->mid)}}" class="btn btn-outline-light btn-sm waves-effect waves-light">View</a>


                                </td>
                                </tr>
                                @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </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();
                }
            });
    }

    // add mid, gid, gsid, coffid to the hidden input in the add lesson discount modal form
    $('.add-lesson-discount').on('click',function(){
        $('#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'))
    })
</script>
@endsection