@extends('layouts.admin')

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

<div class="card">
    <div class="card-header">
        <h3 class="card-title">Live Support Meetings</h3>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table
                class="table border-top table-striped table-bordered table-vcenter text-nowrap">
                <thead>
                    <tr>
                        <th style="text-align: center;display: table-cell; vertical-align: middle">
                         ID
                        </th>
                        <th style="text-align: center;display: table-cell; vertical-align: middle">Number
                        </th>
                        <th style="text-align: center;display: table-cell; vertical-align: middle">
                            Topic</th>
                        <th style="text-align: center;display: table-cell; vertical-align: middle">
                            Status
                        </th>
                        <th style="text-align: center;display: table-cell; vertical-align: middle">Date/Time
                        </th>
                        <th style="text-align: center;display: table-cell; vertical-align: middle">
                            Actions
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ( $live_support_meetings as $key=>$meeting )
                        <tr class="text-center">
                            <td>{{++$key}}</td>
                            <td>{{$meeting->mnumber}}</td>
                            <td>{{ $meeting->mtopic }}</td>
                            <td>{{$meeting->mstatus}}</td>
                            <td>   <i class="fa fa-calendar"></i>
                                {{ $meeting->mstartdate . ' / '}}
                                <i class="fa fa-clock-o"></i>
                                {{date('h:i A', strtotime($meeting->mstarttime))}}</td>
                            <td>
                                @if ($meeting->mstatus == 'Canceled')
                                <p class="text-danger">Meeting Canceled</p>
                                @else
                                <a href="javascript:void(0)" onClick="confirmCancel(event,{{$meeting->id}})" class="btn btn-outline-light btn-sm waves-effect waves-light"
                                    data-bs-toggle="tooltip" data-bs-original-title="Cancel"
                                    >
                                    cancel
                                    <form method="POST" action="{{ route('staff.live-support-meetings.deleteMeeting', $meeting->id) }}" id="cancel-form-{{$meeting->id}}">
                                        @csrf
                                        <input name="_method" type="hidden" value="POST">

                                    </form>
                                    </a>
                                @endif
                            </td>

                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="mt-4">
                {{ $live_support_meetings->appends(Request::except('page'))->render('inc.paginate') }}
            </div>
            <p class="mt-3">
                Displaying {{$live_support_meetings->count()}} of {{ $live_support_meetings->total() }} schedule(s).
            </p>
        </div>
    </div>
</div>

    </div>
</div>
@endsection
@section('admin-js')
<script>
    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();
                }
            });
    }
</script>
@endsection