@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 COUNTY SEMI FINALS</h1>
                            <div class="h5 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>ISHIARA YOUTH</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>0 : 0</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>JNTI FC</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</h2>
            <!-- Pricing Tables -->
            <div class="container">
                <div class="row vertical-gutter">

                    @foreach($tickets as $ticket)
                    <div class="col-md-4">
                        <ul class="pricing-table">
                            <li class="plan-name">{{ $ticket->name }}</li>
                            <li class="plan-price">Ksh.{{ $ticket->price }}.00</li>
                            <li>Season Pass</li>
                            <li class="plan-action">
                                <a class="btn btn-default btn-lg no-fade buy_ticket_btn"
                                    href="#"
                                    data-toggle="modal"
                                    data-target="#purchase-ticket"
                                    data-ticket-id="{{ $ticket->id }}"
                                    data-ticket-type="{{ $ticket->name }}"
                                    data-event-id="{{ $event->id }}"
                                    data-ticket-price="{{ $ticket->price }}">
                                    Buy
                                </a>
                            </li>
                        </ul>

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

        </div>
        <!-- Right Side -->
        <div class="col-md-3">
            <!-- Recent Matches -->
            <!-- /Recent Matches -->
        </div>
        <!-- Right Side -->
    </div>
</div>

<script>

</script>

@endsection