@extends('layouts.front')

@section('title')
    @lang('Payment')
@endsection

@section('styles')
    <style>
        table a:not(.btn), .table a:not(.btn) {
            text-decoration: none;
        }
        .cart-header {
            font-size: 1.1em;
        }
        .img-box img{
            height: 80px;
            width: auto!important;
        }
        .product-image{
            width:100%!important;
        }
        input#coupon-btn {
            margin-top: 16px;
        }
        @media screen and (max-width: 767px) {
            input#coupon-btn {
                margin-top: 0px;
            }
        }
    </style>
    <style>
        table {
          border: 1px solid #ccc;
          border-collapse: collapse;
          margin: 0;
          padding: 0;
          width: 100%;
          table-layout: fixed;
        }
        table caption {
          font-size: 1.5em;
          margin: .5em 0 .75em;
        }
        table tr {
          background: #fff;
          border: 1px solid #ddd;
          padding: .35em;
        }
        table th,
        table td {
          padding: .625em;
          text-align: center;
        }
        table th {
          font-size: .85em;
          letter-spacing: .1em;
          text-transform: uppercase;
        }
        .quantity-mid{
            width: 80%;
            margin: auto;
        }
        @media screen and (max-width: 600px) {
          table {
            border: 0;
          }
          table caption {
            font-size: 1.3em;
          }
          table thead {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
          }
          table tr {
            border-bottom: 3px solid #ddd;
            display: block;
            margin-bottom: .625em;
          }
          table td {
            border-bottom: 1px solid #ddd;
            display: block;
            font-size: .8em;
            text-align: right;
            margin-top: 12px;
          }
          table td:before {
            content: attr(data-label);
            float: left;
            font-weight: bold;
            text-transform: uppercase;
          }
          table td:last-child {
            border-bottom: 0;
          }
          .table-size .thumbnail h5 {
            font-size: 10px !important;
          }
        }
        .payment-logo {
            height: 55px;
            width: auto;
        }
        @media (max-width:768px) {
            .cart-container table tr {
               /* display: table-row-group; */
               display: table-row;
            }
            .table-size .thumbnail h5 {
                font-size: 10px !important;
            }
            .img-box img{
                /* float: right; */
            }
        }
    </style>
@endsection

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">
        	<ul class="breadcrumb">
        		<li><a href="{{url('/')}}">@lang('Home')</a></li>
        		<li>@lang('Checkout')</li>
        	</ul>
        </div>
    </div>
