@extends('resources.views.web.layouts.layout')

@section('content')

    <main>
        <!-- Start section -->
        <section class="checkout_pg section">
            <div class="container">
                <div class="inner col-lg-10 m-auto">
                    <form method="post"
                          action="{{ route('web.orders.store', $source->id) }}"
                          id="form"
                          onsubmit="disableButtons('.store-order-btn');">
                        @csrf
                        <div class="row">
                            <div class="col-lg-7">
                                <div class="right_box">
                                    <h5 class="mb-4 fw-bold">{{ __('products::products.product') }}</h5>
                                    <div class="course_data row align-items-center">
                                        <div class="col-lg-6">
                                            <div class="img_box">
                                                <img src="{{ getImage($source->main_image) }}"
                                                     class="sec-img"
                                                     alt="{{ $source->currentDescription->title ?? "" }}"/>
                                                <span class="badge primary_badge">{{ $source->subject->currentDescription->title ?? "" }}</span>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="text_box">
                                                <h6 class="data fw-bold">
                                                    <img src="{{asset('assets/web/images/icons/book.svg')}}"
                                                         class="icon me-2" alt=""/>
                                                    {{ $source->currentDescription->title ?? "" }}
                                                </h6>
                                                <h6 class="data">
                                                    <img src="{{asset('assets/web/images/icons/user2.svg')}}"
                                                         class="icon me-2" alt=""/>
                                                    {{ $source->user->name ?? "" }}
                                                </h6>
                                                <h6 class="data">
                                                    {{ $source->option->currentDescription->title ?? "" }}
                                                </h6>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-4">
                                        <div class="data_item in-flex">
                                            <h6 class="label fw-bold mb-0">{{ __('sources.stage_id') }}</h6>
                                            <p class="data mb-0 "> {{ $source->stage->currentDescription->title ?? "" }} </p>
                                        </div>
                                        <div class="data_item in-flex">
                                            <h6 class="label fw-bold mb-0">{{ __('sources.grade_id') }}</h6>
                                            <p class="data mb-0 ">{{ $source->grade->currentDescription->title ?? "" }}</p>
                                        </div>
                                        <div class="data_item in-flex">
                                            <h6 class="label fw-bold mb-0">{{ __('sources.term_id') }}</h6>
                                            <p class="data mb-0 "> {{ $source->term->currentDescription->title ?? "" }} </p>
                                        </div>
                                        <div class="data_item in-flex">
                                            <h6 class="label fw-bold mb-0">{{ __('sources.unit_id') }}</h6>
                                            <p class="data mb-0 "> {{ $source->unit_name }} </p>
                                        </div>
                                        <div class="data_item in-flex">
                                            <h6 class="label fw-bold mb-0">{{ __('sources.lesson_id') }}</h6>
                                            <p class="data mb-0 "> {{ $source->lesson_name }} </p>
                                        </div>
                                    </div>
                                    <div class="pay_box mt-1">
                                        <h5 class="mb-4 fw-bold">{{ __('orders::orders.payment_method') }}</h5>
                                        <div class="pay_radios" id="payment-methods">
                                            <!-- payment methods here -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="left_box">
                                    <div class="copoun_box mb-5">
                                        <h6 class="fw-bold small mb-3">{{ __('orders::orders.coupon2') }}</h6>
                                        <div class="form-group">
                                            <input type="text" name="coupon"
                                                   class="form-control @error('coupon') is-invalid @enderror"
                                                   placeholder="{{ __('orders::orders.enter_coupon') }}"
                                                   value="{{ old('coupon') }}" autocomplete="off"/>
                                            <button type="button" class="butn apply_butn primary_butn"
                                                    id="apply-coupon-btn">
                                                {{ __('orders::orders.apply') }}
                                            </button>
                                        </div>
                                        <div id="coupon-result"></div>
                                    </div>
                                    <div class="notes_box my-5">
                                        <div class="form-group">
                                            <h6 class="fw-bold small mb-3">{{ __('orders::orders.write_order_notes') }}</h6>
                                            <textarea name="notes"
                                                      class="form-control @error('notes') is-invalid @enderror"
                                                      rows="5">{{ old('notes') }}</textarea>
                                        </div>
                                    </div>
                                    <div class="check_summary">
                                        <h5 class="mb-3 text-center fw-bold">{{ __('orders::orders.payment_details') }}</h5>
                                        <div id="order-summary">
                                            <!-- order summary here -->
                                        </div>
                                    </div>
                                    <button type="submit" class="butn primary_butn mt-5 m-auto store-order-btn">
                                        <span class="zi-5"> {{ __('orders::orders.complete_payment') }} </span>
                                        <span class="circle"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </main>

@endsection

@push('stack_scripts')
    <script>
        const form = $('#form');

        getOrderSummary();

        async function getOrderSummary() {
            const callAjaxResponse = await callAjax({
                data: form.serialize(),
                url: '{{ route('web.orders.get.summary', $source->id) }}',
                method: 'post',
            });

            if (callAjaxResponse.success) { //success
                const responseData = callAjaxResponse.data;
                $('#coupon-result').html(responseData.coupon_result);
                $('#order-summary').html(responseData.summary_html);
                $('#payment-methods').html(responseData.payment_methods_html);
            } else { //error
                return toasterError(callAjaxResponse.error);
            }
        } //end of function

        const doc = $(document);
        doc.on('click', '#apply-coupon-btn', function (event) {
            getOrderSummary();
        });
    </script>
@endpush