@extends('layouts.appGeneral') 

@section('section')   
        <!--Body Content-->
        <div id="page-content">
            <!--Page Title-->
            <div class="page section-header text-center">
                <div class="page-title">
                    <div class="wrapper"><h1 class="page-width">Checkout</h1></div>
                  </div>
            </div>
            <!--End Page Title-->
            
            <div class="container">
                @if (!auth()->check())
                <form action="{{route('CheckoutLogin.index')}}" method="POST">
                    @csrf
                <div class="row">
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 mb-6">
                        <div class="customer-box returning-customer">
                            <h3><i class="icon anm anm-user-al"></i> ¿Eres cliente? <a href="#customer-login" id="customer" class="text-white text-decoration-underline" data-toggle="collapse">HAGA CLIC AQUÍ PARA INGRESAR</a></h3>
                            <div id="customer-login" class="collapse customer-content">
                                <div class="customer-info">
                                    <p class="coupon-text">Si ha comprado con nosotros anteriormente, ingrese sus datos en los cuadros a continuación. Si es un cliente nuevo, vaya a la sección Facturación y envío. </p>
                                        <div class="row">
                                            <div class="form-group col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                                <label for="exampleInputEmail1">Email <span class="required-f">*</span></label>
                                                <input type="email" name="email" class="no-margin" id="exampleInputEmail1">
                                            </div>
                                            <div class="form-group col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                                <label for="exampleInputPassword1">Password <span class="required-f">*</span></label>
                                                <input type="password" name="password" id="exampleInputPassword1">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <!--<div class="form-check width-100 margin-20px-bottom">
                                                    <label class="form-check-label">
                                                        <input type="checkbox" class="form-check-input" value=""> Remember me!
                                                    </label>
                                                    <a href="#" class="float-right">Forgot your password?</a>
                                                </div>-->
                                                <button type="submit" class="btn btn-primary mt-3">Ingresar</button>
                                            </div>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </form>
                @endif
                <form action="{{route('add_pago.index')}}" method="POST">
                    @csrf
                <div class="row billing-fields">
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 sm-margin-30px-bottom">
                        <div class="create-ac-content bg-light-gray padding-20px-all">
                            
                                <fieldset>
                                    <h2 class="login-title mb-3">DETALLES DE FACTURACIÓN</h2>
                                    <div class="row">
                                        <div class="form-group col-md-12 col-lg-12 col-xl-12 required">
                                            <label for="input-firstname">Nombre <span class="required-f">*</span></label>
                                            @if (auth()->check())
                                            <input name="nameCustomer" value="{{auth()->user()->name}}" id="input-firstname" type="text" disabled>
                                            @else
                                            <input name="nameCustomer" value="" id="input-firstname" type="text">
                                            @endif
                                            
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-md-6 col-lg-6 col-xl-6 required">
                                            <label for="input-email">E-Mail <span class="required-f">*</span></label>
                                            @if (auth()->check())
                                            <input name="email" value="{{auth()->user()->email}}" id="input-email" type="email" disabled>
                                            @else
                                            <input name="email" value="" id="input-email" type="email">
                                            @endif
                                            
                                        </div>
                                        <div class="form-group col-md-6 col-lg-6 col-xl-6 required">
                                            <label for="input-telephone">Teléfono <span class="required-f">*</span></label>
                                            @if (auth()->check())
                                            <input name="telephone" value="{{auth()->user()->telefono}}" id="input-telephone" type="tel" disabled>
                                            @else
                                            <input name="telephone" value="" id="input-telephone" type="tel">
                                            @endif
                                            
                                        </div>
                                    </div>
                                </fieldset>
    
                                <fieldset>
                                    <div class="row">
                                        <div class="form-group col-md-6 col-lg-6 col-xl-6 required">
                                            <label for="input-country">Tipo de Documento de identificación <span class="required-f">*</span></label>
                                            <select name="typeDocumentCustomer" id="input-country">
                                                @if (auth()->check())
                                                    @foreach ($datos_menu['tipoDocumentoCliente'] as $tipoDocumentoCliente)
                                                        @if ($tipoDocumentoCliente->id == auth()->user()->id_tipo_documento_cliente)
                                                            <option value="{{$tipoDocumentoCliente->id}}" selected>{{$tipoDocumentoCliente->descripcion}}</option>
                                                        @else
                                                            <option value="{{$tipoDocumentoCliente->id}}">{{$tipoDocumentoCliente->descripcion}}</option>
                                                        @endif
                                                    @endforeach
                                                @else
                                                    @foreach ($datos_menu['tipoDocumentoCliente'] as $tipoDocumentoCliente)
                                                        <option value="{{$tipoDocumentoCliente->id}}">{{$tipoDocumentoCliente->descripcion}}</option>
                                                    @endforeach
                                                @endif
                                                
                                            </select>
                                        </div>
                                        <div class="form-group col-md-6 col-lg-6 col-xl-6 required">
                                            <label for="input-postcode">Documento de identificación <span class="required-f">*</span></label>
                                            @if (auth()->check())
                                            <input name="dni" value="{{auth()->user()->dniRUC}}" id="input-postcode" type="text" disabled>
                                            @else
                                            <input name="dni" value="" id="input-postcode" type="text">
                                            @endif
                                            
                                        </div>
                                    </div>
                                </fieldset>
                                @if (!auth()->check())
                                <fieldset>
                                    <div class="row">
                                        <div class="form-group form-check col-md-12 col-lg-12 col-xl-12">
                                            <label class="form-check-label padding-15px-left">
                                                <input type="checkbox" class="form-check-input" name="crearPerfil" value="1"><strong>¿Crea una cuenta ?</strong>
                                            </label>
                                        </div>
                                    </div>
                                </fieldset>
                                @endif
    
                                <fieldset>
                                    <div class="row">
                                        <div class="form-group col-md-12 col-lg-12 col-xl-12">
                                            <label for="input-company">Nota <span class="required-f">*</span></label>
                                            <textarea class="form-control resize-both" rows="3" disabled>{{$datos_menu['note_sale']}}</textarea>
                                        </div>
                                    </div>
                                </fieldset>
                            
                        </div>
                    </div>
    
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                        <div class="your-order-payment">
                            <div class="your-order">
                                <h2 class="order-title mb-4">Resumen de Orden</h2>
    
                                <div class="table-responsive-sm order-table"> 
                                    <table class="bg-white table table-bordered table-hover text-center">
                                        <thead>
                                            <tr>
                                                <th class="text-left">Nombre de Producto</th>
                                                <th>Precio</th>
                                                <th>Cantidad</th>
                                                <th>Subtotal</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($datos_menu['carrito'] as $carrit)
                                                <tr>
                                                    <td class="text-left">{{$carrit->name}}</td>
                                                    <td>s/.{{$carrit->price}}</td>
                                                    <td>{{$carrit->qty}}</td>
                                                    <td>s/. {{$carrit->price * $carrit->qty}}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                        <tfoot class="font-weight-600">
                                            <!--<tr>
                                                <td colspan="4" class="text-right">Shipping </td>
                                                <td>$50.00</td>
                                            </tr>-->
                                            <tr>
                                                <td colspan="3" class="text-right">Total</td>
                                                <td>s/. {{Cart::priceTotal()}}</td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                            
                            <hr />
    
                            <div class="your-payment">
                                <h2 class="payment-title mb-3">COMPROBANTE</h2>
                                <div class="payment-method">
                                    <div class="payment-accordion">
                                        <div id="accordion" class="payment-section">
                                            <div class="card mb-2">
                                                <div class="card-header">
                                                    <a class="card-link" data-toggle="collapse" href="#collapseOne">Tipo de Comprobante </a>
                                                </div>
                                                <div id="collapseOne" class="collapse" data-parent="#accordion"><!--<div id="collapseOne" class="collapse show" data-parent="#accordion">-->
                                                    <div class="card-body">
                                                        <fieldset>
                                                            <div class="row">
                                                                <div class="form-group col-md-6 col-lg-6 col-xl-6 required">
                                                                    <label for="input-country">tipo de Comprobante de pago <span class="required-f">*</span></label>
                                                                    <select name="comprobantePago" class="form-control">
                                                                        <option value="1">SELECCIONAR</option>
                                                                        @foreach ($datos_menu['tipoComprobante'] as $tipoComprobante)
                                                                            <option value="{{$tipoComprobante->id}}">{{$tipoComprobante->descripcion}}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </fieldset>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="order-button-payment">
                                        <button class="btn" style="background-color: #28a745;" value="Place order" type="submit">PAGAR</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            </div>
            
        </div>
        <!--End Body Content-->
