@extends('layouts.commonmaster')

@section('title') | Create Event @endsection

@push('styles')
<style>
.header__image__container {
position: relative;
min-height: 500px;
background-image: linear-gradient(
to right,
rgba(44, 56, 85, 0.9),
rgba(100, 125, 187, 0.1)
),
url("{{ asset('images/events/football/football.jpg') }}");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 2rem;
}

.header__content h1 {
margin-bottom: 1rem;
font-size: 3.5rem;
line-height: 17rem;
font-weight: 600;
color: var(--white);
}

.header__content p {
color: var(--extra-light);
}

.booking__container {
position: absolute;
bottom: -3rem;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 6rem);
display: flex;
align-items: center;
padding: 1rem ;
border-radius: 2rem;
background-color: rgba(255, 255, 255, 0.7);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1);
}

</style>
@endpush

@section('content')

<div class="container col-md-9" style="margin-top: 20px;">

    <header class="section__container header__container">
        <div class="header__image__container">
            <div class="header__content text-center">
                <h1 style="color: wheat">CRAFT YOUR FOOTBALL EVENT</h1>
            </div>
            <div class="booking__container">
                <p>
                    <strong>
                        Manage ticketing effortlessly, customize the event details to your vision, and watch your guest list grow as excitement builds around football. We're here to support you every step of the way as you bring your event to life!
                    </strong>
                </p>
            </div>
        </div>
    </header>
    <div class="row" style="margin-top: 80px;">
        <div class="col-md-8 m-auto">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 style="font-size: 3.0em;">Create Event</h1>
                </div>
            </div>
            <span style="font-size: 17px;">Events start as a draft. You can edit this information later on</span>
            <div class="form" style="margin-top: 20px;">
                <form method="POST" action="{{ route('event.store') }}" enctype="multipart/form-data" id="createEventForm" style="margin-bottom: 30px;">
                    @csrf

                    <input type="hidden" value="{{ $season_id }}" name="season_id">

                    <div class="mb-3">
                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-label">Team A<span style="color: red;">*</span></label>
                                <input required type="text" class="form-control" name="team_a" placeholder="Enter the name of Team A">
                                <span><small>Required</small></span>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Team B<span style="color: red;">*</span></label>
                                <input required type="text" class="form-control" name="team_b" placeholder="Enter the name of Team B">
                                <span><small>Required</small></span>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-label">Team A Logo<span style="color: red;">*</span></label>
                                <div class="dropzone" id="dropzone-default" autocomplete="off" novalidate>
                                    <div class="fallback">
                                        <input name="team_a_logo" type="file" required  />
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Team B Logo<span style="color: red;">*</span></label>
                                <div class="dropzone" id="dropzone-default" autocomplete="off" novalidate>
                                    <div class="fallback">
                                        <input name="team_b_logo" type="file" required  />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <span style="font-size: 26px;">Date and Time</span>
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <label class="form-label">Start Date<span style="color: red;">*</span></label>
                                <div class="input-icon mb-2">
                                    <input required class="form-control datepicker" autocomplete="off" name="start_date" placeholder="Select a date" id="datepicker_icon"/>
                                    <span class="input-icon-addon">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z" /><path d="M16 3v4" /><path d="M8 3v4" /><path d="M4 11h16" /><path d="M11 15h1" /><path d="M12 15v3" /></svg>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Start Time<span style="color: red;">*</span></label>
                                <div class="input-icon mb-2">
                                    <input required class="form-control timepicker" autocomplete="off" name="start_time" placeholder="Select time" id="timepicker"/>
                                    <span class="input-icon-addon">
                                        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-clock-hour-1"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M12 7v5" /><path d="M12 12l2 -3" /></svg>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-6">
                                <label class="form-label">End Date<span style="color: red;">*</span></label>
                                <div class="input-icon mb-2">
                                    <input required class="form-control datepicker" autocomplete="off" name="end_date" placeholder="Select a date" id="datepicker_icon"/>
                                    <span class="input-icon-addon">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z" /><path d="M16 3v4" /><path d="M8 3v4" /><path d="M4 11h16" /><path d="M11 15h1" /><path d="M12 15v3" /></svg>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">End Time<span style="color: red;">*</span></label>
                                <div class="input-icon mb-2">
                                    <input required class="form-control timepicker" autocomplete="off" name="end_time" placeholder="Select time" id="timepicker"/>
                                    <span class="input-icon-addon">
                                        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-clock-hour-1"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M12 7v5" /><path d="M12 12l2 -3" /></svg>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <span style="font-size: 26px;">Match Day</span>
                        <div class="row mt-4">
                            <div class="mb-3 col-md-12">
                                <label class="form-label">League</label>
                                <input required type="text" class="form-control" name="match_day" placeholder="e.g NSL Matchday 1/18">
                            </div>
                        </div>
                    </div>

                    <div class="form-group" style="margin-top: 20px;">
                        <span style="font-size: 26px;">Location</span>
                        <div class="mb-3">
                            <label class="form-label">Venue Name<span style="color: red;">*</span></label>
                            <input required type="text" class="form-control" name="venue_name" placeholder="Enter the name of the Event Location">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Venue Address<span style="color: red;">*</span></label>
                            <div class="input-group mb-2">
                                <span class="input-group-text">
                                    <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-map-pin"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /><path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z" /></svg>
                                </span>
                                <input required type="text" class="form-control" id="location" name="venue_address" placeholder="Search for the venue address">
                            </div>
                        </div>
                        <div class="mb-3" style="margin-top: 20px;">
                            <label class="form-label"> Event Type<span style="color: red;">*</span></label>
                            <input class="form-control" readonly value="Football" style="background-color: #f0f0f0;color: #999999" type="text" id="event_tag" name="event_tag" class=""/>
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 35px;">
                        <span style="font-size: 26px;">Event Visibility when Activated</span>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="list-group card-list-group">
                                        <div class="list-group-item group-item-radio">
                                            <div class="d-flex align-items-center">
                                                <input type="radio" style="cursor: pointer;" value="public" class="custom-radio me-3" name="event_visibility" checked>
                                                <div class="form-selectgroup-label-content">
                                                    <span class="form-selectgroup-title strong mb-1">Public</span>
                                                    <span class="d-block text-secondary"> Your event will show up in search results and anyone can view it</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="list-group-item group-item-radio" style="opacity: 0.5;">
                                            <div class="d-flex align-items-center">
                                                <input type="radio" style="cursor: not-allowed;" value="private" class="custom-radio me-3" name="event_visibility" disabled>
                                                <div class="form-selectgroup-label-content">
                                                    <span class="form-selectgroup-title strong mb-1">Private</span>
                                                    <span class="d-block text-secondary">Your event won't show up in search results and only people with the link can view it</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="list-group-item group-item-radio" style="opacity: 0.5;">
                                            <div class="d-flex align-items-center">
                                                <input type="radio" style="cursor: not-allowed;" disabled class="custom-radio me-3" value="invite_only" name="event_visibility">
                                                <div class="form-selectgroup-label-content">
                                                    <span class="form-selectgroup-title strong mb-1">Invite Only</span>
                                                    <span class="d-block text-secondary">  Your event won't show up in search results and only people you invite via email can view it</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="mb-3" style="margin-top: 20px;">
                        <label class="form-label"> Event Contact Email<span style="color: red;">*</span></label>
                        <input required type="email" class="form-control" name="event_contact_email" placeholder="Enter the name of the Event">
                    </div>

                    <div class="mt-4">
                        <button class="text-light w-100 btn" style="background-color: #07A081;padding: 15px;font-size: 20px;" type="submit">Continue to Edit Event Page</button>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
@endsection()

@push('scripts')

<script>
$('.timepicker').timepicker({
    interval: 15,
    defaultTime: 'now',
});
</script>

@endpush