@extends('layouts.store.master')
@section('meta_tags')
    <meta id="errors" content="{{ $errors }}">
    <link rel="stylesheet" href="{{ asset('vendor/toastr/toastr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/store/checkout.css') }}">
@endsection
@section('page','Inicio')
@section('classes_body','no-mg no-pd')
@section('body')
    @include('store.medicadepot.checkout.partials.breadcrumbs')
    <form id="information_form" onsubmit="return validateFormShipping();">
        <div style="margin-left:25px; background: rgba(165, 165, 165, .1);">
            <label style="color:#0077C8 !important"> Carrito </label> >
            <label style="color:#0077C8 !important"> información </label> > Envios > Pago
        </div>
        @csrf
        <div class="row mx-0">
            <div class="col-md-7 col-sm-12 pt-3">
                <section class="checkout-section-text">
                    <div id="checkout_shipping_customer_info_card" class="row py-2 mx-0">
                        <div class="row">
                            <div class="col-md-3 col-sm-12 title">Contacto</div>
                            <div class="col-md-7 col-sm-12" id="contact-text"></div>
                            <div class="col-md-2 col-sm-12"><a style="color:#0077C8 !important" href="{{ url('/store') . '/checkout/information?cartId=' .$cartId }}">Cambiar</a></div>
                        </div>
                        <div class="cart-view-product-separator border-bottom my-3" style="width: 98%; margin: 0 auto"></div>
                        <div class="row">
                            <div class="col-md-3 col-sm-12 title">Enviar a</div>
                            <div class="col-md-7 col-sm-12" id="name-text"></div>
                            <div class="col-md-2 col-sm-12"><a style="color:#0077C8 !important" href="{{ url('/store') . '/checkout/information?cartId=' .$cartId }}">Cambiar</a></div>
                        </div>
                    </div>
                </section>
                <section class="pt-4 checkout-section-text">
                    <p class="fw-bolder checkout-section-title" id="shipping-title" style="font-family: Helvetica-Nueue-Bold;">* Métodos de envío</p>
                    <span id="shipping_configuration_error" class="error-span d-none">Campo requerido</span>
                    <div class="container-fluid px-0">
                        <div id="div-cost">

                        </div>
                        <div class="container" style="margin-top:25px">

                            <p style="font-family: Helvetica-Nueue-Bold;">¿Tienes un código de descuento?</p>
                            <div class="row">
                                <div class="col-lg-6">
                                   <input class="form-control form-control-sm" id="code-coupon" type="text" placeholder="Ingresa aquí">
                                </div>
                                <div class="col-lg-6">
                                   <a class="btn btn-primary" onclick="checkCoupon()" role="button" style="background:#0077C8 !important">Aplicar</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <button type="submit" class="btn btn-sm btn-primary float-end px-4" style="background:#0077C8 !important">Continuar al pago</button>
            </div>
            <div class="col-md-5 col-sm-12 pt-3 px-0">
                @include('store.medicadepot.checkout.partials.shopping_cart')
            </div>
        </div>
    </form>
    <h5 class="section-title">También te podría interesar</h5>
<!--
    //======================================================================
    //  Undeveloped section
    //======================================================================

    /*
    * The following commented lines do not delete please
    * It has not been fully developed, so it will not yet be presented in production.
    */
-->
    {{--@include('layouts.store.related_products')--}}
    @include('layouts.store.newsletter')
    <h5 class="section-title">Conoce nuestras marcas</h5>
    @include('layouts.store.brand_carousel')
@endsection
@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="{{ asset('vendor/toastr/toastr.min.js') }}"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script>
        const errorFields = {
            'shipping_configuration': 'shipping_configuration_error',
        };
        document.addEventListener('DOMContentLoaded', function() {

            document.getElementById('checkout_breadcrumb_information')
                    .querySelector('span:first-child').classList.add('completed-checkout-step');
            document.getElementById('checkout_breadcrumb_shipping')
                    .querySelector('span:first-child').classList.add('active-checkout-breadcrumb');
            let errors = JSON.parse(document.getElementById('errors').content);
            let errorsKeys = Object.keys(errors);
            errorsKeys.forEach((key) => {
                document.getElementById(errorFields[key]).classList.remove('d-none');
            });
        });
    </script>
    @include('store.medicadepot.checkout.scripts.shippingjs')
    @include('layouts.store.scripts.menu-footer')
@endpush