@extends('plugincmslaravel::layouts.app')

@section('title', isset($event) ? 'Modifier un Événement' : 'Ajouter un Événement')

@section('content')
<div class="d-flex flex-column flex-column-fluid">
    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
                    {{ isset($event) ? 'Modifier un Événement' : 'Ajouter un Événement' }}
                </h1>
            </div>
        </div>
    </div>
</div>

<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <div id="kt_app_content_container" class="app-container container-xxl">
                <form method="POST"
                    action="{{ isset($event) ? route('events.update', $event->id) : route('events.store') }}"
                    class="form d-flex flex-column flex-lg-row fv-plugins-bootstrap5 fv-plugins-framework"
                    enctype="multipart/form-data" id="kt_event_form_submit">
                    @csrf
                    @if (isset($event))
                    @method('PUT')
                    @endif

                    <div class="d-flex flex-column gap-7 gap-lg-10 w-100 w-lg-300px mb-7 me-lg-10">
                        <!-- Image -->
                        <div class="card card-flush py-4">
                            <div class="card-header">
                                <div class="card-title">
                                    <h2>Image</h2>
                                </div>
                            </div>
                            <div class="card-body text-center pt-0">
                                <style>
                                    .image-input-placeholder {
                                        background-image: url("{{ isset($event) ? asset('storage/' . $event->image) : asset('/assets/media/svg/files/blank-image.svg') }}");
                                    }
                                </style>
                                <div class="image-input image-input-empty image-input-outline image-input-placeholder mb-3"
                                    data-kt-image-input="true">
                                    <div class="image-input-wrapper w-150px h-150px"></div>
                                    <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" aria-label="Change avatar" data-bs-original-title="Change avatar" data-kt-initialized="1">
                                        <i class="ki-duotone ki-pencil fs-7"><span class="path1"></span><span class="path2"></span></i>
                                        <input type="file" name="image">
                                        <input type="hidden" name="avatar_remove">
                                    </label>
                                    <span
                                        class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                        data-kt-image-input-action="remove" data-bs-toggle="tooltip">
                                        <i class="ki-duotone ki-cross fs-2"></i>
                                    </span>
                                </div>
                                <div class="text-muted fs-7">Ajouter l'image de l'événement</div>
                            </div>
                        </div>

                        <!-- Status -->
                        <div class="card card-flush py-4">
                            <div class="card-header">
                                <div class="card-title">
                                    <h2>Status</h2>
                                </div>
                            </div>
                            <div class="card-body pt-0">
                                <select class="form-select mb-2" id="status" name="status">
                                    <option value="0"
                                        {{ old('status', isset($event) ? $event->status : 0) == 0 ? 'selected' : '' }}>
                                        Non publié</option>
                                    <option value="1"
                                        {{ old('status', isset($event) ? $event->status : 0) == 1 ? 'selected' : '' }}>
                                        Publié</option>
                                </select>
                                <div class="text-muted fs-7">Le statut de l'événement</div>

                                <select class="form-select mb-2 mt-5" id="past" name="past">
                                    <option value="0"
                                        {{ old('past', isset($event) ? $event->past : 0) == 0 ? 'selected' : '' }}>
                                        Réservable</option>
                                    <option value="1"
                                        {{ old('past', isset($event) ? $event->past : 0) == 1 ? 'selected' : '' }}>
                                        Evenement passé</option>
                                </select>
                                <div class="text-muted fs-7">Le statut de l'événement</div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
                        <div class="card card-flush py-4">
                            <div class="card-header">
                                <div class="card-title">
                                    <h2>Détails de l'Événement</h2>
                                </div>
                            </div>
                            <div class="card-body pt-0">
                                <div class="mb-10">
                                    <label class="required form-label">Titre</label>
                                    <input type="text" name="title" class="form-control mb-2" placeholder="Titre de l'événement"
                                        value="{{ old('title', $event->title ?? '') }}">
                                    <div class="text-muted fs-7">Titre de l'événement</div>
                                </div>


                                <div class="mb-10">
                                    <label class="form-label">Lien vers l'événement</label>
                                    <input type="url" name="link" class="form-control mb-2" placeholder="Lien Régiondo"
                                        value="{{ old('link', $event->link ?? '') }}">
                                    <div class="text-muted fs-7">Lien externe pour l'événement</div>
                                </div>

                                <div class="mb-10">
                                    <label class="form-label">Contenu</label>
                                    <textarea name="content" class="form-control mb-2" placeholder="Description de l'événement"
                                        rows="5">{{ old('content', $event->content ?? '') }}</textarea>
                                    <div class="text-muted fs-7">Description détaillée de l'événement</div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end">
                            <a href="{{ route('events.index') }}" id="kt_event_cancel" class="btn btn-light me-5">Retour</a>
                            <button type="submit" id="kt_event_submit" class="btn btn-primary">
                                <span class="indicator-label">Enregistrer</span>
                                <span class="indicator-progress">Please wait...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection