@extends('front.layouts.demo')
@section('local_styles')
<!---<link rel="stylesheet" href="/css/home.css">-->
<style media="screen">
    tbody {
        font-family: 'Vidaloka', serif;
        font-weight: 400;
    }
    .ticket__title {
        margin: 0; font-size: 1.5em;
    }
    select, [type="number"] {
        border: 1px solid #dddddd;
        height: 45px;
        border-radius: 4px;
        font-family: 'Playfair Display', serif;
        font-size: 1.1em;
        font-weight: 600;
    }
    .add-car{
        padding: 25px 33px;
        height: auto;
    }

        .container-btn{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 0;
        }

        .btn-add{
            background: #3a5737;
            border: 1px solid #3a5737;
            color: #fff;
            font-family: 'Playfair Display', serif;
            min-height: 48px;
            min-width: 180px;
            border-radius: 3px;
            padding: 0.75em 2em;
            font-size: .75em;
            letter-spacing: .03em;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 700;
            cursor: pointer;
            &__icon {
                margin-left: .5em;
                width: 16px;
            }
        }

        @media screen and (max-width: 768px){
            padding: 25px 0;
            .btn-add{
                width: 150px;
                padding: 0 10px;
                font-size: 0.7em!important;
            }
        }
    }

    .td-mobile{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 5px 10px;
        justify-content: space-between;
        @media screen and (min-width: 768px){
            display: none;
        }
    }

    .box-item {
        margin-bottom: 30px;
    }

    .box-style{
        border-bottom: 4px solid #e7e0d5;
        margin-bottom: 4px;
        background: #fff;
    }

    .box-item .description{display: flex}
    
    .box-item .description-txt {
        width: 50%;
        padding: 50px 80px 0 25px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .content-calendar {
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 1.1em;
    }

    .box-item .description-img {
        width: 50%;
        height: 300px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }

    .description-img h1{
        font-size: 2.7em;
        color: #fff;
        font-family: 'bodoni';
        position: absolute;
        z-index: 3;
        width: 100%;
        top: 35%;
        left: 0;
        text-align: center;
        margin: 0
    }

    .description-img .overlay-black{
        position: absolute;
        z-index: 2;
        background-color: rgba(0,0,0,.5);
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        content: "";
    }

    .datecalendar{ 
        border: solid 1px #995561; 
        color: #995561;
    }

    .datecalendar input{ 
        color: #995561 !important;
    }

    .input-group-addon{
        padding: 7px;
        color: #995561;
    }
    
    .box-cards{
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .table_car{
        border-collapse: collapse;
        width: 100%;
        height: 40px;
        color: #2b2722;
    }

    .table-car thead {
        background: #efefef;
        font-weight: 700;
    }

    .table-car thead td { padding: 12px 10px; }

    .table-car tbody td { padding: 18px 10px; }

    .box-item .box-cards .checkout-cards { margin: 0 8px; }

    .box-item .box-cards .checkout-cards--small { width: 40px; }

    .box-item .box-cards .checkout-cards--large { width: 25px; }

    @media screen and (max-width: 768px) {
        h1 {
            font-size: 2.2em;
        }

        span {
            margin-top: 12px;
        }
    }

    .counter {
    position: absolute;
    right: 0;
    top: 160px;
    background: #fff;
    height: 70px;
    width: 43px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 5px 0;
    z-index: 9999;
}
.iconContainer {
    position: relative;
}
.icon {
    width: 20px;
}
.itemCounter {
    font-family: 'Playfair-display', serif;
    font-size: 12px;
    font-weight: 700;
    background-color: #fbda43;
    border-radius: 100%;
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; 
    top: -8px;
    right: -8px;
}

</style>
@endsection
@section('content')

    <div class="bd-example">
        <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
            
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="/img/v2/slides/polo-hero@2880.jpg" class="d-block w-100" alt="La Patrona">
                </div>    
            </div>

        </div>
    </div>

    <div class="counter">
        <a class="iconContainer" href="/demo/checkout">
            <div class="itemCounter"></div>
            <span>
                <img class="icon" src="/img/shop/car-b.png" alt="">
            </span>
        </a>
    </div>

    <div class="py-4">
        <div class="container">
            <div class="row">
                <div class="text-center py-5 bg-line-polo w-100">
                    <h5 class="awesome mb-0 gray">Compra tus</h5>
                    <h1 class="bodoni m-0 wine">boletos</h1>   
                </div>
            </div>
        </div>
    </div>

    <div class="container">
         
         
        @foreach( $campaign as $key )
        
            <div class="row">
                <div class="box-item" >
                    <div class="description box-style">
                        <div class="description-txt">
                            <p>{{$key->overview}}</p>

                            <div class="input-group datecalendar">
                                <div class="input-group-addon">
                                    <i class="fas fa-calendar-alt"></i>
                                </div>
                                <input type="text" class="form-control datepicker_{{ $i }}" id="{{ $key->id }}">
                                                                @foreach( $key->products as $product ) 
                                                                        @if( $x < $countP )
                                                                            @endif
                                                                    @endforeach
                                <input type="hidden" class="enables" id="datesEnables-{{ $i }}" value=",">
                            </div>
                        </div>
                        <div class="description-img" style="background-image: url('{{ $key->image_url }}')">
                            <h1>{{$key->title}}</h1>
                            <div class="overlay-black"></div>
                        </div>
                    </div>
                    <!---->
                    <div class="add-car box-style d-none" id="ticket_{{ $key->id }}">

                    </div>
                </div>
            </div>
                    @endforeach

    </div>
@endsection
@section('local_scripts')
    <script>
        $(function () {

            var divs = document.getElementsByClassName("enables").length;

            var date = new Date();
                date.setDate(date.getDate()), i;

            for( var i=1; i<=divs; i++ ){

                var inputDates = $('#datesEnables-'+i).val();
                var datesEnabled = inputDates.split(',');

                $('.datepicker_'+i).datepicker({
                    format: 'yyyy-mm-dd',
                    beforeShowDay: function (date) {
                        
                        var allDates = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();

                        if(datesEnabled.indexOf(allDates) != -1){
                            return true;
                        }else{
                            return false;
                        }
                    }
                }).on('hide', function(){
            
                    var dates = $(this).val(),
                        pointer = $(this).attr('id');

                    if( dates != "" ){

                        $.ajax({
                            method: 'POST', // Type of response and matches what we said in the route
                            url: '/demo/getproducts', // This is the url we gave in the route
                            data: {'date' : dates, 'id' : pointer}, // a JSON object to send back
                            success: function(response){ // What to do if we succeed
                                //console.log(response); 
                                $('#ticket_' + pointer).removeClass("d-none");
                                $('#ticket_' + pointer).html(response);

                                updateTotal(); addToCart();
                            },
                            error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
                                /* console.log(JSON.stringify(jqXHR));
                                console.log("AJAX error: " + textStatus + ' : ' + errorThrown);*/
                                $('#ticket_' + pointer).removeClass("d-none");
                                $('#ticket_' + pointer).html('<h1>No se encontraron boletos disponibles</h1>');
                            }
                        });

                        $('#ticket_' + pointer).removeClass("d-none");
                    }
                        
                });
            }

            function updateTotal(){
                $('.ticket').change(function(){
                    var id = $(this).attr('id'),
                        price = $('#price_'+id).val(),
                        amount = $(this).val();
                    var sum = price * amount;
                    $('#total_'+id).html(sum);
                })
            }

            function addToCart(){

                $(document).on('click', '.btn-add', function(){
                    
                    var id = $(this).attr('target'),
                        tickets = $('#'+id).val();

                    
                    /**
                        product_id : this.selectedProduct.id,
                        quantity: this.ticketQuantity
                    **/
                    $.ajax({
                        method: 'POST', // Type of response and matches what we said in the route
                        url: '/checkout/add-to-cart', // This is the url we gave in the route
                        data: {product_id: id, quantity: tickets}, // a JSON object to send back
                        success: function(response){ // What to do if we succeed
                            //console.log(response); 
                            // $('#ticket_' + pointer).removeClass("d-none");
                            // $('#ticket_' + pointer).html(response);

                            // updateTotal();
                            console.log(response);
                        },
                        error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
                            console.log(JSON.stringify(jqXHR));
                            console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
                            // $('#ticket_' + pointer).removeClass("d-none");
                            // $('#ticket_' + pointer).html('<h1>No se encontraron boletos disponibles</h1>');
                        }
                    });
                })
            }
                
        });
    </script>
@endsection