@extends('layouts.front')

@section('title')
    @lang('Shipping Details')
@endsection

@section('scripts')
    <script src="{{asset('js/form-validation-shipping.js')}}"></script>
    <script>
        $(document).ready(function(){
            $('#guest_email').on('blur',function(){
                var guest_email = $(this).val();
                
                
                $.ajax({
                    url: APP_URL+"/ajax/customers/is_email_available",
                    data: {guest_email:guest_email},
                    type: 'post',
                    success: function(response) {
                        if (response.status) {
                            $('#account-notification-message').text(response.message);
                        }
                        if (!response.status) {
                            $('#account-notification-message').text(response.message);
                        }
                    },
                    error: function (request, status, error) {
                        alertError('An error occurred while processing the request');
                    },
                    complete: function (request, status) {
                        // disable_preloader();
                    },
                });
            });
        });
    </script>
@endsection

@section('content')
    <div class="container">
        <ul class="breadcrumb">
            <li><a href="{{url('/')}}">@lang('Home')</a></li>
            <li>@lang('Shipping Details') </li>
        </ul>
    </div>
    <div class="container mb-100">
        <div class="row">
            @if(session()->has('payment_fail'))
                <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>
                    <span class="glyphicon glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                    <strong>&nbsp;@lang('Error:')</strong> {{session('payment_fail')}}
                </div>
            @endif
            @include('includes.form_errors')
        </div>
        <div class="row">
            {!! Form::open(['method'=>'post', 'action'=>'CheckoutGuestController@startPaymentSession', 'id'=>'guest-checkout-shipping']) !!}
            <div class="col-md-7 pl-0">
                <div class="panel panel-primary shipping-details-guest">
                    <div class="panel-body">
                        <div class="col-md-12">
                            <div class="form-group text-center mt-10">
                                <a href="{{route('login')}}" class="btn btn-primary">@lang('Login')</a>
                                <a href="{{route('register')}}" class="btn btn-primary">@lang('Create Account')</a>
                            </div>
                                                 
                            <div class="striped-or-line">
                                <span class="striped-line"></span>
                                <span class="striped-text">Or (Guest Login)</span>
                                <span class="striped-line"></span>
                            </div>
                            {{-- <h4 class="text-center mb-3">Guest Login</h4> --}}
                            <label>Email Address</label>
                            <div>
                                <input class="form-control" type="email" placeholder="Enter email address" required name="email" id="guest_email" value="{{session('guest.email') ?: old('email')}}">
                            </div>
                            <div id="account-notification-message">You can create an account after checkout.</div>  
                        </div>
                    </div>
                </div>
                
                <div class="panel panel-primary shipping-details-guest">
                    <div class="panel-body col-md-12">
                        <div class="row">
                            <h4 class="text-center mb-3">Shipping Details</h4>
                            <div class="col-md-6">
                                <label>First Name <span class="mandatory-red">*</span></label>
                                <div>
                                    <input class="form-control" placeholder="Enter first name" required name="first_name" type="text" id="first_name" value="{{session('guest.first_name') ?: old('first_name')}}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label>Last Name <span class="mandatory-red">*</span></label>
                                <div>
                                    <input class="form-control" placeholder="Enter last name" required name="last_name" type="text" id="last_name" value="{{session('guest.last_name') ?: old('last_name')}}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label>Phone Number <span class="mandatory-red">*</span></label>
                                <div>
                                    <input class="form-control" placeholder="Enter your phone number" required name="phone" type="number" id="phone-number" value="{{session('guest.phone') ?: old('phone')}}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label>City <span class="mandatory-red">*</span></label>
                                <div>
                                    <input class="form-control" placeholder="Enter city" required name="city" type="text" id="city" value="{{session('guest.city') ?: old('city')}}">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <label>Address <span class="mandatory-red">*</span></label>
                                <div>
                                    <textarea class="form-control" placeholder="Enter address" required name="address" id="address" style="height: 90px !important;">{{session('guest.address') ?: old('address')}}</textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <label>Zip/Postal Code <span class="mandatory-red">*</span></label>
                                <div>
                                    <input class="form-control" placeholder="Enter zip/postal code" required name="zip" type="number" id="zip" value="{{session('guest.zip') ?: old('zip')}}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label>State <span class="mandatory-red">*</span></label>
                                <div>
                                    <input class="form-control" placeholder="Enter state" required name="state" type="text" id="state" value="{{session('guest.state') ?: old('state')}}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label>Country <span class="mandatory-red">*</span></label>
                                <div>
                                    <input class="form-control" placeholder="Enter country" required name="country" type="text" id="country" value="{{session('guest.country') ?: old('country')}}">

                                    {{-- <select name="country" id="country" class="form-control">
                                        <option value="India">India</option>
                                    </select> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer text-right">
                        <div class="form-group">
                            <button type="submit" name="submit_button" class="btn btn-primary">@lang('Next')</button>
                        </div>
                    </div>
                </div>
            </div>
            {!! Form::close() !!}
            <div class="col-md-5">
                <div class="panel-primary">
                    <div class="col-md-12 guest-shipping-details">
                        <table class="guest-cart-table">
                            <caption class="slab-font">Order Summary</caption>
                            <tbody>
                                @foreach($cartItems as $cartItem)
                                <tr class="separated">
                                    <td style="width: 20%;">
                                        @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="70"  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="70"  alt="{{$cartItem->name}}" />
                                                </div>
                                            @endif
                                        @endif
                                    </td>
                                    <td> 
                                        <div class="cart-product-name-guest">{{$cartItem->name}}</div>
                                        <div class="cart-product-guest"> 
                                            @if(is_array($cartItem->options->spec) && count($cartItem->options->spec))
                                                @foreach($cartItem->options->spec as $key => $spec)
                                                    <span class="product-color">
                                                        {{$spec['name']}} : <span> {{$spec['value']}} </span>
                                                    </span>
                                                    {{-- @if(!$loop->last) @endif --}}
                                                @endforeach
                                            @endif
                                            <span class="product-color"> Qty : <span> {{$cartItem->qty}} </span> </span>
                                        </div>
                                    </td>
                                    <td class="cart-product-guest-price">{{currency_format($cartItem->total)}}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection