@extends('layout.mainlayout')

@section('content')
    @php
        $locale = app('translator')->getLocale() ?? 'en';
            $currency_code = '<img src="/img/sar.svg" alt="SAR" style="height: 1em; width: auto; display: inline-block; vertical-align: middle;">';

            if (isset($global_symbol['from_website']) && $global_symbol['from_website']){
                if ($locale == 'en'){
                  if(isset($global_symbol['is_html']) && $global_symbol['is_html']){
                      $currency_code = '<img src="/img/sar.svg" alt="SAR" style="height: 1em; width: auto; display: inline-block; vertical-align: middle;">';
                  }elseif($global_symbol['currency']){
                      $currency_code = $global_symbol['currency_ar'];
                  }
                }else{
                   if(isset($global_symbol['is_html_ar']) && $global_symbol['is_html_ar']){
                      $currency_code = '<img src="/img/sar.svg" alt="SAR" style="height: 1em; width: auto; display: inline-block; vertical-align: middle;">';
                  }elseif($global_symbol['currency']){
                      $currency_code = $global_symbol['currency_ar'];
                  }
                }
            }
    @endphp
    <style>
        #address-desc{
            border: 1px solid #DADADA;
            border-radius: 25px;
        }
        .step-main:first-of-type{
            color: var(--blazma-primary);
        }
        .step-footer .note-text{
            white-space: nowrap;
        }
        @media (max-width: 1000px) {
            .step-footer .note-text{
                white-space: inherit;
            }
        }
    </style>
    <main class="page-main">
        <!-- Start Breadcrubms Section -->
        <section class="new-sec breadcrumbs-sec">
            <div class="container">
                <h3 class="page-title">{{trans('web.checkout')}}</h3>
                <i class="ri-arrow-down-s-line icon"></i>
            </div>
        </section>
        <!-- End Breadcrubms Section -->
        <!-- Start Checkout Section -->
        <section class="new-sec checkout-sec">
            <div class="container">
                <div class="row">
                    <div class="col-lg-7">
                        <div class="steps">
                            <div class="stepper">
                                <div class="step active">
                                    <p class="step-num">1</p>
                                    <p class="step-title">{{trans('web.appointment')}}</p>
                                </div>
                                <div class="step">
                                    <p class="step-num">2</p>
                                    <p class="step-title">{{trans('web.account')}}</p>
                                </div>
                                <div class="step">
                                    <p class="step-num">3</p>
                                    <p class="step-title">{{trans('web.payment')}}</p>
                                </div>
                            </div>
                            <div class="step-content">
                                <h2 class="step-title">{{trans('web.select_your_location')}}</h2>
                                <div class="step-main">
                                        <input type="text" class="form-control mb-2 p-3" id="address-desc" @if(!empty(session('home_visit_selected_city')))  value="{{ session('home_visit_selected_city') }}" @endif placeholder="{{trans('web.enter_address')}}">
                                    <span>{{trans('web.our_team_contact_you')}}</span>
                                </div>
                                <h2 class="step-title mt-5">{{trans('web.select_date_time')}}</h2>
                                <div class="step-main">
                                    <div class="calendar">
                                        <div id="datepicker"></div>
                                    </div>
                                    <div class="times">
                                        <p class="note">{{trans('web.available_times')}} <span
                                                    id="date-selected"></span></p>
                                        <input type="hidden" id="date-selected-format">
                                        <div class="row" id="times-slots">
                                            {{--<div class="col-sm-4">
                                                <input type="radio" id="9:00" name="time"/>
                                                <label for="9:00" class="btn" id="9:00">9:00</label>
                                            </div>
                                            <div class="col-sm-4">
                                                <input type="radio" id="10:00" name="time"/>
                                                <label for="10:00" class="btn" id="10:00">10:00</label>
                                            </div>
                                            <div class="col-sm-4">
                                                <input type="radio" id="11:00" name="time"/>
                                                <label for="11:00" class="btn" id="11:00">11:00</label>
                                            </div>
                                            <div class="col-sm-4">
                                                <input type="radio" id="12:00" name="time"/>
                                                <label for="12:00" class="btn" id="12:00">12:00</label>
                                            </div>
                                            <div class="col-sm-4">
                                                <input type="radio" id="13:00" name="time"/>
                                                <label for="13:00" class="btn" id="13:00">13:00</label>
                                            </div>
                                            <div class="col-sm-4">
                                                <input type="radio" id="14:00" name="time"/>
                                                <label for="14:00" class="btn" id="14:00">14:00</label>
                                            </div>--}}
                                        </div>
                                    </div>
                                </div>
                                <div class="step-footer flex-wrap">
                                    <span class="mb-3 note-text" style="color: #007bff">{{trans('web.change_appointment_date')}}</span>
                                    <button class="btn cart-btn" id="open-cart">
                                        <span class="icon">&#10229;</span>
                                        {{trans('web.return_to_cart')}}
                                    </button>
                                    <a href="#" id="continue-check2" class="btn continue-btn">
                                        <span>{{trans('web.continue')}}</span>
                                        <span class="icon">&#10230;</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5" id="order-summary">
                        <div class="order-summary">
                            <div class="header">
                                <h2 class="title">{{trans('web.order_summary')}}</h2>
                            </div>
                            <div class="card-list">
                                <div class="packages">
                                    @foreach($packages as $package)
                                        <div class="single-package">
                                            <div class="left-side">
                                                <div class="package-image">
                                                    <img src="@if(app('translator')->getLocale() == "ar") {{$package['IMAGE_URL_AR']}} @else {{$package['IMAGE_URL']}} @endif"
                                                         alt="Diabetes">
                                                </div>
                                                <div class="package-name">
                                                    <h6 class="tag">{{ $package['IS_PACKAGE'] ? trans('web.packages') : trans('web.test')}}</h6>
                                                    <h4 class="title">@if(app('translator')->getLocale() == "ar")
                                                            {{$package["NAME_AR"]}}
                                                        @else
                                                            {{$package["NAME_EN"]}}
                                                        @endif</h4>
                                                </div>
                                            </div>
                                            <div class="right-side">
                                                <span class="price">{{$package["BASE_PRICE"]}} {!! $currency_code !!}</span>
                                                {{--@foreach($package["items"] as $item)
                                                    @if($cart["packages_count"] > 1)
                                                        <button cart-id="{{$item["CART_ID"]}}"
                                                                class="btn delete-btn delete-cart-item"><i
                                                                    class="ri-delete-bin-7-line"></i></button>
                                                    @endif
                                                @endforeach--}}
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            @include('promo_code_section')

                            <div class="side-footer">
                                <div class="side-row">
                                    <span class="row-name">{{trans('web.subtotal')}}:</span>
                                    <span class="row-value">{{$sub_total}} {!! $currency_code !!}</span>
                                </div>
                                @if(!empty($cart["home_visit_fees"]))
                                    <div class="side-row">
                                        <span class="row-name">{{trans("web.home_visit_cart")}}:</span>
                                        <span class="row-value">{{$cart["home_visit_fees"]}} {!! $currency_code !!}</span>
                                    </div>
                                @endif
                                <div class="side-row">
                                    <span class="row-name">{{trans("web.tax_cart")}}:</span>
                                    <span class="row-value">{{$cart["tax_amount"]}} {!! $currency_code !!}</span>
                                </div>
                                @if($cart['discount_amount'] != 0)
                                    <div class="side-row">
                                        <span class="row-name">{{trans("web.discount")}}:</span>
                                        <span class="row-value">{{$cart["discount_amount"]}} {!! $currency_code !!}</span>
                                    </div>
                                @endif
                                <div class="side-row total">
                                    <span class="row-name">{{trans("web.total")}} {{empty($cart["packages_count"]) ? "0" : $cart["packages_count"]}} {{trans("web.test")}}</span>
                                    <span class="row-value">@if(!empty($hospital->ENABLE_RECURSIVE_TAX))
                                            {{empty($cart["net_total"]) ? "0" : $cart["net_total"]}}
                                        @else
                                            {{empty($cart["net_total"]) ? "0" : $cart["net_total"]}}
                                        @endif {!! $currency_code !!}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Checkout Section -->

    </main>
