@extends('user.layouts.layout')
@section('content')


<div class="container ">
    <div class="row">
        <div class="border-0">
            <form action="{{ route('addToCart') }}" method="post"  id="pro-{{ $Product->sub_category_id }}-form">
                @csrf
                <div class="row">
                    <div class="col-md-6">
                        <div class="text-center">
                            <img src="{{ asset(str_replace('http://', 'https://', $Product->sub_category_image)) }}" class="d-block w-100" alt="{{ asset(str_replace('http://', 'https://', $Product->product_image)) }}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h5 class="my-4 ">{{ $Product[ lang('en') ? 'sub_category_name' : 'sub_category_name_ar' ] }}</h5>
                        {!! $Product[ lang('en') ? 'sub_category_desc' : 'sub_category_desc_ar' ] !!}
                        <div class="row">
                            @forelse($Product->Sizes as $Size)
                                <div class="form-check @if($Product->Sizes->count() == 1) d-none @endif">
                                   <input class="form-check-input" data-price="{{ $Size->CalcPrice() }}" type="radio" value="{{ $Size->sub_category_size_price_id }}" data-product_id="{{ $Product->sub_category_id }}" id="pro-{{ $Product->sub_category_id }}-size-{{ $Size->sub_category_size_price_id }}" name="product[{{ $Product->sub_category_id }}][size]" {{ $loop->first ? 'checked' : '' }}>
                                   <label class="form-check-label" for="pro-{{ $Product->sub_category_id }}-size-{{ $Size->sub_category_size_price_id }}">
                                        {{ $Size[lang('en') ? 'sub_category_size_name' : 'sub_category_size_name_ar'] }}
                                   </label>
                                </div>
                            @empty
                               <input data-price="{{  $Product->CalcPrice() }}" type="hidden" value="{{ 0 }}" data-product_id="{{ $Product->sub_category_id }}" id="pro-{{ $Product->sub_category_id }}-size-{{ 0 }}" name="product[{{ $Product->sub_category_id }}][size]" checked>
                            @endforelse
                        </div>
                        
                        <span>@lang('trans.Special_Instructions')</span>
                        <textarea class="rounded p-3 w-100" rows="4" name="product[{{ $Product->sub_category_id }}][note]"></textarea>
                        <div class="row justify-content-center align-items-center">
                            <div class="col-6 count my-2">
                                <div class="row count align-items-center my-2 px-4" style="direction:{{ lang('ar') ? 'ltr' : 'rtl' }}">
                                    <div class="col-3 p-0">
                                        <div class="mx-0 point p-0 w-100 shadow">
                                            <div class="w-100 h-100 d-flex justify-content-center align-items-center p-1 main_bg minus" data-product_id="{{ $Product->sub_category_id }}">
                                                <i class="fa-solid fa-minus text-white font-weight-bold"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 text-center">
                                        <span class="border-0 h5 pt-2 input_number w-100 text-center w-100" id="pro-{{ $Product->sub_category_id }}-quantity">1</span>
                                        <input type="hidden" value="1" name="product[{{ $Product->sub_category_id }}][quantity]">
                                    </div>
                                    <div class="col-3 p-0">
                                        <div class="mx-0 point p-0 w-100 shadow">
                                            <div class="w-100 h-100 d-flex justify-content-center align-items-center p-1 main_bg plus" data-product_id="{{ $Product->sub_category_id }}">
                                                <i class="fa-solid fa-plus text-white font-weight-bold"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="d-flex justify-content-center justify-content-md-end my-3">
                                    <h5 class="mb-0 mx-1" id="pro-{{ $Product->sub_category_id }}-total">
                                        {{ $Product->CalcPrice() }}
                                    </h5>
                                    {{ Country()->currancy_code }}
                                </div>
                            </div>
                        </div>
                        
                        <div class="row w-100">
                            <div class="w-50">
                                <button  type="button" class="btn btn-secondary transition-me border-0 px-5 py-3 w-100 mb-3"  data-bs-dismiss="modal">@lang('trans.close')</button>
                            </div>
                            <div class="w-50">
                                <button type="submit" form="pro-{{ $Product->sub_category_id }}-form" class="main_bt transition-me border-0 px-1 py-3 w-100 mb-3">@lang('trans.addToCart')</button>
                            </div>
                        </div>
                        
                    </div>
                </div>

                
            </form>
        </div>
    </div>

</div>



@endsection