@extends('bio::layouts.master')
@section('content')

<style>
    .bio-menu{
        display: none !important;
    }

    .bio-wrap{
        width: 46.25rem !important;
    }

    #app-sandy-mix #content, #app-sandy-mix{
        width: 100% !important;
    }

    .coupon-input{
        border: 0 !important;
        font-weight: 700 !important;
        padding: 10px !important;
    }


    @media(min-width: 768px){

        .coupon-input{
            font-size: 18px !important;
        }
    }
</style>

@php
    $countries = [];

    foreach ($shipping as $key => $value) {
        $countries[] = $value->country_iso;
    }
@endphp
<script>
    function _cart(){
        return {
            country: '',
            coupon_code: '{{ $coupon_code }}',
            _previous_type: '{{ $coupon ? $coupon->type : '' }}',
            coupon_response: '',
            total_price: '{!! str_replace('FREE', '', \Bio::price(\DarryCart::session($bio->id)->getTotal(), $bio->id)) !!}',
            countries: {!! json_encode($countries) !!},

            use_coupon(reload = false){

                _this = this;
        
                var data = {
                    coupon_code: _this.coupon_code,
                    previous_type: _this._previous_type,
                };
        
                if (this.field_timer) {
                    clearTimeout(this.field_timer);
                    this.field_timer = null;
                }
        
                this.field_timer = setTimeout(() => {
        
        
                    axios.post("{{ \Bio::route($bio->id, 'sandy-blocks-shop-cart-use-coupon') }}", data).then(response => {
                        var _r = response.data;
                        _this.coupon_response = _r.coupon;
                        _this.total_price = _r.total;
                        _this._previous_type = _r.type;
                        

                        if(reload && _r.reload){
                            location.reload();
                        }
                    });
                }, 800);
            },

            init(){
                this.use_coupon(false);
            }
        }
    }
