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

@if (in_array(strtolower(pathinfo($cloth->media, PATHINFO_EXTENSION)), ['gif', 'jpg', 'jpeg', 'png', 'jfif', 'webp']))
    <img class="media" src="{{ $cloth->uploads('media') }}" />
@else
    <video-js class="video-js vjs-big-play-centered" controls muted autoplay loop data-setup='{}'>
        <source src="{{ $cloth->uploads('media') }}" />
    </video-js>
@endif

<div class="details">
    <div class="title-and-tag">
        <h6 class="title" style="color: {{ $laundry->design->product_title_font }}">{{ $cloth->title }}</h6>

        @if ($cloth->tag_id)
            <div class="tag" style="background-color: {{ $laundry->design->tag_bg }};color : {{ $laundry->design->tag_title_font }}">
                {{ $cloth->tag->title }}
            </div>
        @endif
    </div>

    <div class="description" style="color: {{ $laundry->design->product_description_font }}">
        {!! $cloth->description !!}
    </div>

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

    @if ($cloth->execution_time)
        <div class="calories_and_time">
            <div class="time" style="color: {{ $laundry->design->product_description_font }}">
                <span class="skiptranslate">{{ $cloth->execution_time }} </span> <i class="i-Clock"></i>
            </div>
        </div>
    @endif

    <div class="price skiptranslate">
        @if ($cloth->price == 0)
        @elseif ($cloth->offer)
            <s style="color: {{ $laundry->design->product_price_font }}">{{ $cloth->price }}</s>
            <span class="offer-price">{{ $cloth->offer_price }} <span class='icon-saudi_riyal'></span></span>
        @else
            <span style="color: {{ $laundry->design->product_price_font }}">{{ $cloth->offer_price }} <span class='icon-saudi_riyal'></span></span>
        @endif
    </div>
</div>

@if ($cloth->options->isNotEmpty())
    <div class="options">
        @foreach ($cloth->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 ($cloth->laundry->settings->orders->is_active)
                                <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 }} <span class='icon-saudi_riyal'></span></span>
                                </div>
                            @endif

                            @if ($cloth->laundry->settings->orders->is_active)
                                @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 ($cloth->laundry->settings->orders->is_active)
    <div class="notes">
        <h3 class="header"> @lang('global.add_your_notes_here')</h3>
        <textarea name="notes" placeholder="@lang('messages.tooltips.clothes.alergic')"></textarea>
    </div>

    <div class="actions">
        <div class="quantity">
            <div class="plus">
                <i class="las la-plus"></i>
            </div>
            <input readonly value="1" min="1" name="quantity" />
            <div class="minus">
                <i class="las la-minus"></i>
            </div>
        </div>
        <div class="add-button-container">
            <button class="btn btn-success add-to-cart-button" type="submit" style="background-color: {{ $laundry->design->button_bg }};color : {{ $laundry->design->button_font }}">
                <i class="las la-cart-plus"></i> @lang('global.add_to_cart')
            </button>
        </div>
    </div>
@endif