@extends('layouts.store.master')
@section('meta_tags')
    <meta id="errors" content="{{ $errors }}">
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendor/toastr/toastr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/store/checkout.css') }}">
    <style >
        [data-tip] {
            position:relative;
        }
        [data-tip]:before {
            content:'';
            /* hides the tooltip when not hovered */
            display:none;
            content:'';
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid #1a1a1a;
            position:absolute;
            top:30px;
            left:35px;
            z-index:8;
            font-size:0;
            line-height:0;
            width:0;
            height:0;
        }
        [data-tip]:after {
            display:none;
            content:attr(data-tip);
            position:absolute;
            top:35px;
            left:0px;
            padding:5px 8px;
            background:#0077C8;
            color:#fff;
            z-index:9;
            font-size: 0.75em;
            height:22px;
            line-height:18px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            white-space:nowrap;
            word-wrap:normal;
        }
        [data-tip]:hover:before,
        [data-tip]:hover:after {
            display:block;
        }
        @media only screen and (max-width: 600px){
            [data-tip]:after {
                display:none;
                content:attr(data-tip);
                position:absolute;
                top:35px;
                left:0px;
                padding:5px 8px;
                background:#0077C8;
                color:#fff;
                z-index:9;
                font-size: 0.75em;
                height:52px;
                line-height:18px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
                white-space:nowrap;
                word-wrap:normal;
                white-space: pre-line;
            }
        }
    </style>
@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 validateMyForm();">
        @csrf
        <div style="margin-left:25px; background: rgba(165, 165, 165, .1);"> <label style="color: #0077C8;"> Carrito </label> > información > Envios > Pago</div>
        <div class="row mx-0">
            <div class="col-md-7 col-sm-12 pt-3">
                <section class="checkout-section-text">
                    <p class="fw-bolder checkout-section-title" style="font-family: Helvetica-Nueue-Bold;">Información de contacto</p>
                    @if(!isset($_COOKIE['tokenUser']) && empty($_COOKIE['tokenUser']))
                        <div class="py-2">   Comprar como invitado o
                            <a data-bs-toggle="modal" data-bs-target="#login_modal" style="color: black; text-decoration: underline;"> iniciar sesión </a>
                        </div>
                    @else
                        <div class="py-2"> </a></div>
                        <a onclick="logOut()" style="color: black; text-decoration: underline;"> Cerrar sesión </a>
                    @endif

                    <div class="row">
                        <div class="col-lg-6 col-md-12 col-sm-12">
                            <div class="form-group">

                                <input name="email" type="email" id="email-info" class="form-control form-control-sm" placeholder="Email">
                                <span id="email_error" class="error-span d-none">Campo requerido</span>
                            </div>
                        </div>
                    </div>
                    <div class="container-fluid px-0 pt-2" style="font-size: 0.8em; color: gray;">
                        <label class="d-block">
                            <input name="newsletter" id="newsletter_and_promotions_suscription" type="checkbox">
                            <span>  Quiero recibir noticias y ofertas exclusivas</span>
                        </label>
                        <label class="d-block pt-2">
                            <input name="blog_suscription" id="blog_suscription" type="checkbox">
                            <span>  Quiero suscribirme al blog</span>
                        </label>
                    </div>
                </section>
                <section class="pt-4 checkout-section-text">
                    <p class="fw-bolder checkout-section-title" style="font-family: Helvetica-Nueue-Bold;">* Forma de entrega</p>
                    <div class="container-fluid px-0 pt-2">
                        <label class="mr-3" style="color:#0077C8 !important">

                            <input id="delivery_type_shipping" name="delivery_type" type="radio" value="s"
                             'checked'>
                            <i class="fa fa-truck mx-2 text-primary" style="color:#0077C8 !important"></i>Envío a domicilio
                        </label>
                        <label style="color:#0077C8 !important">
                            <input id="delivery_type_pickup" name="delivery_type" type="radio" value="p" >
                            <i class="fa fa-store mx-2 text-primary" style="color:#0077C8 !important"></i>Recolección en tienda
                        </label>
                    </div>
                    <span id="delivery_type_error" class="error-span d-none">Campo requerido</span>
                </section>
                @include('store.medicadepot.checkout.information.partials.shipping_form')
                @include('store.medicadepot.checkout.information.partials.pickup_form')
            </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 snot 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 animate__animated animate__fadeInUp">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/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/js/i18n/es.js') }}"></script>
    <script src="{{ asset('vendor/toastr/toastr.min.js') }}"></script>
    <script src="{{ asset('js/store/checkout/information.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA==" crossorigin="anonymous"></script>
    @include('layouts.store.scripts.menu-footer')
    <script type="text/javascript" src="{{asset('/js/slick.min.js')}}"></script>
    <script>

        const errorFields = {
            'email': 'email_error',
            'delivery_type': 'delivery_type_error',
            'shipping.destination_type': 'shipping_destination_type_error',
            'shipping.name': 'shipping_name_error',
            'shipping.street': 'shipping_street_error',
            'shipping.street_number': 'shipping_street_number_error',
            'shipping.house_number': 'shipping_house_number_error',
            'shipping.reference': 'shipping_reference_error',
            'shipping.post_code': 'shipping_post_code_error',
            'shipping.suburb': 'shipping_suburb_error',
            'shipping.city': 'shipping_city_error',
            'shipping.state': 'shipping_state_error',
            'shipping.phone': 'shipping_phone_error'
        };
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('checkout_breadcrumb_information')
            .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) => {
                console.log(key);
                document.getElementById(errorFields[key]).classList.remove('d-none');
            });
        });
    </script>
    @include('store.medicadepot.checkout.scripts.cart_productsjs')
@endpush