@extends('website.service.layouts.index')

@section('content')
@if ($advertisement_locations->isNotEmpty())
<section class="advertisements">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="owl-carousel owl-theme">
                    @foreach ($advertisement_locations as $location)
                    <a @class(['item', 'clickable'=> $location->advertisement->url]) href="{{ $location->advertisement->url ?? 'javascript:void(0)' }}" @if($location->advertisement->url) target="_blank" @endif ar-image="{{ uploads($location->advertisement->getTranslation('image','ar')) }}" en-image="{{ uploads($location->advertisement->getTranslation('image','en')) }}" data-id="{{$location->id}}"></a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endif

<section class="container-fluid menu list-view">
    <div class="row">
        @if ($room)
        <div class="col-6 table-room">
            <button class="btn btn-success">
                <i class="las la-door-closed"></i> {{ $room->title }}
            </button>
        </div>
        @endif

        <div class="col-12">
            <div class="row align-items-center justify-content-center">
                <div class="col-9 search">
                    <input class="input" placeholder="@lang('global.search')">
                    <i class="las la-search"></i>
                </div>
                <div class="col-2 view">
                    <i class="las la-th-list d-none" data-view="list-view"></i>

                    <i class="las la-th-large" data-view="grid-view"></i>
                </div>
            </div>

            <ul class="header-sections">
                @foreach ($service->sections as $section)
                <li>
                    <a href="#" data-section="#section-{{ $section->id }}">
                        <img data-src="{{ $section->image() }}" class="lazy" />
                        <div class="text" style="background-color: {{ $service->color }}">{{ $section->title }}</div>
                    </a>
                </li>
                @endforeach
            </ul>

            <div class="sections">
                @foreach ($service->sections as $section)
                <div class="section active" id="section-{{ $section->id }}" data-section="{{ $section->id }}">
                    <div class="header" style="background-color: {{ $service->color }}">
                        <h5 class="title">{{ $section->title }}</h5>
                        <i class="las la-caret-down arrow"></i>
                    </div>
                    <div class="container-fluid">
                        <div class="row items list-view">
                            @foreach ($section->items as $item)
                            <div class="col-12">
                                <div class="item shadow" data-item="{{ $item->id }}">
                                    <div class="media">
                                        @if (in_array(strtolower(pathinfo($item->media, PATHINFO_EXTENSION)),['gif','jpg','jpeg','png','jfif','webp']))
                                        <img data-src="{{ $item->uploads('media') }}" class="lazy" />
                                        @else
                                        <video-js class="video-js vjs-big-play-centered" controls muted autoplay loop data-setup='{}'>
                                            <source src="{{ $item->uploads('media') }}" />
                                        </video-js>
                                        @endif
                                    </div>

                                    <div class="details">
                                        <div class="title-and-tag">
                                            <h6 class="title">{{ $item->title }}</h6>

                                            @if ($item->tag_id)
                                            <div class="tag" style="background-color: {{ $service->color }}">{{ $item->tag->title }}</div>
                                            @endif
                                        </div>

                                        <div class="description">
                                            {!! $item->description ?: __('global.no_description') !!}
                                        </div>

                                        <div class="price-and-actions">
                                            <div class="price skiptranslate">
                                                @if ($item->price == 0)
                                                @lang('global.without_fees')
                                                @elseif ($item->offer)
                                                <s>{{ $item->price }}</s>
                                                <span class="offer-price">{{ $item->offer_price }} SAR</span>
                                                @else
                                                <span>{{ $item->offer_price }} SAR</span>
                                                @endif
                                            </div>

                                            @if (!$order || ($order && in_array($order->status->title,$service->settings->orders->enable_adding_item_on_status)))
                                            <div class="plus">
                                                @if ($service->settings->orders->is_active)
                                                <i class="las la-plus"></i>
                                                @else
                                                <i class="las la-eye"></i>
                                                @endif
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

<x-bootstrap.modal id="itemModal" content-type='slot' width="xl">
    <div style="background-color: {{ $service->color }}" class="main-title">
        <h3>@lang('global.add_from_menu_options')</h3>
        <i class="las la-times" data-bs-dismiss="modal"></i>
    </div>

    <form action="{{ route('services.cart.store') }}" class="item-container" method="POST"></form>
</x-bootstrap.modal>

<div class="footer-buttons">
    @if ($user?->orders()->isNotEmpty())
    <div class="footer-order">
        <a class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#showOrdersModal">
            <i class="las la-clipboard-list"></i>
        </a>
    </div>
    @endif

    @if ($service->settings->orders->is_active)
    <div class="footer-cart">
        <a class="btn btn-success" data-bs-toggle="modal" data-bs-target="#cartModal">
            <i class="las la-shopping-cart"></i>
            <span class="items-count skiptranslate">0</span>
        </a>
    </div>
    @endif
</div>