@endsection

@section('postFoter')
    <!--Scoll Top-->
    <span id="site-scroll"><i class="icon anm anm-angle-up-r"></i></span>
    <!--End Scoll Top-->
    
    <!--Quick View popup-->
    <div class="modal fade quick-view-popup" id="content_quickview">
    	<div class="modal-dialog">
        	<div class="modal-content">
            	<div class="modal-body">
                    <div id="ProductSection-product-template" class="product-template__container prstyle1">
                <div class="product-single">
                <!-- Start model close -->
                <a href="javascript:void()" data-dismiss="modal" class="model-close-btn pull-right" title="close"><span class="icon icon anm anm-times-l"></span></a>
                <!-- End model close -->
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                        <div class="product-details-img">
                            <div class="pl-20">
                                <img src="{{asset('assets_ecommerce/images/product-detail-page/camelia-reversible-big1.jpg')}}" alt="" />
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="product-single__meta">
                                <h2 class="product-single__title">Product Quick View Popup</h2>
                                <div class="prInfoRow">
                                    <div class="product-stock"> <span class="instock ">In Stock</span> <span class="outstock hide">Unavailable</span> </div>
                                    <div class="product-sku">SKU: <span class="variant-sku">19115-rdxs</span></div>
                                </div>
                                <p class="product-single__price product-single__price-product-template">
                                    <span class="visually-hidden">Regular price</span>
                                    <s id="ComparePrice-product-template"><span class="money">$600.00</span></s>
                                    <span class="product-price__price product-price__price-product-template product-price__sale product-price__sale--single">
                                        <span id="ProductPrice-product-template"><span class="money">$500.00</span></span>
                                    </span>
                                </p>
                                <div class="product-single__description rte">
                                    Belle Multipurpose Bootstrap 4 Html Template that will give you and your customers a smooth shopping experience which can be used for various kinds of stores such as fashion,...
                                </div>
                                
                            <form method="post" action="http://annimexweb.com/cart/add" id="product_form_10508262282" accept-charset="UTF-8" class="product-form product-form-product-template hidedropdown" enctype="multipart/form-data">
                                <div class="swatch clearfix swatch-0 option1" data-option-index="0">
                                    <div class="product-form__item">
                                      <label class="header">Color: <span class="slVariant">Red</span></label>
                                      <div data-value="Red" class="swatch-element color red available">
                                        <input class="swatchInput" id="swatch-0-red" type="radio" name="option-0" value="Red">
                                        <label class="swatchLbl color medium rectangle" for="swatch-0-red" style="background-image:url(assets/images/product-detail-page/variant1-1.jpg);" title="Red"></label>
                                      </div>
                                      <div data-value="Blue" class="swatch-element color blue available">
                                        <input class="swatchInput" id="swatch-0-blue" type="radio" name="option-0" value="Blue">
                                        <label class="swatchLbl color medium rectangle" for="swatch-0-blue" style="background-image:url(assets/images/product-detail-page/variant1-2.jpg);" title="Blue"></label>
                                      </div>
                                      <div data-value="Green" class="swatch-element color green available">
                                        <input class="swatchInput" id="swatch-0-green" type="radio" name="option-0" value="Green">
                                        <label class="swatchLbl color medium rectangle" for="swatch-0-green" style="background-image:url(assets/images/product-detail-page/variant1-3.jpg);" title="Green"></label>
                                      </div>
                                      <div data-value="Gray" class="swatch-element color gray available">
                                        <input class="swatchInput" id="swatch-0-gray" type="radio" name="option-0" value="Gray">
                                        <label class="swatchLbl color medium rectangle" for="swatch-0-gray" style="background-image:url(assets/images/product-detail-page/variant1-4.jpg);" title="Gray"></label>
                                      </div>
                                    </div>
                                </div>
                                <div class="swatch clearfix swatch-1 option2" data-option-index="1">
                                    <div class="product-form__item">
                                      <label class="header">Size: <span class="slVariant">XS</span></label>
                                      <div data-value="XS" class="swatch-element xs available">
                                        <input class="swatchInput" id="swatch-1-xs" type="radio" name="option-1" value="XS">
                                        <label class="swatchLbl medium rectangle" for="swatch-1-xs" title="XS">XS</label>
                                      </div>
                                      <div data-value="S" class="swatch-element s available">
                                        <input class="swatchInput" id="swatch-1-s" type="radio" name="option-1" value="S">
                                        <label class="swatchLbl medium rectangle" for="swatch-1-s" title="S">S</label>
                                      </div>
                                      <div data-value="M" class="swatch-element m available">
                                        <input class="swatchInput" id="swatch-1-m" type="radio" name="option-1" value="M">
                                        <label class="swatchLbl medium rectangle" for="swatch-1-m" title="M">M</label>
                                      </div>
                                      <div data-value="L" class="swatch-element l available">
                                        <input class="swatchInput" id="swatch-1-l" type="radio" name="option-1" value="L">
                                        <label class="swatchLbl medium rectangle" for="swatch-1-l" title="L">L</label>
                                      </div>
                                    </div>
                                </div>
                                <!-- Product Action -->
                                <div class="product-action clearfix">
                                    <div class="product-form__item--quantity">
                                        <div class="wrapQtyBtn">
                                            <div class="qtyField">
                                                <a class="qtyBtn minus" href="javascript:void(0);"><i class="fa anm anm-minus-r" aria-hidden="true"></i></a>
                                                <input type="text" id="Quantity" name="quantity" value="1" class="product-form__input qty">
                                                <a class="qtyBtn plus" href="javascript:void(0);"><i class="fa anm anm-plus-r" aria-hidden="true"></i></a>
                                            </div>
                                        </div>
                                    </div>                                
                                    <div class="product-form__item--submit">
                                        <button type="button" name="add" class="btn product-form__cart-submit">
                                            <span>Add to cart</span>
                                        </button>
                                    </div>
                                </div>
                                <!-- End Product Action -->
                            </form>
                            <div class="display-table shareRow">
                                    <div class="display-table-cell">
                                        <div class="wishlist-btn">
                                            <a class="wishlist add-to-wishlist" href="#" title="Add to Wishlist"><i class="icon anm anm-heart-l" aria-hidden="true"></i> <span>Add to Wishlist</span></a>
                                        </div>
                                    </div>
                                </div>
                        </div>
                </div>
            </div>
                <!--End-product-single-->
                </div>
            </div>
        		</div>
        	</div>
        </div>
    </div>
    <!--End Quick View popup-->