</script>
<div class="bio-wrap bg-transparent shadow-none relative z-10 pb-20" x-data="_cart">
    <div class="dashboard-header-m md:flex items-center mb-5 px-5 pt-20 md:pt-5">
                        
        <div class="flex items-center mr-auto">
            <a href="{{ url()->previous() }}" class="small-menu-cog rounded-full border-0">
                {!! orion('angle-left-1', 'w-8 h-8') !!}
            </a>
        </div>
    </div>
    <div class="px-5 md:px-0">
        <div class="koon-gray-title my-5 flex items-center justify-between bg-white">
            <div class="-title">{{ __('Order Information') }}</div>
            
            @if ($auth_user = \Auth::user())
            <div class="flex">
                <div class="flex items-center justify-center mr-2">
                    <img src="{{  avatar($auth_user->id)  }}" class="h-6 w-6 rounded-full object-cover" alt="">
                </div>
                <span class="font-black text-lg mr-1 sandy-grey-color-2">{{ __('Not You?') }}</span>
                <a href="{{ route('user-logout') }}" app-sandy-prevent class="font-bold text-lg">{{ __('Logout') }}</a>
            </div>
            @else
            <a href="{{ route('user-login') }}" app-sandy-prevent class="font-bold text-lg">{{ __('Login') }}</a>
            @endif
        </div>
    
        <div class="koon-white-card p-6">
            {!! (new \Sandy\Blocks\shop\Helper\Cart)->get_cart($bio->id, true) !!}

            <hr class="my-6">
            
            <div class="grid grid-cols-2 items-center">
                <div class="font-bold text-base md:text-xl">
                    <span class="md:mr-10">{{ __('Total') }}:</span>
                    <span x-html="total_price + ':'"></span>
                </div>

                <div class="form-input md:ml-auto">
                    <input type="text" class="coupon-input" placeholder="{{ __('Add Coupon Code') }}" name="coupon_code" x-model="coupon_code" x-on:input="use_coupon(true)">

                    <p class="text-xs font-bold text-green-400" x-text="coupon_response"></p>
                </div>
            </div>
        </div>
        <form action="{{ \Bio::route($bio->id, 'sandy-blocks-shop-cart-checkout') }}" method="post">
            @csrf
            <input type="hidden" name="coupon_code" x-model="coupon_code">
        <div class="koon-gray-title my-5 flex flex-col p-6 bg-white">
            <div class="-title pl-5 mb-5">{{ __('Shipping Information') }}</div>

                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 save-old-values">

                    <div class="form-input">
                        <input type="text" name="email" value="{{ \Auth::check() ? \Auth::user()->email : '' }}" placeholder="{{ __('Email') }}">
                    </div>
                    @if (user('settings.store.shipping.enable', $bio->id))
                        <div class="form-input">
                            <input type="text" name="shipping[first_name]" placeholder="{{ __('First Name') }}" value="{{ old('shipping.first_name') }}">
                        </div>
                        <div class="form-input">
                            <input type="text" name="shipping[last_name]" placeholder="{{ __('Last Name') }}">
                        </div>
                        <div class="form-input">
                            <input type="text" name="shipping[phone_number]" placeholder="{{ __('Mobile') }}">
                        </div>
                        <div class="form-input">
                            <select name="shipping[country]" x-model="country">
                                <option value="">{{ __('Country / Region') }}</option>
    
                                @foreach (\Country::list() as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-input">
                            <input type="text" name="shipping[location]" placeholder="{{ __('Location') }}">
                        </div>
                    @endif

                    <div class="form-input md:col-span-2">
                        <select name="payment_method" id="">
                            <option value="">{{ __('Choose Payment Method') }}</option>
                            @foreach ($payments as $k => $v)
                            @if (user("payments.$k.status", $bio->id))
                                <option value="{{ $k }}">{{ ao($v, 'name') }}</option>
                            @endif
                            @endforeach
                        </select>
                    </div>
                </div>
                @if (user('settings.store.shipping.enable', $bio->id))

                    @if (!$shipping->isEmpty())
                    <div class="koon-gray-title my-5 flex items-center justify-between">
                        <div class="-title">{{ __('Shipping Locations') }}</div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        @foreach ($shipping as $ship)
                        <div x-show="country == '{{ $ship->country_iso }}'">
                            <label class="sandy-big-checkbox koon-checkbox">
                                <input name="shipping_location" value="{{ $ship->id }}" class="sandy-input-inner" type="radio" data-shipping-price="{!! \Bio::price($ship->price, $bio->id) !!}">
                                <div class="checkbox-inner">
                                    <div class="h-10 w-10">
                                        <img data-src="{{ \Country::icon($ship->country_iso) }}" class="lozad rounded-full w-full h-full object-cover" alt="">
                                    </div>
                                    <div class="content ml-2 truncate">
                                        <h1 class="font-bold truncate">{{ $ship->name }}</h1>
                                        <p class="font-10">{!! \Bio::price($ship->price, $bio->id) !!}</p>
                                    </div>
                                </div>
                            </label>
                        </div>
                        @endforeach
                    </div>

                    @if (user('settings.store.shipping.type', $bio->id))
                        <div x-show="!countries.includes(country)" class="text-sm font-bold text-red-400">{{ __('We cannot ship to the selected country.') }}</div>
                    @endif

                    @endif
                @endif
    
                @if (!\DarryCart::session($bio->id)->isEmpty())
                <div class="cart-receipt hidden">
                    <div class="cart-wrap">
                        @if (user('settings.store.shipping.enable', $bio->id))
                        <div class="flex justify-between mb-5">
                            <div class="cart-text font-bold text-lg">{{ __('Shipping') }}:</div>
                            <div class="text-gray-500 text-lg shipping-total">-</div>
                        </div>
                        @endif
                        <div class="flex justify-between mb-5">
                            <div class="cart-text font-bold text-lg">{{ __('Quantity') }}:</div>
                            <div class="text-gray-500 text-lg">{!! nr(\DarryCart::session($bio->id)->getTotalQuantity(), 2, true) !!}</div>
                        </div>
                        <div class="flex justify-between">
                            <div class="cart-text font-bold text-lg">{{ __('Total') }}:</div>
                            <div class="text-gray-500 text-lg">{!! \Bio::price(\DarryCart::session($bio->id)->getTotal(), $bio->id) !!} <span class="shipping-total"></span></div>
                        </div>
                    </div>
                </div>
                @endif
        </div>
        <button class="koon-btn-dark mt-5 " >{{ __('Pay') }}</button>
      </div>
    </form>
</div>
@section('footerJS')
<script>
jQuery('[data-shipping-price]').each(function(){
var price = jQuery(this).data('shipping-price');
jQuery(this).on('change', function(){
jQuery('.shipping-total').text(' + ' + price);
});
});

</script>
@stop
@endsection