@extends('layouts.commonmaster')

@section('title') | Dashboard @endsection

@section('content')

<!-- Page body -->
<div class="page-body">
    <div class="container-xl">
        <div class="col-12">
            <div class="card card-md">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <h2 class="h3">Edit the event</h2>
                            <p class="m-0 text-secondary">
                                Add more details, redact event metadata or choose a variety of different images. Have fun
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-4">
                    <div class="card">
                        <img src="{{ asset('storage/' . $event->metadata->event_banner_file) }}" class="card-img-top" style="object-fit: cover; height: 446px;" alt="Event Banner">
                    </div>

                    <!-- <div class="editBannerImageForm mt-2"> -->
                    <!--     <form method="POST" action="" enctype="multipart/form-data"> -->
                    <!--         <label><strong>Edit Banner Image</strong></label> -->
                    <!--         <input type="file" name="event_banner_file"> -->
                    <!--     </form> -->
                    <!-- </div> -->

                    <h3>Event Clerks</h3>
                    @forelse($clerks as $clerk)
                    <div class="col-md-12 mb-1 mt-1">
                        <div class="card shadow-sm h-100">
                            <div class="card-body">
                                <span class="card-title text-primary">
                                    Name: {{ $clerk->person->name }}
                                </span>
                                <h6 class="card-subtitle mb-2 text-muted">
                                    Username: {{ $clerk->person->username }}
                                </h6>
                                <p class="card-text">
                                    Email: {{ $clerk->email }}
                                </p>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="col-12">
                        <div class="alert alert-warning" role="alert">
                            No clerks found.
                        </div>
                    </div>
                    @endforelse
                </div>

                <div class="col-md-8" >
                    <div class="card"  style="">
                        <div class="card-body">
                            <span style="font-size: 26px;">Edit Event Information</span>

                            <form id="submitEditsForm" method="POST" action="{{ route('event.edit_event_store') }}" class="mt-4" enctype="multipart/form-data">
                                @csrf

                                <input type="hidden" value="{{ $event->id }}" name="event_id">

                                <div class="row">
                                    <div class="form-group mb-4 col-md-6">
                                        <label for="event_name"><strong>Team A Logo</strong></label><br>
                                        <img src="{{ asset('storage/' . $event->team_a_logo) }}" alt="team A Logo" width="200px">
                                    </div>
                                    <div class="form-group mb-4 col-md-6">
                                        <label for="event_name"><strong>Team B Logo</strong></label><br>
                                        <img src="{{ asset('storage/' . $event->team_b_logo) }}" alt="team B Logo" width="200px">
                                    </div>
                                    <div class="form-group mb-3 col-md-6">
                                        <label for="event_name"><strong>Team A</strong></label>
                                        <input type="text" class="form-control" value="{{ old('team_a', $event->team_a) }}" name="team_a">
                                    </div>
                                    <div class="form-group mb-3 col-md-6">
                                        <label for="event_name"><strong>Team B</strong></label>
                                        <input type="text" class="form-control" value="{{ old('team_b', $event->team_b) }}" name="team_b">
                                    </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"  />
                                                    </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"  />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>

                                    <div class="form-group mb-3 col-md-6">
                                        <label for="venue_name"><strong>Venue Name</strong></label>
                                        <input type="text" class="form-control" value="{{ old('venue_name', $event->venue_name) }}" name="venue_name">
                                    </div>
                                    <div class="form-group mb-3 col-md-6">
                                        <label for="venue_name"><strong>Venue Address</strong></label>
                                        <input type="text" class="form-control" value="{{ old('venue_address', $event->venue_address) }}" name="venue_address">
                                    </div>
                                    <div class="form-group mb-3 col-md-6">
                                        <label for="venue_name"><strong>Event Visibility</strong></label>
                                        <input type="text" class="form-control" value="{{ old('event_visibility', $event->event_visibility) }}" name="event_visibility">
                                    </div>
                                    <div class="form-group mb-3 col-md-6">
                                        <label for="venue_name"><strong>League</strong></label>
                                        <input type="text" class="form-control" value="{{ old('league', $event->league_name) }}" name="league_name">
                                    </div>
                                    <div class="form-group mb-3 col-md-12">
                                        <label for="venue_name"><strong>Event Description</strong></label>
                                        <textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…" name="event_desc">{{ old('event_desc', $event->metadata->event_desc) }}</textarea>
                                    </div>

                                    <hr>

                                    <div class="form-group ">
                                        <span style="font-size: 26px;">Match 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" value="{{ old('start_date', $event->start_date) }}" 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 value="{{ old('start_time', $event->start_time) }}" 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" value="{{ old('end_date', $event->end_date) }}"  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 value="{{ old('end_time', $event->end_time) }}" 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>

                                    <hr>

                                    <div class="form-group mt-3 ticket-row">
                                        <div style="display: flex; justify-content: space-between; align-items: center;">
                                            <span style="font-size: 26px;">Event Tickets</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>
                                        @foreach($event_tickets as $et)
                                        <input type="hidden" value="{{ $et->id }}" name="ticketID[]">
                                        <div class="row mt-3">
                                            <div class="col-md-8 mb-3">
                                                <label class="form-label">Enter Name</label>
                                                <input type="text" value="{{ old('ticket_name', $et->name) }}" 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" value="{{ old('ticket_price', $et->price) }}" class="form-control" name="ticket_price[]" placeholder="Tier price">
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>

                                <div class="col-mt-2">
                                    <button class="btn btn-success w-100" id="submitEditsBtn" type="submit">Submit Changes</button>
                                </div>
                            </form>

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

@endsection()

@push('scripts')
<script>
$(document).ready(function() {
    $('.timepicker').timepicker({
        interval: 15,
    });

    // add new input fields for the tickets when the plus sign is clicked
    $('#addTicketField').click(function() {
        var newFields = `<div class="row mt-3"><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>`;

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

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

</script>
@endpush