@extends("admins.layout")
@section("css")
    <link rel="stylesheet" href="{{ asset("assets/css/bootstrap-datepicker3.min.css") }}">
@endsection
@section("js")
    <script src="{{ asset("assets/js/bootstrap-datepicker.min.js") }}"></script>
    <script src="{{ asset("assets/js/events/main.js") }}"></script>
@endsection

@section("pageContent")

<div class="container-fluid">

    <!-- Page Heading -->
    <h1 class="h3 mb-0 text-gray-800">Créer votre événement</h1>
    <p class="mb-4">Créer votre événement en quelque étapes.</p>
    <form id="addEvent" method="post" class="row">

        <div class="col-lg-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary text-uppercase"> <i class="fa fa-calendar"></i>
                        Informations
                        générales</h6>
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="form-group col-md-4">
                            <label for="name">Nom </label>
                            <input type="text" class="form-control" name="name" id="name" maxlength="22">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="event_type_id">Type</label>
                            <select name="event_type_id" id="event_type_id" class="form-control">
                                @foreach (App\Models\EventType::all() as $eventType)
                                    <option value="{{ $eventType->id }}">{{ $eventType->label }}</option>
                                @endforeach
                            </select>
                        </div>
                         <div class="form-group col-md-4">
                            <label for="status">Status</label>
                            <select name="status" id="status" class="form-control">
                                @foreach (["En cours", "Terminé", "Coming soon"] as $status)
                                    <option value="{{ $status }}">{{ $status }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label for="description">Description</label>
                            <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                        </div>

                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="country">Pays</label>
                            <select name="country" id="country" class="form-control">
                                @foreach (config("app.countries") as $country)
                                    <option value="{{ $country }}">{{ $country }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="place">Lieu</label>
                            <input type="text" class="form-control" id="place" name="place">
                        </div>

                    </div>
                    <div class="form-row">

                        <div class="form-group col-md-4">
                            <label for="date_since">Date début</label>
                            <input type="text" class="form-control datepicker" id="date_since" name="date_since" value="{{ date("Y-m-d") }}">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="date_end">Date fin</label>
                            <input type="text" class="form-control datepicker" id="date_end" name="date_end" value="{{ date("Y-m-d") }}">
                        </div>
                        <div class="form-group col-md-2">
                            <label for="time_since">Heure début</label>
                            <input type="time" class="form-control timepicker" id="time_since" name="time_since" value="{{ date("H:i") }}">
                        </div>
                        <div class="form-group col-md-2">
                            <label for="time_end">Heure fin</label>
                            <input type="time" class="form-control" id="time_end" name="time_end" value="{{ date("H:i") }}">
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-lg-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary text-uppercase"> <i class="fa fa-map"></i>
                        Configuration de place </h6>
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="form-group col-md-4">
                            <label for="namePlace">Nom de salle</label>
                            <input type="text" class="form-control" id="namePlace" name="namePlace"
                                placeholder="Nom de la salle">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="place_number">Nombre de places</label>
                            <input type="number" class="form-control" id="place_number" name="place_number"
                                placeholder="152">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="numbering">Préfix pour numérotation </label>
                            <input type="text" name="numbering" class="form-control" id="numbering"
                                placeholder="A014">
                        </div>
                    </div>

                </div>
            </div>

        </div>

        <div class="col-lg-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary text-uppercase"> <i class="fa fa-image"></i> visuelle</h6>
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="custom-file col-md-6 mr-4">
                            <label for="banner" class="custom-file-label">Bannière de l'évènement</label>
                            <input type="file" class="custom-file-input" id="banner" name="banner" >
                        </div>
                        <div class="custom-file col-md-5 ">
                            <input type="file" class="custom-file-input" id="photo">
                            <label class="custom-file-label" name="photo" for="photo">Photo de l'évènement</label>
                        </div>
                    </div>

                </div>
            </div>
            @csrf
        </div>

        <div class="col-12">
            <button type="submit" class="btn btn-primary btn-icon-split mb-4">
                <span class="icon text-white-50">
                    <i class="fas fa-arrow-right"></i>
                </span>
                <span class="text">Créer évènement</span>
            </button>
        </div>
    </form>
</div>

@endsection