@section('extra-css')
<style>
    .m-r-10 {
        margin-right: 10px !important;
        margin-top: 10px !important;
        padding: 5px;
        display: inline-block;
    }

    .pos-r {
        position: relative !important;
    }

    .image_seat {
        width: 30px !important;
    }

    .image_seat_example {
        width: 30px !important;
    }

    .name_seat {
        position: absolute;
        left: 10px;
        bottom: 0;
    }

    .m-b-10 {
        margin-bottom: 10px !important;
    }

    .cursor {
        cursor: pointer;
    }

    .container_image {
        position: relative;
    }

    .float-left {
        float: left;
    }

    .d-c {
        display: contents;
    }

    .label_letter {
        position: absolute;
        left: 10px;
        margin-bottom: 20px;
    }

    .container_row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .d-i-t {
        /* margin-right: 10px !important; */
        margin-top: 10px !important;
        /* padding: 5px; */
        min-width: 35px;
        display: inline-grid;
    }

    .text-center {
        text-align: center;
    }

    .text-alert {
        color: #a94442;
        text-align: justify;
    }

    .small_price {
        position: absolute !important;
        top: 30px !important;
        right: 15px !important;
        font-size: 100% !important;
        font-weight: bold !important;
    }

    .small_price_abono {
        position: absolute !important;
        top: 11px !important;
        right: 15px !important;
        font-size: 100% !important;
        font-weight: bold !important;
    }

    .m-t-5 {
        margin-top: 5px;
    }

    .bg-seat-selected {
        filter: invert(24%) sepia(53%) saturate(3980%) hue-rotate(232deg) brightness(89%) contrast(97%);
    }

    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        background-color: #fff;
    }

    .buttonBuy {
        margin-top: 8px;
        margin-right: 20px;
    }

    .container_total {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        margin-right: 10px;
        font-weight: bold;
        font-size: 20px;
    }

    .display-contents {
        display: contents;
    }

    .m-r-20 {
        margin-right: 20px;
    }

    .container_form {
        display: flex;
        flex-direction: column;
    }

    .containerCheckbox {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .spinner {
        width: 100px;
    }

    .spinner input {
        text-align: right;
    }

    .input-group-btn-vertical {
        position: relative;
        white-space: nowrap;
        width: 1%;
        vertical-align: middle;
        display: table-cell;
    }

    .input-group-btn-vertical>.btn {
        display: block;
        float: none;
        width: 100%;
        max-width: 100%;
        padding: 8px;
        margin-left: -1px;
        position: relative;
        border-radius: 0;
    }

    .input-group-btn-vertical>.btn:first-child {
        border-top-right-radius: 4px;
    }

    .input-group-btn-vertical>.btn:last-child {
        margin-top: -2px;
        border-bottom-right-radius: 4px;
    }

    .input-group-btn-vertical i {
        position: absolute;
        top: 0;
        left: 4px;
    }

</style>
@extends('modules.head') @section('contenido')
<h3>Venta flash</h3>
<div class="text-center" id="container_event">
    <div class="form-group col-md-12">
        <label for="event_select">{{ Lang::get('messages.tickets.title_20') }}</label>
        <select class="form-control" id="event_select" name="event_select" onchange="selectEvent(this);">
            <option value="0" disabled selected>@lang('messages.select')</option>
            @forelse ($events as $event)
            <option value="{{ $event }}">{{ $event->name }} - {{ $event->event_start }} ({{ $event->zone . ', ' . $event->salable_capacity . ' Max. Capacidad'}})</option>
            @empty
            <option value="0">No hay partidos</option>
            @endforelse
        </select>
    </div>

    <div id="web_price_container" class="displayNone">
        <h3 style="padding-top: 100px !important">Boletas taquilla</h3>
        <div class="form-group col-md-3">
            <label for="web_amount" id="web_amount_label" class="ul-form__label">@lang('messages.flash_ticket.title_11')</label>
            <div class="input-group spinner" id="spinner_web">
                <input type="text" class="form-control" value="0" id="web_amount" name="web_amount" onkeyup="calculateRelativeTotal(this.id);" minvalue="0" style="width: auto;" pattern="[0-9]" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
                <div class="input-group-btn-vertical">
                    <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
                    <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
                </div>
            </div>
        </div>
        <div class="form-group col-md-3">
            <label for="web_text" class="ul-form__label">@lang('messages.flash_ticket.title_13')</label>
            <input type="number" class="form-control" id="web_text" name="web_text" placeholder="" required readonly>
        </div>
        <div class="form-group col-md-3">
            <label for="web_price" class="ul-form__label">@lang('messages.flash_ticket.title_12')</label>
            <input type="number" class="form-control" id="web_price" name="web_price" placeholder="" required readonly>
        </div>
        <div class="form-group col-md-3">
            <label for="web_total_price" class="ul-form__label">@lang('messages.flash_ticket.title_14')</label>
            <input type="number" class="form-control" id="web_total_price" name="web_total_price" placeholder="" required readonly>
        </div>
    </div>

    <div id="special_price_container" class="displayNone">
        <h3 style="padding-top: 100px !important">Boletas especiales</h3>
        <div class="form-group col-md-3">
            <label for="special_amount" class="ul-form__label">@lang('messages.flash_ticket.title_11')</label>
            <div class="input-group spinner" id="spinner_special">
                <input type="text" class="form-control" value="0" id="special_amount" name="special_amount" onkeyup="calculateRelativeTotal(this.id);" minvalue="0" style="width: auto;" pattern="[0-9]" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
                <div class="input-group-btn-vertical">
                    <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
                    <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
                </div>
            </div>
        </div>
        <div class="form-group col-md-3">
            <label for="special_text">{{ Lang::get('messages.flash_ticket.title_13') }}</label>
            <select class="form-control" id="special_text" name="special_text" required>
                <option value="0" disabled selected>@lang('messages.select')</option>
                @forelse ($ticketTags as $ticketTag)
                <option value="{{ $ticketTag->name }}">{{ $ticketTag->name }}</option>
                @empty
                <option value="">No hay etiquetas</option>
                @endforelse
            </select>

        </div>
        <div class="form-group col-md-3">
            <label for="special_price" class="ul-form__label">@lang('messages.flash_ticket.title_12')</label>
            <input type="number" class="form-control" id="special_price" name="special_price" placeholder="" required readonly>
        </div>
        <div class="form-group col-md-3">
            <label for="special_total_price" class="ul-form__label">@lang('messages.flash_ticket.title_14')</label>
            <input type="number" class="form-control" id="special_total_price" name="special_total_price" placeholder="" required readonly>
        </div>
    </div>

    <div id="courtesy_price_container" class="displayNone">
        <h3 style="padding-top: 100px !important">Boletas obsequio</h3>
        <div class="form-group col-md-3">
            <label for="courtesy_amount" class="ul-form__label">@lang('messages.flash_ticket.title_11')</label>
            <div class="input-group spinner" id="spinner_courtesy">
                <input type="text" class="form-control" value="0" id="courtesy_amount" name="courtesy_amount" onkeyup="calculateRelativeTotal(this.id);" minvalue="0" style="width: auto;" pattern="[0-9]" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
                <div class="input-group-btn-vertical">
                    <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
                    <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
                </div>
            </div>

        </div>
        <div class="form-group col-md-3">
            <label for="courtesy_text">{{ Lang::get('messages.flash_ticket.title_13') }}</label>
            <select class="form-control" id="courtesy_text" name="courtesy_text" required>
                <option value="0" disabled selected>@lang('messages.select')</option>
                @forelse ($ticketTags as $ticketTag)
                <option value="{{ $ticketTag->name }}">{{ $ticketTag->name }}</option>
                @empty
                <option value="">No hay etiquetas</option>
                @endforelse
            </select>
        </div>
        <div class="form-group col-md-3">
            <label for="courtesy_price" class="ul-form__label">@lang('messages.flash_ticket.title_12')</label>
            <input type="number" class="form-control" id="courtesy_price" name="courtesy_price" placeholder="" required readonly>
        </div>
        <div class="form-group col-md-3">
            <label for="courtesy_total_price" class="ul-form__label">@lang('messages.flash_ticket.title_14')</label>
            <input type="number" class="form-control" id="courtesy_total_price" name="courtesy_total_price" placeholder="" required readonly>
        </div>
    </div>

    <div id="total_container" class="displayNone">
        <div class="form-group col-md-6">
            <h3 id="available_tickets"></h3>
        </div>
        <div class="form-group col-md-3">
        </div>
        <div class="form-group col-md-3">
            <h2 id="total">Total: $0</h2>
        </div>
    </div>
</div>
<footer class="footer displayNone" id="div_footer">
    <button onClick="buyTickets({{$parameters}})" type="button" class="btn btnBox pull-right buttonBuy">{{ Lang::get('messages.tickets.title_27') }}</button>
</footer>

<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/flash_ticket_selling.js') . '?v=' . time() }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.spinner .btn:first-of-type').on('click', function() {
            spinnerId = $(this).parent().parent().attr('id');
            input = $('#' + spinnerId + ' input');
            val = input.val();
            if (!val) {
                val = 0;
            }
            input.val(parseInt(val, 10) + 1);
            calculateRelativeTotal(input[0].id);
        });
        $('.spinner .btn:last-of-type').on('click', function() {
            spinnerId = $(this).parent().parent().attr('id');
            input = $('#' + spinnerId + ' input');
            val = input.val();
            if (!val) {
                val = 0;
            }
            if (parseInt(input.val(), 10) > 0) {
                input.val(parseInt(input.val(), 10) - 1);
            }
            calculateRelativeTotal(input[0].id);
        });
    });
</script>
@endsection