@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/'. $templatename . '/' . $templatename . '.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 {{ strtoupper($templatename) }} 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 {{ ucfirst($templatename) }}. 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.template.store') }}" id="createEventForm" style="margin-bottom: 30px;">
                    @csrf

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

                    <div class="mb-3">
                        <label class="form-label">Event Title<span style="color: red;">*</span></label>
                        <input required type="text" class="form-control" name="event_name" placeholder="Enter the name of the Event">
                        <span><small>Required</small></span>
                    </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" 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="{{ ucfirst($templatename) }}" 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