</div>
<div class="container mb-100">
    <div class="col-md-12 cart-container">
       <!-- Address  -->
        <div class="ship_details">
            <div class="ship_header col-md-12">
            <div class="col-md-6 head_pt"> 
                @lang('SHIPPING DETAILS:')
            </div>
            <div class="col-md-6 text-right mob-mb13"> 
                {!! Form::open(['method'=>'post', 'action'=>'CheckoutController@changeShippingAddress', 'onsubmit'=>'submit_button.disabled = true; submit_button.value = "' . __('Please Wait') . '"; return true;']) !!}
                    <button type="submit" name="submit_button" class="btn btn-xs adrs_button btn-primary mob-mt46">@lang('Change Address')</button>
                {!! Form::close() !!}
            </div>
            </div>
            <div class="adrs">
                <strong>{{$customer->first_name . ' ' . $customer->last_name}}</strong>,
                {{$customer->address}}
                {{$customer->city . ', ' . $customer->state . ' - ' . $customer->zip}}
                {{$customer->country}}.<br>
                <strong>@lang('Phone:')</strong> {{$customer->phone}}<br>
                <strong>@lang('Email:')</strong> {{$customer->email}}
            </div>
        </div>
    </div>
        @include('includes.form_errors')
        <div class="col-md-9 cart-container cart_table">
            <div class="panel panel-primary">
                <table class="cart-table-responsive">
                    <thead>
                        <tr>
                            <th scope="col">@lang('Image')</th>
                            <th scope="col">@lang('Product Name')</th>
                            <th scope="col">@lang('Quantity')</th>
                            <th scope="col">@lang('Unit Price')</th>
                            <th scope="col">@lang('Total')</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody class="table-size">
                        @foreach($cartItems as $cartItem)
                        <tr>
                            <td class="cart-image">
                                @if($cartItem->options->has('photo'))
                                    @if($cartItem->options->photo)
                                        @php
                                            $image_url = \App\Helpers\Helper::check_image_avatar($cartItem->options->photo, 75);
                                        @endphp
                                        <div class="img-box">
                                            <img class="product-image" width="75"  src="{{$image_url}}" alt="{{$cartItem->name}}"  />
                                        </div>
                                    @else
                                        <div class="img-box">
                                            <img src="https://via.placeholder.com/75x75?text=No+Image" class="product-image" width="75"  alt="{{$cartItem->name}}" />
                                        </div>
                                    @endif
                                @endif
                            </td>
                            <td class="cart-product-name-info">
                                <h4 class='cart-product-description text-left mb-0 mt-0 pt-0'>
                                    <a href="{{route('front.product.show', [$cartItem->options->slug])}}">{{$cartItem->name}}</a>
                                </h4>
                                @if(is_array($cartItem->options->spec) && count($cartItem->options->spec))
                                    <div class="cart-product-info text-left">
                                        @foreach($cartItem->options->spec as $key => $spec)
                                            <span class="product-color">
                                                {{$spec['name']}} : <span> {{$spec['value']}} </span>
                                            </span>
                                            @if(!$loop->last) @endif
                                        @endforeach
                                    </div>
                                @endif
                            </td>
                            
                            <td class="cart-product-quantity">
                                {!! Form::open(['method'=>'patch', 'route'=>['front.cart.update', $cartItem->rowId, $cartItem->qty], 'onsubmit'=>'this.disabled = true; return true;']) !!}
                                    <!-- <div class="row btn_mb_table"> -->
                                        <div class="input-group input-group-sm quantity-mid">
                                            <span class="input-group-btn">
                                                <button type="submit" {{$cartItem->qty == 1 ? 'disabled' : ''}} class="btn btn-success" value="decrease" name="submit">
                                                    <span class="fa fa-minus"></span>
                                                </button>
                                            </span>
                                            <input disabled type="number" value="{{$cartItem->qty}}" class="form-control" step="1" min="0">
                                            <span class="input-group-btn">
                                                <button type="submit" class="btn btn-success" value="increase" name="submit">
                                                    <span class="fa fa-plus"></span>
                                                </button>
                                            </span>
                                        </div>
                                {!! Form::close() !!}
                            </td>
                            <td class="cart-product-sub-total">
                                <span class="cart-sub-total-price">{{currency_format($cartItem->options->unit_price)}}</span>
                            </td>
                            <td class="cart-product-grand-total">
                                <span class="cart-grand-total-price">{{currency_format($cartItem->total)}}</span>
                            </td>
                            <td class="remove-item">
                                {!! Form::open(['method'=>'delete', 'route'=>['front.cart.destroy', $cartItem->rowId], 'onsubmit'=>'submit_button.disabled = true; submit_button.value = "X"; return true;']) !!}
                                    <div class="form-group row rmv_group">
                                        <div class="col-md-3">
                                            {!! Form::submit('X', ['class'=>'btn btn-square btn-xs btn-danger', 'name'=>'submit_button']) !!}
                                        </div>
                                    </div>
                                {!! Form::close() !!}
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <!-- Shipping Details -->
            <div class="row">
                <div class="col-md-12 shipping_details-p">
                    <div class="col-sm-12">
                        <h4>@lang('Select Your Payment Method')</h4>
                        <hr>

                        {!! Form::open(['method'=>'post', 'action'=>'CheckoutController@processPayment', 'onsubmit'=>'submit_button.disabled = true; submit_button.value = "' . __('Please Wait') . '"; return true;']) !!}

                            <div class="radio">
                                @if(config('cod.enable'))
                                <label>
                                    <input id="cod" type="radio" name="options" value="cod" checked>
                                    <img class="payment-logo" src="{{route('imagecache', ['original', 'cod.png'])}}" alt="@lang('Cash on Delivery')" class="img-responsive" />
                                    @lang('Cash on Delivery')
                                </label>
                                <hr>
                                @endif
                                @if(config('razorpay.enable'))
                                <label>
                                    <input id="razorpay" type="radio" name="options" value="razorpay">
                                    <img class="payment-logo" src="{{route('imagecache', ['original', 'banktransfer.png'])}}" alt="@lang('Bank Transfer')" class="img-responsive" />
                                    @lang('Credit/Debit Card/Net Banking/UPI')
                                </label>
                                <hr>
                                @endif
                                
                            </div>
                            <button id="payment_button" class="btn btn-primary" type="submit" name="submit_button">@lang('Place Order')</button>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
            <!-- Shipping Details End -->
        </div>
        <!-- Payment Summary -->
        <div class="col-md-3 cart-container mbtm-30">
            <div class="pay_col_head"> PAYMENT SUMMARY </div>
            <div class="col-md-12 pd_10 pay_col pay-sum" style="">
                <div class="col-md-6 col-sm-6 col-xs-6 bold_head pr-0">
                    <p><span> @lang('Products') </span></p>
                    <p><span> @lang('Sub Total') </span></p>
                    <p><span> @lang('Tax') </span></p>
                    <p><span> @lang('Shipping Cost') </span></p>
                    <p><span> @lang('Discount') </span></p>
                    <p class="font_black"><span> @lang('Total') </span></p>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-6 text-right">
                    <p><span> {{Cart::count()}} items</span></p>
                    <p><span> {{currency_format(Cart::total())}} </span></p>
                    <p>+  {{ currency_format(Cart::totalFloat() * config('settings.tax_rate')/100)}} </p>
                    @if(config('settings.shipping_cost_valid_below') > Cart::totalFloat())
                        <p><span> {{currency_format(config('settings.shipping_cost'))}} </span></p>
                    @else
                        <p><span> Free </span></p>
                    @endif
                    
                    @if(session()->has('coupon_amount') && session()->has('coupon_valid_above_amount') && session('coupon_valid_above_amount') < Cart::totalFloat())
                        @if(session()->has('coupon_code'))
                        <p>-<span> {{currency_format(session('coupon_amount'))}} </span></p>
                        @else
                            <p>-<span> {{currency_format(session('coupon_amount'))}} </span></p>
                        @endif
                    @else
                        <p><span> {{currency_format(0)}} </span></p>
                    @endif

                    
                    @if(config('settings.shipping_cost_valid_below') > Cart::totalFloat())
                        @if(session()->has('coupon_amount') && session()->has('coupon_valid_above_amount') && session('coupon_valid_above_amount') < Cart::totalFloat())
                            <p class="font_black"><span> {{currency_format(config('settings.shipping_cost') + Cart::totalFloat() - session('coupon_amount') + (Cart::totalFloat() * config('settings.tax_rate')) / 100)}} </span></p>
                        @else
                            <p class="font_black"><span> {{currency_format(config('settings.shipping_cost') + Cart::totalFloat() + (Cart::totalFloat() * config('settings.tax_rate')) / 100)}} </span></p>
                        @endif
                    @else
                        @if(session()->has('coupon_amount') && session()->has('coupon_valid_above_amount') && session('coupon_valid_above_amount') < Cart::totalFloat())
                            <p class="font_black"><span> {{currency_format(Cart::totalFloat() - session('coupon_amount') + (Cart::totalFloat() * config('settings.tax_rate')) / 100) }} </span></p>
                        @else
                            <p class="font_black"><span> {{currency_format(Cart::totalFloat() + (Cart::totalFloat() * config('settings.tax_rate')) / 100) }} </span></p>
                        @endif
                    @endif
                </div>
            </div>
            <!-- Coupon Code -->
            <div class="col-md-12 cart-container coupon_top">
                <div class="coupon_form">
                @if(session()->has('coupon_invalid'))
                        <div class="alert alert-danger alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            {{session('coupon_invalid')}}
                        </div>
                    @endif
                    @if(session()->has('coupon_amount') && session()->has('coupon_valid_above_amount') && session('coupon_valid_above_amount') < Cart::totalFloat())
                        @if(session()->has('coupon_code'))
                            <h5 class="text-success">@lang('Coupon Applied:') <span class="text-muted">{{session('coupon_code')}}</span></h5>
                            <h5 class="text-success">@lang('Discount:') <span class="text-muted">{{currency_format(session('coupon_amount'))}}</span></h5>
                        @else
                            <h4>@lang('Coupon Discount:') {{currency_format(session('coupon_amount'))}}</h4>
                        @endif
                        <a id="have-coupon" href="">@lang('Change Coupon?')</a>
                    @else
                        <a id="have-coupon" href=""><img src="{{ asset('img/icons/coupon.png')}}" alt="icon"> @lang('Have a Coupon?')</a>
                    @endif
                    <div class="coupon-box">
                        {!! Form::open(['method'=>'post', 'action'=>'FrontCouponsController@checkCoupon', 'onsubmit'=>'submit_button.disabled = true; submit_button.value = "' . __('Please Wait') . '"; return true;', 'class'=>'form-inline']) !!}
                            <div class="form-group" style="display: grid;">
                            {!! Form::text('coupon', null, ['class'=>'form-control', 'placeholder'=>__('Enter Coupon'), 'required']) !!}
                            </div>
                            {!! Form::submit(__('Apply'), ['id'=>'coupon-btn', 'class'=>'btn btn-primary', 'name'=>'submit_button']) !!}
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
            <!-- Coupon Code End -->
        </div>
        <!-- Payment Summary End -->
        
    </div>
</div>
@endsection