@extends('layouts.commonmaster')

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

@push('styles')

@endpush

@section('content')

<div class="page-body eventcreatetext">
    <div class="container">
        <div class="row">
            <div class="col-md-6 m-auto">
                <h1 style="font-size: 2.5em;">Additional Event Information</h1>
                <span style="font-size: 17px;">Add relevant information to the event</span>
                <div class="form" style="margin-top: 20px;">
                    <form method="POST" enctype="multipart/form-data" action="{{ route('event.metadata_store') }}" id="editDraftEventForm" style="margin-bottom: 30px;">
                        @csrf

                        <input type="hidden" name="event_id" value="{{ $event_id }}"

                        <span style="font-size: 26px;">Add Event Banner
                            <i style="color: grey">
                                Optional (An Image will be chosen if you dont select any)
                            </i>
                        </span>
                        <div class="dropzone" id="dropzone-default" autocomplete="off" novalidate>
                            <div class="fallback">
                                <input name="event_banner_file" type="file"  />
                            </div>
                        </div>

                        <div class="mt-4">
                            <div class="mb-1">
                                <label class="form-label">Event Description</label>
                                <textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…" name="event_desc"></textarea>
                            </div>
                        </div>

                        <div class="mt-4">
                            <div class="mb-1">
                                <label class="form-label">Dress Code <span class="color: grey">(Optional)</span></label>
                                <textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…" name="dress_code"></textarea>
                            </div>
                        </div>

                        <div class="mt-4">
                            <label class="form-label">Expected Attendance<span style="color: grey;"><small>Visible to only the event creator</small></span></label>
                            <input required type="number" class="form-control" name="expected_attendance" placeholder="Enter the Expected No of Fans">
                        </div>

                        <div class="mt-4">
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <span style="font-size: 26px;">
                                    Ticket Tiers
                                    <small style="color: grey; font-size: 17px;">
                                        <i> (Create ticket tiers for your event)</i>
                                    </small>
                                </span>
                                <div style="display: flex; gap: 10px;"> <!-- Flex container for buttons with gap -->
                                    <button type="button" class="btn btn-sm add-ticket-btn" id="addTicketField" style="padding: 4px; font-size: 1.2em; height: auto; background-color: #07A081;">
                                        <i class='bx bx-plus-medical'></i>
                                    </button>
                                </div>
                            </div>

                            <div id="ticketContainer">
                                <div class="row mt-3 ticket-row">
                                    <div class="col-md-8 mb-3">
                                        <label class="form-label">Enter Name</label>
                                        <input type="text" class="form-control" name="ticket_name[]" placeholder="Enter tier name">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Price</label>
                                        <input type="number" class="form-control" name="ticket_price[]" placeholder="Enter tier price in Ksh.">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4">
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <span style="font-size: 26px;">
                                    Seasonal Ticket Tiers
                                    <small style="color: grey; font-size: 17px;">
                                        <i> (Create Seasonal ticket tiers for your event)</i>
                                    </small>
                                </span>
                                <div style="display: flex; gap: 10px;"> <!-- Flex container for buttons with gap -->
                                    <button type="button" class="btn btn-sm add-ticket-btn" id="addSeasonTicketField" style="padding: 4px; font-size: 1.2em; height: auto; background-color: #07A081;">
                                        <i class='bx bx-plus-medical'></i>
                                    </button>
                                </div>
                            </div>

                            <div id="seasonTicketContainer">
                                <div class="row mt-3 season_ticket_row">
                                    <div class="col-md-8 mb-3">
                                        <label class="form-label">Enter Name</label>
                                        <input type="text" class="form-control" name="season_ticket_name[]" placeholder="Enter tier name">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Price</label>
                                        <input type="number" class="form-control" name="season_ticket_price[]" placeholder="Enter tier price in Ksh.">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4">
                            <button class="text-light w-100 btn" style="background-color: #07A081;padding: 15px;font-size: 20px;" type="submit">Complete and Save</button>
                        </div>

                    </form>
                </div>
            </div>

        </div>
    </div>
</div>

@endsection()

@push('scripts')
<script>
$(document).ready(function() {

    // add new input fields for the tickets when the plus sign is clicked
    $('#addTicketField').click(function() {
        var newFields = `<div class="col-md-8 mb-3"><label class="form-label">Enter Name</label><input type="text" class="form-control" name="ticket_name[]" placeholder="Enter tier name"></div><div class="col-md-4 mb-3"><label class="form-label">Price</label><input type="number" class="form-control" name="ticket_price[]" placeholder="Enter tier price in Ksh."></div>`;

        $('.ticket-row').append(newFields);
    });

    // add new input fields for the seasonal tickets when the plus sign is clicked
    $('#addSeasonTicketField').click(function() {
        var newFields = `<div class="col-md-8 mb-3"><label class="form-label">Enter Name</label><input type="text" class="form-control" name="season_ticket_name[]" placeholder="Enter tier name"></div><div class="col-md-4 mb-3"><label class="form-label">Price</label><input type="number" class="form-control" name="season_ticket_price[]" placeholder="Enter tier price in Ksh."></div>`;

        $('.season_ticket_row').append(newFields);
    });

    $('#editDraftEventForm').on('submit', function() {
        console.log('wtf')
        // Add loader and blur effect
        document.body.classList.add('loader-active');
        document.querySelector('.page-body').classList.add('blurred-background');
    })

    new Dropzone("#dropzone-default")

})
</script>
@endpush