@extends('shop.layouts.app')

@section('content')
    <section class="bg-gray-300 py-5">
        <form class="container-wrap" method="POST" action="{{ route('checkout.store') }}">
            @csrf
            <div class="row">
                <div class="col-md-8">
                    <div class="card">
                        <h5 class="card-header">
                            Checkout
                        </h5>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <label for="">First name <span class="text-danger">*<span></label>
                                    <input type="text" name="first_name" class="form-control" value="{{ old('first_name') }}" placeholder="First name" required>
                                    @error('first_name')
                                        <span class="text-danger" >{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-4">
                                    <label for="">Last name <span class="text-danger">*<span></label>
                                    <input type="text" name="last_name" class="form-control" value="{{ old('last_name') }}" placeholder="Last name" required>
                                    @error('last_name')
                                        <span class="text-danger" >{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-4">
                                    <label for="">Email Address <span class="text-danger">*<span></label>
                                    <input type="email" name="email" class="form-control" value="{{ old('email') }}" placeholder="Email Address" required>
                                    @error('email')
                                        <span class="text-danger" >{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-4">
                                    <label for="">Phone Number <span class="text-danger">*<span></label>
                                    <input type="phone" name="phone" class="form-control" value="{{ old('phone') }}" minlength="10" placeholder="Phone Number" required>
                                    @error('phone')
                                        <span class="text-danger" >{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-4">
                                    <label for="">Address <span class="text-danger">*<span></label>
                                    <input type="text" name="address" class="form-control" value="{{ old('address') }}" placeholder="Address" required>
                                    @error('address')
                                        <span class="text-danger" >{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-4">
                                    <label for="">City <span class="text-danger">*<span></label>
                                    <input type="text" name="city" class="form-control" value="{{ old('city') }}" placeholder="City" required>
                                    @error('city')
                                        <span class="text-danger" >{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-4">
                                    <label for="">Provice <span class="text-danger">*<span></label>
                                    <input type="text" name="provice" class="form-control" value="{{ old('provice') }}" placeholder="Provice " required>
                                    @error('provice')
                                        <span class="text-danger" >{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-4">
                                    <label for="">Postal Code <span class="text-danger">*<span></label>
                                    <input type="text" name="postal" class="form-control" value="{{ old('postal') }}" placeholder="Postal Code" required>
                                    @error('postal')
                                        <span class="text-danger" >{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-12 mb-4">
                                    <label for="">Instructions </label>
                                    <textarea name="instration" id="" class="form-control"  rows="5">{{ old('instration') }}</textarea>
                                </div>

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

                <div class="col-md-4">
                    <div class="order-summary">
                        @if ($referral != null)
                            <div class="mb-3 card p-4">
                                <label for="referral" class="mb-0">
                                    <input type="checkbox" name="" data-val="500" id="referral" class="mr-3">
                                    <span>
                                        Use <b>$500.00</b> Referral ammount
                                    </span>
                                </label>
                            </div>
                        @endif


                        <div class=" card p-4">
                            <h5 class="fw6  mb-4">Cart Summary</h5>
                            <div id="short-summery">
                                <div class="row mb-3">
                                    <span class="col-8">Sub Total</span>
                                    <span class="col-4 text-right">${{ core_getCart()->sub_total }}</span>
                                </div>

                                <div class="row mb-3">
                                    <span id="taxrate-0" class="col-8">Discount Amount</span>
                                    <span id="basetaxamount-0" class="col-4 text-right">{{ core_currency_formate(core_getCart()->discount_amount) }}</span>
                                </div>

                                <div class="row mb-3">
                                    <span id="taxrate-0" class="col-8">Tax</span>
                                    <span id="basetaxamount-0" class="col-4 text-right">{{ core_currency_formate(core_getCart()->tax_amount) }}</span>
                                </div>
                                @if ($referral != null)
                                    <div class="row mb-3">
                                        <span id="taxrate-0" class="col-8">Referrel Ammount</span>
                                        <span id="refrrel-ammount" class="col-4 text-right">$0.00</span>
                                    </div>
                                @endif

                            </div>

                            <hr>
                            <div id="grand-total-detail" class="payable-amount row mb-5">
                                <span class="col-8">Grand Total</span>
                                <span id="grand-total-amount-detail" data-val="{{ core_getCart()->grand_total }}" class="col-4 text-right fw6">{{ core_currency_formate(core_getCart()->grand_total) }}</span>
                            </div>

                            <div>
                                <button   class="btn btn-success btn-block btn-lg">Proceed to checkout</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </section>
@endsection

@push('js')
    <script>
        $(function () {
            $('#referral').change(function (e) {
                e.preventDefault();
                var grandTotal = $('#grand-total-amount-detail');
                var grandTotalPrice = grandTotal.attr('data-val');
                if($(this).prop("checked")){
                    var amount = $(this).attr('data-val');
                    $('#refrrel-ammount').html('$' + parseFloat(amount).toFixed(2));
                    var total = parseFloat(amount) - parseFloat(grandTotalPrice)
                    grandTotal.html('$' + parseFloat(total).toFixed(2));
                }else{
                    $('#refrrel-ammount').html('$0.00');
                    grandTotal.html('$' +  parseFloat(grandTotalPrice).toFixed(2));
                }
            });
        });
    </script>
@endpush