@extends('layouts.app')


@section('content')
    @include('includes.bread_crumb_with_header', [
        'header' => 'Onboardings',
        'bread_crumbs' => ['Dashboard' => url('/dashboard')],
    ])
    <div id="kt_app_content" class="app-content flex-column-fluid" style="max-width: 100vw;">
        <!--begin::Content container-->
        <div id="kt_app_content_container" class="app-container">
            <!--begin::Card-->
            <div class="card p-5">
                <ul class="nav nav-stretch nav-pills nav-pills-custom nav-pills-active-custom d-flex justify-content-between mb-8 px-5"
                    role="tablist">

                    <!--end::Nav item-->
                    @foreach ($dates as $key => $date)
                        <li class="nav-item p-0 ms-0" role="presentation">
                            <!--begin::Date-->
                            @if ($key == '0')
                                <a class="nav-link btn d-flex flex-column flex-center rounded-pill date-changer-btn min-w-45px py-4 px-3 btn-active-danger active"
                                   data-bs-toggle="tab" href="#kt_timeline_widget_3_tab_content_1"
                                   aria-selected="false" tabindex="-1" role="tab" data-date="{{ $date }}">
                                    <span class="fs-6 fw-bold">{{ $date }}</span>
                                </a>
                            @else
                                <a class="nav-link btn d-flex flex-column flex-center rounded-pill date-changer-btn min-w-45px py-4 px-3 btn-active-danger"
                                   data-bs-toggle="tab" href="#kt_timeline_widget_3_tab_content_1"
                                   aria-selected="false" tabindex="-1" role="tab" data-date="{{ $date }}">
                                    <span class="fs-6 fw-bold">{{ $date }}</span>
                                </a>
                            @endif
                            <!--end::Date-->
                        </li>
                    @endforeach
                </ul>

                <div class="tab-content  mb-2 px-9" id="onboarding-content">
                    <!--begin::Tap pane-->
                    @foreach ($onboardings as $onboarding)
                        <div class="tab-pane fade show active content-wrapper" role="tabpanel"
                             data-content-id="{{ $onboarding['id'] }}">
                            <!--begin::Wrapper-->
                            <div class="d-flex align-items-center mb-6">
                                <!--begin::Bullet-->
                                <span data-kt-element="bullet"
                                      class="bullet bullet-vertical d-flex align-items-center min-h-70px mh-100 me-4 bg-info"></span>
                                <!--end::Bullet-->
                                <!--begin::Info-->
                                <div class="flex-grow-1 me-5">
                                    <!--begin::Time-->
                                    <div class="text-gray-800 fw-semibold fs-2">

                                        <span
                                            class="text-gray-400 fw-semibold fs-7">{{ $onboarding['start_time'] }}-{{ $onboarding['end_time'] }}</span>
                                    </div>
                                    <!--end::Time-->
                                    <!--begin::Description-->
                                    <div class="text-gray-700 fw-semibold fs-6">

                                        @if (empty($onboarding['title']))
                                            Booking Pending...
                                        @else
                                            <span data-bs-toggle="tooltip" data-bs-delay-show="500"
                                                  data-bs-placement="right" aria-label="{{$onboarding['title']}}">{{ substr($onboarding['title'],0,75) }}&nbsp;...</span>
                                        @endif
                                    </div>
                                    <!--end::Description-->
                                    <!--begin::Link-->
                                    @if (!empty($onboarding['email']))
                                        <div class="text-gray-400 fw-semibold fs-7">Seller :
                                            <!--begin::Name-->
                                            <a href="#"
                                               class="text-primary opacity-75-hover fw-semibold">{{ $onboarding['name'] }}
                                                |{{ $onboarding['email'] }}</a>
                                            <!--end::Name-->
                                        </div>
                                    @endif
                                    <!--end::Link-->
                                </div>

                                <button data-id="{{ $onboarding->id }}" class="btn btn-sm
                                 @if($onboarding->user_id == $user_id)
                                    close-booked-btn
                                 @else
                                    edit-booking-btn
                                 @endif
                                     w-150px
                                    @if(!empty($onboarding->user_id) && $onboarding->user_id != $user_id)
                                         disabled
                                    @elseif($onboarding->user_id != $user_id && $active_onboarding)
                                        disabled
                                    @endif


                                 @if($onboarding->user_id == $user_id)
                                  btn-danger
                                 @elseif(!empty($onboarding->user_id) && $onboarding->user_id !=$user_id)
                                  btn-warning
                                 @else
                                  btn-success
                                 @endif">
                                    @if(!empty($onboarding->user_id))
                                        @if($onboarding->user_id == $user_id)
                                            Cancel
                                        @else
                                            Unavailable
                                        @endif
                                    @else
                                        Reserve
                                    @endif
                                </button>
                            </div>
                            <!--end::Wrapper-->
                        </div>
                    @endforeach
                    <!--end::Tap pane-->
                    <!--end::Tap pane-->
                </div>
            </div>
            <!--end::Card-->
        </div>
        <!--end::Content container-->
    </div>
