@csrf
<input hidden name='sitem' value="{{ $sitem->id }}">
<input hidden name='section' value="{{ $section }}">

@if ($sitem->medias->isNotEmpty())
<div class="medias">
    <div class="owl-carousel owl-theme">
        @foreach ($sitem->medias as $media)
        @if (in_array(strtolower(pathinfo($media->path, PATHINFO_EXTENSION)),['gif','jpg','jpeg','png','jfif','webp']))
        <img class="media item" src="{{ $media->uploads('path') }}" />
        @else
        <div class="item">
            <video-js class="video-js vjs-big-play-centered" controls muted autoplay loop data-setup='{}'>
                <source src="{{ $media->uploads('path') }}" />
            </video-js>
        </div>
        @endif
        @endforeach
    </div>
</div>
@else
@if (in_array(strtolower(pathinfo($sitem->media, PATHINFO_EXTENSION)),['gif','jpg','jpeg','png','jfif','webp']))
<img class="media" src="{{ $sitem->uploads('media') }}" />
@else
<video-js class="video-js vjs-big-play-centered" controls muted autoplay loop data-setup='{}'>
    <source src="{{ $sitem->uploads('media') }}" />
</video-js>
@endif
@endif

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

        @if ($sitem->spa_tag_id)
        <div class="tag" style="background-color: {{ $branch->color }}">{{ $sitem->tag->title }}</div>
        @endif
    </div>

    <div class="description">
        {!! $sitem->description !!}
    </div>

    @if ($sitem->warnings->isNotEmpty())
    <div class="warnings">
        @foreach ($sitem->warnings as $warning)
        <img src="{{ $warning->uploads('image') }}" class="tooltips" title="{{ $warning->title }}">
        @endforeach
    </div>
    @endif

    <div class="time">
        <i class="i-Clock"></i> <span class="skiptranslate">{{ $sitem->execution_time }} </span> (
        @if ($sitem->execution_time_format === 'm')
        @lang('global.minutes')
        @else
        @lang('global.hours')
        @endif
        )
    </div>

    <div class="price skiptranslate">
        @if ($sitem->price == 0)
        @elseif ($sitem->offer)
        <s>{{ $sitem->price }}</s>
        <span class="offer-price">{{ $sitem->offer_price }} SAR</span>
        @else
        <span>{{ $sitem->offer_price }} SAR</span>
        @endif
    </div>
</div>

@if ($sitem->options->isNotEmpty())
<div class="options">
    @foreach ($sitem->options as $option)
    <div class="option active {{ $option->required ? 'required': '' }}" data-max-choices="{{ $option->max_choices }}">
        <div class="header">
            <div></div>
            <h5 class="title">{{ $option->title }} </h5>
            <i class="las la-caret-down arrow"></i>
        </div>

        <div class="choices">
            @foreach ($option->choices as $choice)
            <div class="choice">
                @if ($branch->settings->orders->is_active && $branch->settings->services->menu_type === 'order')
                <div class="pretty p-svg @if ($option->max_choices > 1) p-curve @else p-round @endif p-bigger">
                    <input @if ($loop->first && $option->required) required @endif
                    @if ($option->max_choices > 1)
                    type='checkbox' name="options[{{ $option->id }}][choices][{{ $choice->id }}][id]" @else type="radio" name="options[{{ $option->id }}][choices][0][id]" @endif value="{{ $choice->id }}" />

                    <div class="state p-success">
                        <svg class="svg svg-icon" viewBox="0 0 20 20">
                            <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z" style="stroke: white;fill:white;"></path>
                        </svg>

                        <label> {{ $choice->title }} </label>
                    </div>
                </div>
                @else
                <label> {{ $choice->title }} </label>
                @endif

                @if ($choice->price)
                <div class="price skiptranslate">
                    <span>+{{ $choice->price }} SAR</span>
                </div>
                @endif

                @if ($branch->settings->orders->is_active && $branch->settings->services->menu_type === 'order')
                @if ($choice->max_quantity)
                <div class="quantity">
                    <div>
                        <div class="plus">
                            <i class="las la-plus"></i>
                        </div>
                        <input disabled readonly required value="1" min="1" max="{{ $choice->max_quantity }}" name="options[{{ $option->id }}][choices][{{ $option->max_choices > 1 ? $choice->id : 0 }}][quantity]" />
                        <div class="minus">
                            <i class="las la-minus"></i>
                        </div>
                    </div>
                </div>
                @endif
                @endif
            </div>
            @endforeach
        </div>
    </div>
    @endforeach
</div>
@endif

@if ($branch->settings->orders->is_active && $branch->settings->services->menu_type === 'order')
<div class="date_and_time">
    <div class="container">
        <div class="row">
            <h3 class="header mb-3"> @lang('global.date_and_time')</h3>

            <div class="col-12 form-group date">
                <label class="form-label">@lang('validation.attributes.date')</label>
                <input class="form-control" name="date" placeholder="@lang('validation.attributes.date')" required data-sitem="{{ $sitem->id }}" data-section="{{$section}}">
            </div>

            <div class="col-12 form-group time d-none">
                <label class="form-label">@lang('validation.attributes.time')</label>
                <input hidden name="time">
                <p class="alert alert-info d-none"></p>
                <ul class="times-ul d-none"></ul>
            </div>
        </div>
    </div>
</div>

<div class="notes">
    <h3 class="header"> @lang('global.add_your_notes_here')</h3>
    <textarea name="notes" placeholder="@lang('messages.tooltips.sitems.alergic')"></textarea>
</div>

<div class="actions">
    <div class="add-button-container">
        <button class="btn btn-success add-to-cart-button" type="submit">
            <i class="las la-plus-circle"></i> @lang('global.reserve_now')
        </button>
    </div>
</div>
@endif