@endsection

@section('script')    
     <!-- Including Jquery -->
     <script src="{{asset('assets_ecommerce/js/vendor/jquery-3.3.1.min.js')}}"></script>
     <script src="{{asset('assets_ecommerce/js/vendor/jquery.cookie.js')}}"></script>
     <script src="{{asset('assets_ecommerce/js/vendor/modernizr-3.6.0.min.js')}}"></script>
     <script src="{{asset('assets_ecommerce/js/vendor/wow.min.js')}}"></script>
     <!-- Including Javascript -->
     <script src="{{asset('assets_ecommerce/js/bootstrap.min.js')}}"></script>
     <script src="{{asset('assets_ecommerce/js/plugins.js')}}"></script>
     <script src="{{asset('assets_ecommerce/js/popper.min.js')}}"></script>
     <script src="{{asset('assets_ecommerce/js/lazysizes.js')}}"></script>
     <script src="{{asset('assets_ecommerce/js/main.js')}}"></script>

     <script src="{{asset('assets_ecommerce/js/sweetalert.js')}}"></script>
     @if (session('login_checkout'))
        <script>
            swal("", "{{session('login_checkout')}}", "warning");
        </script>
     @endif
     @if (session('sale_valid'))
            <script>
                swal("", "{{session('sale_valid')}}", "warning");
            </script>
    @endif
    @livewireScripts
    <script>
        Livewire.on('alertOK',function(menssaje){
            swal("", menssaje, "success");
        })
    </script>
    <script>
        Livewire.on('alertError',function(menssaje){
            swal("", menssaje, "warning");
        })
    </script>

@endsection

@section('fin')
@endsection