@extends('layouts.organization')

@section('breadcrumb')
    <div class="page-banner-content text-center">
        <h3 class="page-banner-heading text-white pb-15"> {{ __('Consultation') }} </h3>

        <!-- Breadcrumb Start-->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-center">
                <li class="breadcrumb-item font-14"><a href="{{ route('organization.dashboard') }}">{{ __('Dashboard') }}</a>
                </li>
                <li class="breadcrumb-item font-14 active" aria-current="page">{{ __('Consultation') }}</li>
            </ol>
        </nav>
    </div>
@endsection

@section('content')
    <div class="instructor-profile-right-part">
        <div class="instructor-quiz-list-page instructor-consultation-list-page">

            <div class="instructor-my-courses-title d-flex justify-content-between align-items-center">
                <h6>{{ __('All Booking Request') }}</h6>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">{{ __('Student Name') }}</th>
                                    <th scope="col">{{ __('Date') }}</th>
                                    <th scope="col">{{ __('Time') }}</th>
                                    <th scope="col">{{ __('Duration') }}</th>
                                    <th scope="col">{{ __('Action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($bookingHistories as $bookingHistory)
                                    <tr>
                                        <td>
                                            <div class="table-data-with-img d-flex align-items-center">
                                                <div class="flex-shrink-0">
                                                    <div class="instructor-student-img-wrap radius-50">
                                                        <img src="{{ getImageFile(@$bookingHistory->user->image_path) }}"
                                                            alt="img" class="img-fluid">
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1 table-data-course-name">
                                                    {{ @$bookingHistory->user->student->name }}</div>
                                            </div>
                                        </td>
                                        <td>{{ $bookingHistory->date }}</td>
                                        <td>{{ $bookingHistory->time }}</td>
                                        <td>{{ $bookingHistory->duration }}</td>
                                        <td>
                                            <div class="red-blue-action-btns">
                                                <button type="button"
                                                    data-route="{{ route('organization.bookingStatus', [$bookingHistory->uuid, 1]) }}"
                                                    class="theme-btn theme-button1 default-hover-btn bookingStatus">{{ __('Approve') }}</button>

                                                <button type="button" data-bs-toggle="modal"
                                                    data-bs-target="#commentReplyModal"
                                                    data-route="{{ route('organization.cancelReason', $bookingHistory->uuid) }}"
                                                    class="theme-btn theme-button1 orange-theme-btn default-hover-btn bookingCancel">{{ __('Cancel') }}</button>
                                            </div>
                                        </td>
                                    </tr>

                                @empty
                                @endforelse
                            </tbody>
                        </table>
                        @if (count($bookingHistories) < 1)
                            <div class="empty-data ">
                                <h6 class="my-3">{{ __('No Record Found') }}</h6>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Start -->
    <div class="modal fade" id="commentReplyModal" tabindex="-1" aria-labelledby="writeReviewModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="writeReviewModalLabel">{{ __('Cancel Reason') }}</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="cancelReasonForm" action="" method="post">
                    @csrf
                    <div class="modal-body">
                        <!-- Leave a Comment Area-->

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group para-color font-14 color-gray nessage-text mb-30">
                                    <textarea name="cancel_reason" rows="3" class="form-control cancel_reason" required
                                        placeholder="Type your cancel reason *"></textarea>
                                </div>
                            </div>
                        </div>
                        <!-- Leave a Comment Area-->
                    </div>
                    <div class="modal-footer d-flex justify-content-between align-items-center">
                        <button type="button" class="theme-btn theme-button3 modal-back-btn"
                            data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit"
                            class="theme-btn theme-button1 default-hover-btn">{{ __('Submit') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Modal End -->
@endsection

@push('script')
    <script type="text/javascript">
        $('.bookingStatus').click(function() {
            Swal.fire({
                title: "{{ __('Are you sure?') }}",
                text: "{{ __('You won`t be able to revert this!') }}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, change it!'
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        type: 'GET',
                        url: $(this).data("route"),
                        success: function(response) {
                            location.reload();
                        }
                    })
                }
            })
        });

        $('.bookingCancel').click(async function() {
            var route = $(this).data('route');
            $("#cancelReasonForm").attr('action', route);
        })
    </script>
@endpush