@if ($user?->orders()->isNotEmpty())
<x-bootstrap.modal id="showOrdersModal" :centered="true" content='website.service.modals.orders.index' :data="['service' => $service,'user' => $user]" width="xl">
    <x-slot:header>
        <h5 class="modal-title"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </x-slot:header>
</x-bootstrap.modal>
@endif

@if ($service->settings->orders->is_active)
<x-bootstrap.modal id="cartModal" content-type='slot' width="xl">
    <div style="background-color: {{ $service->color }}" class="main-title">
        <h3><i class="las la-poll-h"></i>@lang('global.orders')</h3>
        <i class="las la-times" data-bs-dismiss="modal"></i>
    </div>

    <div class="cart-container" action={{ route('services.cart.updateAll') }} method='POST'></div>
</x-bootstrap.modal>

<x-bootstrap.modal id="createOrderModal" content-type='slot' width="xl">
    <div style="background-color: {{ $service->color }}" class="main-title">
        <h3>@lang('global.order_details')</h3>
        <i class="las la-times" data-bs-dismiss="modal"></i>
    </div>

    <form class="order-container" action='{{ route("services.orders.store") }}' method='POST'></form>
</x-bootstrap.modal>

@if ($service->branch->settings->orders->is_otp_active && !$user)
<x-bootstrap.modal id="otpModal" content-type='slot' width="xl">
    <x-slot:header>
        <h5 class="modal-title">
            <button class="btn text-white" style="background-color: {{ $service->color }}" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#createOrderModal">
                @lang('global.back_to_order')
            </button>
        </h5>

        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </x-slot:header>

    <img src="{{ mix('website/service/images/otp.png','assets') }}" class="otp-image" />

    <p class="message"></p>

    <div class="otp-inputs">
        <input class="m-2 text-center form-control rounded" type="number" maxlength="1" size="1" max="9" name="otp[]" autocomplete="one-time-code" inputmode="numeric" />
        <input class="m-2 text-center form-control rounded" type="number" maxlength="1" size="1" max="9" name="otp[]" inputmode="numeric" />
        <input class="m-2 text-center form-control rounded" type="number" maxlength="1" size="1" max="9" name="otp[]" inputmode="numeric" />
        <input class="m-2 text-center form-control rounded" type="number" maxlength="1" size="1" max="9" name="otp[]" inputmode="numeric" />
    </div>

    <p class="countdown">
        <span class="minutes">00</span>:<span class="seconds">59</span>
    </p>

    <a class="resend-otp d-none" href="#">
        @lang('global.resend_otp')
    </a>

    <button class="btn btn-success">
        <i class="las la-poll-h"></i> @lang('global.submit')
    </button>
</x-bootstrap.modal>
@endif

<x-bootstrap.modal id="ePaymentModal" content-type='slot' width="xl">
    <x-slot:header>
        <h5 class="modal-title">
            <button class="btn text-white" style="background-color: {{ $service->color }}" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#createOrderModal">
                @lang('global.back_to_order')
            </button>
        </h5>

        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </x-slot:header>

    <div class='form'>
        <div></div>
    </div>
</x-bootstrap.modal>

@endif

@if ($order)
<div class="container-fluid footer-order">
    <a class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#showOrderModal">
        <i class="las la-clipboard-list"></i>
    </a>
</div>

<x-bootstrap.modal id="showOrderModal" :centered="true" content='website.service.modals.orders.show' :data="['order' => $order]" width="xl">
    <x-slot:header>
        <h5 class="modal-title">
            <button class="btn text-white" style="background-color: {{ $service->color }}" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#editOrderModal">
                @lang('global.order_details')
            </button>

            <a href="{{ route('branches.portfolio',['branch' => $service->branch->id,'room' => request('room')]) }}">
                <button class="btn btn-secondary" type="button">
                    @lang('global.homepage1')
                </button>
            </a>
        </h5>

        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </x-slot:header>
</x-bootstrap.modal>

<x-bootstrap.modal id="editOrderModal" width="xl" content='website.service.modals.orders.edit' :data="['order' => $order]" />
@endif

<x-bootstrap.modal id="showSurveyModal" content='website.service.modals.survey.show' width="xl" :with-header="false" :data="['service' => $service,'survey' => $survey,'working_times' => $working_times]" />

@if ($survey)
@if ($survey->required && session()->missing("survey_answered.$survey->id"))
<x-bootstrap.modal id="createSurveyModal" :centered="true" data-bs-keyboard="false" data-bs-backdrop="static" content='website.service.modals.survey.create' width="xl" :with-header="false" :data="['service' => $service,'survey' => $survey]" />
@else
<x-bootstrap.modal id="createSurveyModal" :centered="true" content='website.service.modals.survey.create' width="xl" :with-header="false" :data="['service' => $service,'survey' => $survey]" />
@endif
@endif

@endsection