@extends('layouts.web')

@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">
                            <form action="{{ route('access.event.confirm', $event->slug) }}" method="post" id="frm-confirm-buy">
                                @csrf
                                @method('POST')

                                <div class="row">
                                    <div class="col-md-4">
                                        <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-md-8">
                                        @foreach ($sales as $sale)
                                            <div class="row events-row">
                                                <div class="col-md-12">
                                                    <h5>
                                                        @foreach ($sale['dates'] as $date)
                                                            {{ ($date['date_formated']) }} <br>
                                                        @endforeach
                                                    </h5>
                                                    <p>
                                                        {{ $event->place }}<br>
                                                        {{ $date['time_formated'] }}
                                                    </p>
                                                </div>

                                                <div class="col-md-12">
                                                    @foreach($sale['tickets'] as $ticket)
                                                        <div class="p-3 mb-3 border rounded-lg">
                                                            <div class="row tickets no-gutters">
                                                                <div class="col-xl-9 col-lg-8 col-md-7">
                                                                    <h5 class="p-0 m-0 font-weight-normal text-secondary">{{ $ticket['name'] }}</h5>
                                                                    <small class="p-0 m-0 d-block">Las ventas finalizan el {{ $ticket['valid_until_formated'] }}</small>
                                                                    <p class="p-0 m-0">Disponibles: {{ $ticket['available_tickets'] }}</p>

                                                                    <div class="d-flex gap-1 flex-wrap" style="gap: 5px;">
                                                                        @for($i = 1; $i <= $ticket['seats']; $i++)
                                                                            <span class="badge badge-{{ in_array($i, $ticket['occupied_seats']) ? 'danger' : 'success' }}">
                                                                                {{ $i }}
                                                                            </span>
                                                                        @endfor
                                                                    </div>
                                                                </div>
                                                                <div class="col-xl-3 col-lg-4 col-md-5">
                                                                    @if ($ticket['error'])
                                                                        <div class="alert alert-danger" role="alert">
                                                                            {{ $ticket['error'] }}
                                                                        </div>
                                                                    @else
                                                                        <input type="hidden" name="ticket_id[]" id="ticket_id_{{ $ticket['id'] }}" value="{{ $ticket['id'] }}">
                                                                        <div class="input-group">
                                                                            <div class="input-group-prepend input-number-decrement" data-amount="{{ $ticket['price'] }}">
                                                                                <span class="input-group-text">-</span>
                                                                            </div>
                                                                            <input type="text" name="number[]" id="number_{{ $ticket['id'] }}" value="0" class="form-control text-center input-number bg-white" data-max="{{ intval($ticket['available_tickets']) }}" readonly />
                                                                            <div class="input-group-append input-number-increment" data-amount="{{ $ticket['price'] }}">
                                                                                <span class="input-group-text">+</span>
                                                                            </div>
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endforeach

                                        @if (!empty($event->configuration['max_tickets']))
                                            @if (parseInt($event->configuration['max_tickets']))
                                                <div class="row">
                                                    <div class="col">
                                                        <div class="alert alert-primary" role="alert">
                                                            Solo puede adquirir {{ parseInt($event->configuration['max_tickets']) }} boleta/s para este evento.
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        @endif

                                        <div class="row totals">
                                            <div class="col-12 d-flex justify-content-end">
                                                <div>
                                                    <div class="total-number">
                                                        <h5 class="font-weight-bold text-dark">TOTAL DE BOLETAS: <span id="total-number" class="text-dark font-weight-bold"></span></h5>
                                                    </div>
                                                    {{-- <div class="total-amount">
                                                        TOTAL: <span id="total-amount">${total_amount.toFixed(2)}</span>
                                                        <input type="text" id="total-amount-money" class="money d-none" value="${total_amount.toFixed(2)}">
                                                    </div> --}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col text-right">
                                        <button type="submit" class="btn btn-primary">
                                            CONFIRMAR REGISTRO
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('scripts')
    @parent

    <script>
        (function() {
            // Function to update total
            function updateTotal() {
                let total = 0;
                document.querySelectorAll('.input-number').forEach(function(input) {
                    const quantity = parseInt(input.value) || 0;
                    total += quantity;
                });

                const totalElement = document.getElementById('total-number');
                if (totalElement) {
                    totalElement.textContent = total;
                }
            }

            // Increment button functionality
            document.querySelectorAll('.input-number-increment').forEach(function(button) {
                button.addEventListener('click', function() {
                    const input = this.parentElement.querySelector('.input-number');
                    const currentValue = parseInt(input.value) || 0;
                    const maxValue = parseInt(input.getAttribute('data-max')) || 0;

                    if (currentValue < maxValue) {
                        input.value = currentValue + 1;
                        updateTotal();
                        // Trigger change event for any listeners
                        input.dispatchEvent(new Event('change'));
                    }
                });
            });

            // Decrement button functionality
            document.querySelectorAll('.input-number-decrement').forEach(function(button) {
                button.addEventListener('click', function() {
                    const input = this.parentElement.querySelector('.input-number');
                    const currentValue = parseInt(input.value) || 0;

                    if (currentValue > 0) {
                        input.value = currentValue - 1;
                        updateTotal();
                        // Trigger change event for any listeners
                        input.dispatchEvent(new Event('change'));
                    }
                });
            });

            // Prevent manual input that exceeds max value
            document.querySelectorAll('.input-number').forEach(function(input) {
                input.addEventListener('input', function() {
                    const value = parseInt(this.value) || 0;
                    const maxValue = parseInt(this.getAttribute('data-max')) || 0;

                    if (value > maxValue) {
                        this.value = maxValue;
                    }
                    if (value < 0) {
                        this.value = 0;
                    }
                    updateTotal();
                });
            });

            // Initialize total on page load
            updateTotal();
        })();
    </script>
@endsection

@section('styles')
    @parent

    <style>
        .input-group-prepend,
        .input-group-append {
            cursor: pointer;
        }

        .input-number {
            font-weight: 700;
        }
    </style>
@endsection