@extends('layouts.web')

@if (!empty($event->meta_pixel) && !$view_company)
    @push('styles-alt')
        {!! $event->meta_pixel !!}
    @endpush
@endif

@section('content')
    <main class="eventos web">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="card card-event-detail">
                        <div class="card-header">
                            {{ $event->name }}
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-6">
                                    <figure>
                                        <img src="{{ $event->image ? url('storage/'.$event->image) : asset('images/preview-default.png') }}" class="card-detail-img img-fluid" alt="{{ $event->name }}">
                                    </figure>
                                </div>
                                <div class="col-lg-6">
                                    @foreach ($sales as $sale)
                                        <div class="row events-row">
                                            <div class="col-md-7">
                                                <h5>
                                                    @foreach ($sale['dates'] as $date)
                                                        {{ ($date['date_formated']) }} <br>
                                                    @endforeach
                                                </h5>
                                                <p>
                                                    {{ $event->place }}<br>
                                                    {{ $date['time_formated'] }}
                                                </p>
                                                @if (!$view_company)
                                                    {{-- <p>
                                                        <a href="#" class="btn-calendar">
                                                            <i class="fa fa-calendar" aria-hidden="true"></i>
                                                            AGREGAR A CALENDARIO
                                                        </a>
                                                    </p> --}}
                                                @endif
                                            </div>
                                            <div class="col-md-5 actions">
                                                                                                <button type="button" class="btn btn-outline-secondary with-caret btn-prices"
                                                    data-container="body"
                                                    data-toggle="popover"
                                                    data-placement="left"
                                                    data-content="{{ $precios }}"
                                                    title="Precios">
                                                    Precios
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary with-caret btn-prices d-none"
                                                    data-tickets="{{ json_encode($sale['tickets']) }}">
                                                    Precios
                                                </button>
                                                <button type="button" class="btn btn-primary btn-buy"
                                                    data-tickets="{{ json_encode($sale['tickets']) }}"
                                                    data-dates="{{ json_encode($sale['dates']) }}"
                                                    data-place="{{ $event->place }}"
                                                    data-time="{{ $date['time_formated'] }}"
                                                    data-configuration="{{ json_encode($event->configuration) }}"
                                                    data-date_ends_sales="{{ formatDate($event->date_ends_sales, 'Y-m-d H:i:s', 'd/m/Y') }}">
                                                    {{-- COMPRAR --}}
                                                    COMPRAR
                                                </button>
                                            </div>
                                        </div>
                                    @endforeach
                                    @if (!$view_company)
                                        <div class="row events-row">
                                            <div class="col-lg-6">
                                                @if ($event->map)
                                                    <h5>UBICACIÓN</h5>
                                                    <p>
                                                        <a href="#" class="btn-google-maps" data-toggle="modal" data-target="#modalMap">
                                                            <i class="fa fa-map-marker" aria-hidden="true"></i>
                                                            VER MAPA
                                                        </a>
                                                    </p>
                                                @endif
                                            </div>
                                            <div class="col-lg-6 wrapper-share">
                                                <span class="span-label d-block text-right">Compartir: </span>
                                                <div class="d-flex justify-content-end">
                                                    {!! generateShareLinks(Request::url(), $event->name) !!}
                                                </div>
                                            </div>
                                        </div>
                                    @endif


                                    @if ($event->description)
                                        <div class="description">
                                            <h5>DESCRIPCIÓN</h5>
                                            {!! nl2br($event->description) !!}
                                        </div>
                                    @endif
                                    @if (!$view_company)
                                        @if ($event->faq)
                                            <div class="faqs">
                                                <h5>PREGUNTAS FRECUENTES</h5>
                                                {!! $event->faq !!}
                                            </div>
                                        @endif
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Modal -->
    <div class="modal fade modalPrice" id="modalPrice" tabindex="-1" role="dialog" aria-labelledby="modalPriceTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalPriceTitle">Precios</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="modalBuy" tabindex="-1" role="dialog" aria-labelledby="modalBuyTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <form action="{{ $view_company ? route('access.event.confirm', $event->slug) : route('web.event.confirm', $event->slug) }}" method="post" id="frm-confirm-buy">
                    @csrf
                    @method('POST')

                    <div class="modal-header">
                        <h5 class="modal-title" id="modalBuyTitle">{{ $event->name }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <div class="wrapper-info">
                            {{-- <img src="{{ asset('images/payments-ico.png') }}" alt="Métodos de pago"> --}}
                        </div>
                        <div class="wrapper-btn">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">CANCELAR</button>
                            <button type="submit" class="btn btn-primary">
                                CONFIRMAR REGISTRO
                                {{-- CONFIRMAR COMPRA --}}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade modal-web" id="modalMap" tabindex="-1" role="dialog" aria-labelledby="modalMapTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalMapTitle">
                        <i class="fa fa-map-marker" aria-hidden="true"></i>
                        MAPA DE UBICACIÓN DEL EVENTO
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @if($event->map)
                        @if(strpos($event->map, '<iframe') !== false)
                            {!! $event->map !!}
                        @else
                            <iframe src="{{ $event->map }}" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        @endif
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    @parent

    <!-- Go to www.addthis.com/dashboard to customize your tools -->
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5d67ef6d7765b282"></script>

    <script src="{{ asset('js/web/event.js') }}"></script>
    <script>
        (function() {
            window.inputNumber = function(el) {
                var min = el.attr('min') || false;
                var max = el.attr('max') || false;
                var els = {};
                els.dec = el.prev();
                els.inc = el.next();

                el.each(function() {
                    init($(this));
                });

                function init(el) {
                    els.dec.on('click', decrement);
                    els.inc.on('click', increment);

                    function decrement() {
                        var amount = parseFloat($(els.dec).data('amount'));
                        var value = el[0].value;
                        value--;
                        if (!min || value >= min) {
                            el[0].value = value;
                        }
                        totalize();
                    }

                    function increment() {
                        var amount = parseFloat($(els.inc).data('amount'));
                        var value = el[0].value;
                        value++;
                        if (!max || value <= max) {
                            el[0].value = value++;
                        }
                        totalize();
                    }

                    function totalize() {
                        var total_amount = 0;
                        var total_number = 0;
                        $('[name="number[]"]').each(function(e) {
                            var cant         = parseInt($(this).val());
                            var amount       = parseFloat($(this).data('amount'));
                            var total        = cant * amount;
                                total_amount = parseFloat(total_amount + total);
                                total_number = total_number + cant;
                        });
                        $('#total-amount-money').val(total_amount.toFixed(2));
                        $('#total-amount').html($('#total-amount-money').val());
                        $('#total-number').html(total_number);
                    }
                }
            }
        })();
        inputNumber($('.input-number'));
    </script>
@endsection