@extends('layouts.guestcommonmaster')

@section('content')

<section class="youplay-banner banner-top youplay-banner-parallax small">
    <div class="image event-image" data-speed="0.4">
	<!-- <img src="{{ asset('guestassets/images/dark/banner-bg-mobile.png') }}" alt="" class="jarallax-img"> -->
    </div>
    <div class="info">
	<div>
	    <div class="container">
		<div class="pt-40 pb-40">
		    <div class="row">
			<div class="col-xs-12 text-center">
			    <h1>FKF NATIONAL SUPER LEAGUE</h1>
			    <div class="h2 mnt-10 mb-40">{{ \Carbon\Carbon::parse($event->start_date)->format('jS F') }} at {{ \Carbon\Carbon::parse($event->start_time)->format('g:i A') }}</div>
			</div>
		    </div>
		    <div class="row">
			<div class="col-md-5">
			    <div class="youplay-match-left">
				<div class="youplay-match">
				    <div class="youplay-match-data text-right">
					<h3>{{ $event->team_a }}</h3>
				    </div>
				    <div class="angled-img">
					<div class="img">
					    <img src="{{ asset('storage/' . $event->team_a_logo) }}" alt="ISHIARA YOUTH">
					</div>
				    </div>
				</div>
			    </div>
			</div>
			<div class="col-md-2 text-center">
			    <div class="youplay-match-vs">
				<span>KICKOFF 3PM</span>
			    </div>
			</div>
			<div class="col-md-5">
			    <div class="youplay-match-right">
				<div class="youplay-match">
				    <div class="angled-img">
					<div class="img">
					    <img src="{{ asset('storage/' . $event->team_b_logo) }}" alt="JNTI FC">
					</div>
				    </div>
				    <div class="youplay-match-data">
					<h3>{{ $event->team_b }}</h3>
				    </div>
				</div>
			    </div>
			</div>
		    </div>
		</div>
	    </div>
	</div>
    </div>
</section>
<!-- /Banner -->
<div class="container youplay-content">
<div class="row">
<div class="col-md-9">
<h2 class="mt-0">EXPLORE & BUY TICKET ONLINE
    <a href="#ticket-section" class="btn btn-default pull-right">To Tickets</a></h2>
<!-- Tickets -->
{{-- <img class="img" src="{{ asset('guestassets/images/3kFC.jpg') }}" alt="3K FC">  --}}

<div class="container">
    <div class="row vertical-gutter">
	<div class="col-md-9">

	    <!-- Pricing Tables -->
	    <h2 class="h1">Ticket Pricing</h2>
		<div class="row vertical-gutter">

		    <div class="youplay-features " id="ticket-section">

			<div class="row">
			    @foreach($non_seasonal_tickets as $ticket)
			    <div class="col-md-4 col-xs-12 mb-4">
				<div class="feature angled-bg">
				    <i class="fa fa-ticket"></i>
				    <h4>{{ $ticket->name }}</h4>
				    <small>{{ $ticket->price }}</small>
				    <br>
				    <a class="btn btn-default btn-lg no-fade" href="{{ route('guest_purchase_ticket', ['id' => $ticket->id]) }}">
					Buy
				    </a>
				</div>
			    </div>
			    @endforeach
			</div>

		    </div>
		</div>

		<div class="row vertical-gutter">

		    <div class="youplay-features " id="ticket-section">


			<div class="row"> <!-- Added row here -->
			    @foreach($seasonal_tickets as $ticket)
			    <div class="col-md-4 col-xs-12 mb-4"> <!-- Added margin-bottom to each ticket -->
				<div class="feature angled-bg">
				    <i class="fa fa-ticket"></i>
				    <h4> {{ $ticket->name }}</h4>
				    <small>{{ $ticket->price }}</small>
				    <br>
				    <a class="btn btn-default btn-lg no-fade" href="{{ route('guest_purchase_ticket', ['id' => $ticket->id]) }}">
					Buy
				    </a>
				</div>
			    </div>
			    @endforeach
			</div>

		    </div>
		</div>

	    <h2 class="h2 mnt-10 mb-40">{{  $event->event_desc }}</h2>
	</div>

	<!-- Right Side -->
	<div class="col-md-3">
	    <!-- Recent Matches -->
	    <div class="side-block">
		<h4 class="block-title">Recent Matches</h4>
		<div role="tabpanel">
		    <ul class="nav nav-tabs mt-20" role="tablist">
			<li role="presentation" class="active">
			    <a href="#widget-match-all" aria-controls="widget-match-all" role="tab" data-toggle="tab" aria-expanded="true">All</a>
			</li>
		    </ul>
		    <div class="tab-content">
			<!-- All Matches -->
			<div role="tabpanel" class="tab-pane pl-0 pr-0 active" id="widget-match-all">
			    <div class="youplay-matches-list">
				<a class="youplay-single-match" title="Game Show GEC" href="#">
				    <div class="pull-left ml-5">
					<div class="angled-img">
					    <div class="img">
						<img src="{{ asset('storage/' . $event->team_a_logo) }}" alt="Team A Logo">
					    </div>
					</div>
				    </div>
				    <div class="pull-left ml-10 mt-10"> vs </div>
				    <div class="pull-left ml-10">
					<div class="angled-img">
					    <div class="img">
						<img src="{{ asset('storage/' . $event->team_b_logo) }}" alt="Team B Logo">
					    </div>
					</div>
				    </div>
				    <div class="label youplay-match-count"></div>
				    <div class="clearfix"></div>
				    <div class="date">{{ \Carbon\Carbon::parse($event->start_date)->format('jS F') }} at {{ \Carbon\Carbon::parse($event->start_time)->format('g:i A') }}</div>
				</a>
			    </div>
			</div>
			<!-- /All Matches -->
		    </div>
		</div>
	    </div>
	    <!-- /Recent Matches -->
	</div>
	<!-- Right Side -->
    </div>
</div>


<script>
$(document).ready(function() {

	// Select all the purchase ticket buttons
	var purchaseTicketButtons = document.querySelectorAll('.buy_ticket_btn');

	var originalModalContent = $('#purchase-ticket').html();

	purchaseTicketButtons.forEach(function(button) {
		button.addEventListener('click', function() {
			purchaseTicketButtons.forEach(function(button) {
				button.addEventListener('click', function() {

					console.log('test');
					console.log('test');

					var ticketId = this.getAttribute('data-ticket-id');
					var ticketPrice = this.getAttribute('data-ticket-price');
					var eventId = this.getAttribute('data-event-id');
					var ticketType = this.getAttribute('data-ticket-type');
					var ticketId = this.getAttribute('data-ticket-id');
					var ticketPrice = this.getAttribute('data-ticket-price');
					var eventId = this.getAttribute('data-event-id');
					var ticketType = this.getAttribute('data-ticket-type');

					var ticketPriceInput = document.getElementById('ticketPrice');
					ticketPriceInput.innerText = 'Ticket: ' + ticketType + ' Ksh.' + ticketPrice + '.00';
					var ticketPriceInput = document.getElementById('ticketPrice');
					ticketPriceInput.innerText = 'Ticket: ' + ticketType + ' Ksh.' + ticketPrice + '.00';

					document.getElementById('ticket_id').value = ticketId;
					document.getElementById('ticket_amount').value = ticketPrice;
					document.getElementById('event_id').value = eventId;
				});
			});
			document.getElementById('ticket_id').value = ticketId;
			document.getElementById('ticket_amount').value = ticketPrice;
			document.getElementById('event_id').value = eventId;
		});
	});

})
</script>

@endsection