@endsection
@push('script')
    <script>
        const modalId = "modal";
        $(document).on('click', '.edit-booking-btn', async function () {
            try {
                const id = $(this).attr('data-id');
                const loadUrl = `${baseUrl}/seller/onboardings/${id}/edit`;
                await loadModal(modalId, loadUrl);
            } catch (err) {
                console.log(err);
            }
        });
        $(document).on("click", ".close-booked-btn", async function () {
            if (await isConfirmToProcess("Warning", "", 'Are you sure! You want to cancel the reservation?',
                'warning')) {
                try {
                    let eventId = $(this).data('id');
                    let url = `${baseUrl}/seller/onboarding/cancel/${eventId}`;
                    let ajaxRequest = new HttpRequest(url, 'PUT');
                    ajaxRequest.set_data_as_object({
                        '_token': csrfToken
                    });
                    let response = await ajaxRequest.call();
                    toast.success(response.message);
                    setTimeout(()=>{
                        location.reload();
                    },250);
                } catch (err) {
                    toast.error(err);
                }
            }
        });
        $(document).on("click", "#booked-event", async function (e) {
            e.preventDefault();
            const btn = $(this);
            const btnTitle = btn.html();
            let form = btn.closest('form');
            try {
                loadButton(btn);
                const url = form.attr('action');
                let ajaxRequest = new HttpRequest(url, 'PUT');
                ajaxRequest.set_data_by_form_object(form);
                let response = await ajaxRequest.call();
                toast.success(response.message);
                $("#" + modalId).modal("hide");
                setTimeout(() => {
                    location.reload();
                }, 200);
            } catch (err) {
                toast.error(err);
            } finally {
                resetButton(btn, btnTitle);
            }
        });


        $(document).on('click', '.date-changer-btn', async function() {
            let date = $(this).data('date');
            try {
                const url = `${baseUrl}/admin/onboarding/${date}`;
                const ajaxRequest = new HttpRequest(url, 'POST');
                ajaxRequest.set_data_as_object({
                    '_token': csrfToken
                });
                let response = await ajaxRequest.call();
                $('#onboarding-content').html("");

                for (let i = 0; i < response.length; i++) {
                    let onboardingHtmlContent = getOnboardingContentHtml(response[i]);
                    $('#onboarding-content').append(onboardingHtmlContent);
                }
            } catch (err) {
                toast.error("Could not load existing events of the date. (error_ref: load_onboarding_events)");
                console.log("load_onboarding_events", err);
            }
        });

        function getOnboardingContentHtml(event) {
            let con = `
            <div class="tab-pane fade show active content-wrapper" role="tabpanel"
                             data-content-id="${event['id']}">
                            <!--begin::Wrapper-->
                            <div class="d-flex align-items-center mb-6">
                                <!--begin::Bullet-->
                                <span data-kt-element="bullet"
                                      class="bullet bullet-vertical d-flex align-items-center min-h-70px mh-100 me-4 bg-info"></span>
                                <!--end::Bullet-->
                                <!--begin::Info-->
                                <div class="flex-grow-1 me-5">
                                    <!--begin::Time-->
                                    <div class="text-gray-800 fw-semibold fs-2">

                                        <span
                                            class="text-gray-400 fw-semibold fs-7">${event['start_time']}-${event['end_time']}</span>
                                    </div>
                                    <!--end::Time-->
                                    <!--begin::Description-->
                                    <div class="text-gray-700 fw-semibold fs-6">`;


            if (event['title'] == null) {
                con += `Booking Pending...`;
            } else {
                con += `<span data-bs-toggle="tooltip" data-bs-delay-show="500"
                      data-bs-placement="right"
                      aria-label="${event['title']}">${event['title'].substring(0, 75)}&nbsp;...</span>`;
            }
            con += `</div>
            <!--end::Description-->
            <!--begin::Link-->`;
            if (event['email'] != null) {
                con += ` <div class="text-gray-400 fw-semibold fs-7">Seller :
                    <!--begin::Name-->
                    <a href="#"
                       class="text-primary opacity-75-hover fw-semibold">${event['name']} |${event['email']}</a>
                    <!--end::Name-->
                </div>`;
            }

            con += `
            <!--end::Link-->
        </div>`;

            con += getActionBtn(event);

            con += `
        </div>
        <!--end::Wrapper-->
    </div>

`;
        return con;
        }

        function getActionButtonClass(event) {
            let cls;
            if (event['user_id'] === Number("{{$user_id}}")) {
                cls = ` close-booked-btn`;
            } else {
                cls = ` edit-booking-btn`;
            }


            if (event['user_id'] != null && Number(event['user_id']) !== Number("{{ $user_id }}")) {
                cls += ` disabled`;
            } else if (Number(event['user_id']) !== Number("{{ $user_id }}") && Number("{{ (int)$active_onboarding }}") === 1) {
                cls += ` disabled`;
            }

            if (Number(event['user_id']) === Number("{{$user_id}}")) {
                cls += ` btn-danger`;
            } else if (event['user_id'] !== null && Number(event['user_id']) !== Number({{"$user_id"}})) {
                cls += ` btn-warning`;
            } else{
                cls += ` btn-success`;
            }

            return cls;
        }


        function getActionBtnLabel(event)
        {
            if(event['user_id'] != null) {
                if (Number(event['user_id']) === Number("{{$user_id}}")) {
                    return 'Cancel';
                } else {
                    return 'Unavailable';
                }
            }else {
                return 'Reserve';
            }
        }

        function getActionBtn(event)
        {
            let btn = `<button data-id="${ event['id'] }" class="btn btn-sm
                                     w-150px` + getActionButtonClass(event) + ` ">`;
            btn += getActionBtnLabel(event);
            btn += `</button>`;
            return btn;
        }
    </script>
@endpush