@endsection

@section('frontend_scripts')
    <script>
        $('#datepicker').on('change', function (e) {
            let selectedDate = $('#date-selected-format').val();
            $.ajax({
                url: '/confirm',
                data: {
                    date: selectedDate
                },
                success: function (response) {
                    let timesSlot = $('#times-slots');
                    timesSlot.empty();
                    $.each(response, function (index, value) {
                        timesSlot.append('<div class="col-6 col-sm-4">' +
                            '<input type="radio" id="' + value.ID + '" name="time"/>' +
                            '<label for="' + value.ID + '" class="btn" id="' + value.ID + '">' + value.FROM_TIME + '</label>')
                    });
                }
            })
        })

        $('#continue-check2').on('click', function (e) {
            e.preventDefault();
            let slotTime = parseInt($('input[name="time"]:checked').attr('id'));
            let date = $('#date-selected-format').val();
            if ($('input[name="time"]:checked').attr('id') === undefined || date === '')
            {
                alert('Please select date and time')
                return;
            }

            @if($type == 2)
            var address = $("#address-desc").val();
            if(address == "" || address == undefined || address == null){
                alert("{{trans("errors.address_empty")}}")
                return false;
            }

            window.location.href = '/order-account?date='+date+'&timeslotId='+slotTime+'&address='+address
            @else
                window.location.href = '/order-account?date='+date+'&timeslotId='+slotTime
            @endif
        })

    </script>
@endsection