@extends('Client.layouts.layout')
@section('title', __('trans.cart')  )
@section('content')

<style>
    .form-check-label{
        font-size: 14px;
    }
</style>

@if ($Cart->count())
    <form action="{{ route('client.select-address') }}" method="GET">
        @csrf

        <div class="bg-ccc py-5">
            <div class="container">
                <div class="row py-2">
                    <div class="col-12">
                        <ul class="breadcrumb wizard">
                          <li class="completed"><a href="{{ route('client.home') }}">@lang('trans.home')</a></li>
                          <li class="not-completed"><a href="javascript:void(0);">{{ __('trans.cart')  }}</a></li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="@if(Deliveries()->count() > 1) col-xl-8 @else col-12 @endif">

                        @foreach ($Cart as $CartItem)     
                            @php
                                $ProPrice = format_number( $CartItem->Product->Quantity->where('size_id',$CartItem->size_id)->where('color_id',$CartItem->color_id)->first()?->CalcPrice() ?? $CartItem->Product->CalcPrice() );
                                $Price = format_number( $CartItem->Product->Quantity->where('size_id',$CartItem->size_id)->where('color_id',$CartItem->color_id)->first()?->Price() ?? $CartItem->Product->Price() );
                                $ItemOptions = $Options->whereIn('id',explode(',', $CartItem->options))->pluck('title')->implode(',');
                            @endphp  
                            <div class="card border shadow-none" id="cart-{{ $CartItem->id }}">
                                <div class="card-body">
                                    <i class="fa-solid fa-circle-xmark text-danger position-absolute h4 point" style="right: 10px;top: 10px;" data-id="{{ $CartItem->id }}"></i>
                                    <div class="d-flex align-items-start border-bottom pb-3">
                                        <div class="me-4">
                                            <img src="{{ asset($CartItem->Product->RandomImage()) }}" alt="" class="avatar-lg rounded" style="margin: 20px;">
                                        </div>
                                        <div class="flex-grow-1 align-self-center overflow-hidden">
                                            <div>
                                                <p style="font-size: 13px !important;" class="text-truncate font-size-18 d-flex justify-content-between"><a href="{{ route('client.product',['title'=>str_replace(' ', '-', $CartItem->Product->title())]) }}" class="text-dark">{{ $CartItem->Product->title() }}</a> </p>
                                                @if ($CartItem->Size)
                                                <p style="font-size: 13px !important;" class="mb-0 mt-1">@lang('trans.size') : <span class="fw-medium">{{ $CartItem->Size->title() }}</span></p>
                                                @endif
                                                @if ($CartItem->Color)
                                                <p style="font-size: 13px !important;" class="mb-0 mt-1">@lang('trans.color') : <span class="fw-medium">{{ $CartItem->Color->title() }}</span></p>
                                                @endif
                                                @if ($ItemOptions)
                                                <p style="font-size: 13px !important;" class="mb-0 mt-1"><span class="fw-medium">{{ $ItemOptions }}</span></p>
                                                @endif
                                                @if ($CartItem->note)
                                                <p style="font-size: 13px !important;" class="mb-0 mt-1"><span class="fw-medium">{{ $CartItem->note }}</span></p>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div>
                                        <div class="row">
                                            <div class="col-4 col-md-4">
                                                <div class="mt-3">
                                                    <p class="text-muted mb-2">@lang('trans.Price')</p>
                                                    <div class="">@if ($CartItem->Product->HasDiscount()) <small class="text-danger" style="text-decoration: line-through">{{ $Price }}</small> @endif {{ $ProPrice }} {{ Country()->currancy_code }}</div>
                                                </div>
                                            </div>
                                            <div class="col-4 col-md-5">
                                                <div class="mt-3">
                                                    <p class="text-muted mb-2">@lang('trans.Quantity')</p>
                                                    <div class="d-inline-flex">
                                                        <div class="number d-flex align-items-center">
                                                            <span data-id="{{ $CartItem->id }}" class="plus">+</span>
                                                            <input data-price="{{ $ProPrice  }}" data-exclusive-vat="{{ $CartItem->Product->VAT == 'exclusive' ? $ProPrice : 0  }}" data-id="{{ $CartItem->id }}"  data-max="{{ $CartItem->Product->Quantity->where('size_id',$CartItem->size_id)->where('color_id',$CartItem->color_id)->first()?->quantity }}"  data-discount="{{ format_number($Price ) -  $ProPrice }}" type="text" class="form-control border-0" value="{{ $CartItem->quantity }}" readonly />
                                                            <span data-id="{{ $CartItem->id }}" class="minus">-</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-4 col-md-3">
                                                <div class="mt-3">
                                                    <p class="text-muted mb-2">@lang('trans.Total')</p>
                                                    <p><span id="total-{{ $CartItem->id }}">{{ $ProPrice * $CartItem->quantity }}</span> {{ Country()->currancy_code }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        @endforeach

                    </div>

                    <div class="@if(Deliveries()->count() > 1) col-xl-4 @else d-none @endif">
                        <div class="mt-5 mt-lg-0">
                            <div class="card border shadow-none" style="text-align: inherit">
                                <div class="card-header bg-transparent border-bottom py-3 px-4">
                                    <h5 class="font-size-16 mb-0">@lang('trans.Delivery Information')</h5>
                                </div>
                                <div class="card-body p-4 pt-2">
                                    <div class="table-responsive">
                                        <table class="table mb-0">
                                            <tbody>
                                                @foreach (Deliveries() as $Delivery)
                                                    @if($Delivery->id == 1)
                                                        <tr>
                                                            <td>
                                                                <div class="form-check form-check-inline">
                                                                    <label for="del-{{ 1 }}">
                                                                        <img src="{{ asset('assets/img/delivery.png') }}" alt="delivery" style="max-width: 50px;margin: 0px 5px">
                                                                    </label>
                                                                    <input class="form-check-input" style="margin-top: 15px;" type="radio" name="delivery_id" id="del-{{ 1 }}" value="{{ 1 }}" @checked($loop->first)>
                                                                    <label class="form-check-label" style="font-size: 12px;" for="del-{{ 1 }}">{{ $Delivery->title() }} ( @lang('trans.inside-country',['country_name' => Country()->title()]) )</label>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @else
                                                        <tr>
                                                            <td>
                                                                <div class="form-check form-check-inline">
                                                                    <label for="del-{{ $Delivery->id }}">
                                                                        @if ($Delivery->id == 1)
                                                                            <img src="{{ asset('assets/img/delivery.png') }}" alt="delivery" style="max-width: 50px;margin: 0px 5px">
                                                                        @elseif ($Delivery->id == 2)
                                                                            <img src="{{ asset('assets/img/pickup.png') }}" alt="delivery" style="max-width: 50px;margin: 0px 5px">
                                                                        @else
                                                                            <img src="{{ asset('assets/img/dinein.svg') }}" alt="delivery" style="max-width: 50px;margin: 0px 5px">
                                                                        @endif
                                                                    </label>
                                                                    <input class="form-check-input" style="margin-top: 15px;" type="radio" name="delivery_id" id="del-{{ $Delivery->id }}" value="{{ $Delivery->id }}" @checked($loop->first)>
                                                                    <label class="form-check-label" style="font-size: 12px;" for="del-{{ $Delivery->id }}">{{ $Delivery->title() }}</label>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endif
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="mt-5 mt-lg-0">
                            <div class="row">
                                <div class=" col-xl-8 ">
                                    <div class="m-3">
                                        <div id="tabby" class="m-auto"></div>
                                    </div>
                                    <div class="m-3" id="tamara-widget-container">
                                        <tamara-widget type="tamara-summary" amount="350" inline-type="2" inline-variant="outlined" config='{"badgePosition":"right","showExtraContent":""}'></tamara-widget>
                                    </div>
                                </div>
                            </div>
                            <div class="card border shadow-none" style="text-align: inherit">
                                <div class="card-header bg-transparent border-bottom py-3 px-4">
                                    <h5 class="font-size-16 mb-0">@lang('trans.Summary')</h5>
                                </div>
                                <div class="card-body p-4 pt-2">
                                    <div class="table-responsive">
                                        <table class="table mb-0">
                                            <tbody>
                                                <tr>
                                                    <td>@lang('trans.sub_total') :</td>
                                                    <td class="text-end">{{ Country()->currancy_code }} <span id="sub_total">1</span> </td>
                                                </tr>
                                                <tr>
                                                    <td>@lang('trans.Discount') : </td>
                                                    <td class="text-end">- {{ Country()->currancy_code }} <span id="discount">1</span> </td>
                                                </tr>
                                                <tr>
                                                    <td style="font-size: 13px;">@lang('trans.vat') ( {{ setting('VAT') }}% ) : </td>
                                                    <td class="text-end">{{ Country()->currancy_code }} <span id="vat">1</span> </td>
                                                </tr>
                                                <tr class="bg-light">
                                                    <th>@lang('trans.netTotal') :</th>
                                                    <td class="text-end">
                                                        <span class="fw-bold">
                                                            {{ Country()->currancy_code }} <span id="netTotal">1</span>
                                                        </span>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-1     mt-lg-0">
                    <div class="row my-1" style="direction: ltr;">
                        @if(lang('ar'))
                        <div class="col-6 text-start">
                            <button type="submit" style="width: max-content;padding: 8px;" class="btn main_bt"><i class="fa-regular fa-circle-check me-1"></i> @lang('trans.check_out') </button>
                        </div>
                        <div class="col-6 text-end">
                            <a style="width: max-content;padding: 8px;" href="{{ route('client.home') }}" class="btn btn-dark"> @lang('trans.Continue Shopping') <i class="fa-solid fa-angle-right me-1"></i> </a>
                        </div>
                        @endif
                        @if(lang('en'))
                        <div class="col-6 text-start">
                            <a style="width: max-content;padding: 8px;" href="{{ route('client.home') }}" class="btn btn-dark"> <i class="fa-solid fa-angle-left me-1"></i> @lang('trans.Continue Shopping')</a>
                        </div>
                        <div class="col-6 text-end">
                            <button type="submit" style="width: max-content;padding: 8px;" class="btn main_bt"><i class="fa-regular fa-circle-check me-1"></i> @lang('trans.check_out') </button>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </form>
@else
    <div class="row">
        <div class=" text-center">
            <img src="{{ asset('assets/img/empty-cart.png') }}" alt="empty-cart" style="max-width: 500px">
            <h2>@lang('trans.Empty Shopping Cart.')</h2>
        </div>
    </div>
@endif
@endsection




@push('js')
    <script src="https://checkout.tabby.ai/tabby-promo.js"></script>
@endpush



@push('css')
  <script>
    window.tamaraWidgetConfig = {
        lang: "{{ lang() }}",
        country: "SA",
        publicKey: "{{ env('TAMARA_PUBLIC') }}"
    }
  </script>
  <script defer type="text/javascript" src="https://cdn.tamara.co/widget-v2/tamara-widget.js"></script>
@endpush



@push('js')
<script>

    $(document).on("click", ".fa-circle-xmark", function () {
        id = $(this).attr('data-id');
        $('#cart-'+id).remove();
        if($('.number').length == 0){
            location.reload(true);
        }
        $.ajax({
            url: "{{ route('client.deleteitem') }}",
            dataType: "json",
            type: "POST",
            async: true,
            data: {
                id: id
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (data) {
                toast(data.type,data.message);
                calc();
            }
        });
    });
    $(document).on("click", ".minus", function () {
        var $input = $(this).parent().find('input');
        var count = parseInt($input.val()) - 1;
        count = count < 1 ? 1 : count;
        $input.val(count);
        $input.change();
        calc();


        id = $(this).attr('data-id');
        $.ajax({
            url: "{{ route('client.minus') }}",
            dataType: "json",
            type: "POST",
            async: true,
            data: {
                id: id,
                count: count,
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (data) {
                toast(data.type,data.message);
            }
        });
    });
    $(document).on("click", ".plus", function () {
        var $input = $(this).parent().find('input');
        var count = parseInt($input.val()) + 1;
        id = $(this).attr('data-id');
        
        if(count <= $(this).parent().find('input').attr('data-max')){
            $.ajax({
                url: "{{ route('client.plus') }}",
                dataType: "json",
                type: "POST",
                async: true,
                data: {
                    id: id,
                    count: count,
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (data) {
                    toast(data.type,data.message);
                    $input.val(count);
                    $input.change();
                    calc();
                }
            });
        }
    });

    function calc(){
        decimals = {{ Country()->decimals }};
        sub_total = 0;
        discount = 0;
        exclusive_sub_total = 0;
        vat_percentage = {{ setting('VAT') ?? 0 }};
        $('.number').each(function(i, obj) {
            total = 0;
            id = parseFloat($(obj).find('input').attr('data-id'));
            quantity = parseFloat($(obj).find('input').val());
            price = parseFloat($(obj).find('input').attr('data-price'));
            discount += parseFloat($(obj).find('input').attr('data-discount')) * parseFloat(quantity);
            total = (parseFloat(price) * parseFloat(quantity));
            $('#total-'+id).html(total.toFixed(decimals));
            sub_total += total;
            
            exclusive_sub_total += parseFloat($(obj).find('input').attr('data-exclusive-vat')) * parseFloat(quantity);
        });
        if(discount <= 0){
            $('#discount').parent().parent().addClass('d-none');
        }else{
            $('#discount').parent().parent().removeClass('d-none');
        }
        vat = exclusive_sub_total/100*vat_percentage;
        netTotal = sub_total + vat;
        sub_total += discount;
        $('#sub_total').html(sub_total.toFixed(decimals));
        $('#discount').html(discount.toFixed(decimals));
        $('#vat').html((sub_total/100*vat_percentage).toFixed(decimals));
        $('#netTotal').html(netTotal.toFixed(decimals));
        
    
        new TabbyPromo({
            selector: '#tabby',
            currency: '{{ currancy_code() }}',
            price: netTotal.toFixed(decimals).toString(),
            installmentsCount: 4,
            lang: '{{ lang() }}',
            source: 'product',
            publicKey: '{{ env('TABBY_PUBLIC') }}',
            merchantCode: '{{ env('TABBY_CODE') }}'
        });
    
            
        const widgetContainer = document.getElementById("tamara-widget-container");
        widgetContainer.innerHTML = '';
        
        const widget = document.createElement('tamara-widget');
        widget.setAttribute('type', 'tamara-summary');
        widget.setAttribute('amount', netTotal);
        widget.setAttribute('inline-type', '3');
        widget.setAttribute('inline-variant', 'outlined');
        widget.setAttribute('config', '{"badgePosition":"right","showExtraContent":""}');
        
        widgetContainer.appendChild(widget);
    }
    calc();
</script>
@endpush



@push('css')
    <style>
        .bg-ccc {
            background-color: #f1f3f7;
        }

        .avatar-lg {
            height: auto;
            /*width: 5rem;*/
            max-height: 5rem
        }

        .font-size-18 {
            font-size: 18px !important;
        }

        .text-truncate {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        a {
            text-decoration: none !important;
        }

        .w-xl {
            min-width: 160px;
        }

        .card {
            margin-bottom: 24px;
            -webkit-box-shadow: 0 2px 3px #e4e8f0;
            box-shadow: 0 2px 3px #e4e8f0;
        }

        .card {
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: #fff;
            background-clip: border-box;
            border: 1px solid #eff0f2;
            border-radius: 1rem;
        }

        .minus,
        .plus {
            width: 20px;
            background: #f2f2f2;
            border-radius: 4px;
            border: 1px solid #ddd;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            cursor: pointer;
        }

        .number input {
            height: 34px;
            width: 100px;
            text-align: center;
            font-size: 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
            display: inline-block;
            vertical-align: middle;
            max-width: 51px;
        }
    </style>

@endpush