@extends('layouts.user_type.auth')

@section('content')


<div class="container-fluid py-4">

    <div class="row">
        <div class="col-lg-9 col-12 mx-auto">
            <div class="card card-body mt-4">

                <form role="form text-left" method="POST" action="{{route('eventos-store')}}" file="true"
                    enctype="multipart/form-data" autocomplete="off">
                    {{ csrf_field() }}

                    @if ($message = Session::get('error'))
                    <div class="alert alert-danger alert-block text-center" id="alert">
                        <a id="div_imagen1"><strong>{{ $message }}</strong></a>
                    </div>
                    @endif
                    <h6 class="mb-0">Nuevo evento</h6>
                    <p class="text-sm mb-0">Crear evento</p>
                    <hr class="horizontal dark my-3">
                    <label for="projectName" class="form-label">Nombre del evento</label>
                    <input type="text" class="form-control" name="nombre" placeholder="Nombre del evento"
                        value="{{ old('nombre') }}" id="nombre-evento" />
                    @error('nombre')
                    <span class="text-danger">
                        {{ $message }}
                    </span><br>
                    @enderror



                    <label class="mt-4">Descripción del evento</label>
                    <p class="form-text text-muted text-xs ms-1">
                        Esta es la descripción del evento
                    </p>


                    <!--
                    <div class="col-sm-12 mt-sm-0 mt-4" id="editor"  >
                     -->
                    <div class="col-sm-12 mt-sm-0 mt-4">

                        <textarea class="form-control" name="descripcion"
                            placeholder="Descripcion">{{ old('descripcion') }}</textarea>

                    </div>
                    @error('descripcion')
                    <span class="text-danger">
                        {{ $message }}
                    </span><br>
                    @enderror





                    <div class="row">
                        <div class="col-sm-6 mt-sm-0 mt-4">
                            <label class="mt-4">Categorias</label>
                            <select class="form-control" name="categorias" id="select-categorias">
                                <option value="" selected="" value="{{ old('categorias') }}">Seleciona una opcion
                                </option>
                                @foreach($categorias as $categoria)
                                <option value="{{$categoria->id}}">{{$categoria->nombre}}</option>
                                @endforeach
                            </select>
                            @error('categorias')
                            <span class="text-danger">
                                {{ $message }}
                            </span><br>
                            @enderror
                        </div>
                        <div class="col-sm-6 mt-sm-0 mt-4">
                            <label class="mt-4">Tipo de pagos</label>
                            <select class="form-control" name="tipo_pago" id="select-tipo-pagos">
                                <option value="" selected="">Seleciona una opcion</option>
                                @foreach($tipo_pagos as $pago)
                                <option value="{{$pago->id}}">{{$pago->nombre}}</option>
                                @endforeach
                            </select>
                            @error('tipo_pago')
                            <span class="text-danger">
                                {{ $message }}
                            </span><br>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <label class="form-label">Fecha de inicio</label>
                            <input class="form-control datetimepicker" type="text"
                                placeholder="Seleccione la fecha de inicio" value="{{ old('fecha_inicio') }}"
                                name="fecha_inicio" data-input>
                            @error('fecha_inicio')
                            <span class="text-danger">
                                {{ $message }}
                            </span><br>
                            @enderror
                        </div>
                        <div class="col-6">
                            <label class="form-label">Fecha fin</label>
                            <input class="form-control datetimepicker" type="text"
                                placeholder="Seleccione la fecha de finalización" name="fecha_fin"
                                value="{{ old('fecha_fin') }}" data-input>
                            @error('fecha_fin')
                            <span class="text-danger">
                                {{ $message }}
                            </span><br>
                            @enderror
                        </div>
                    </div>

                    <label for="projectName" class="form-label">Lugar evento</label>
                    <input type="text" class="form-control" name="lugar" value="{{ old('lugar') }}">
                    @error('lugar')
                    <span class="text-danger">
                        {{ $message }}
                    </span><br>
                    @enderror

                    <label class="form-label">Slug del evento</label>
                    <input type="text" class="form-control" name="slug" value="{{ old('slug') }}">
                    @error('slug')
                    <span class="text-danger">
                        {{ $message }}
                    </span><br>
                    @enderror

                    <label for="projectName" class="form-label">Ocupación Máxima</label>

                    <input class="form-control" type="number" name="cupo_maximo" value="{{ old('cupo_maximo') }}" />
                    @error('cupo_maximo')
                    <span class="text-danger">
                        {{ $message }}
                    </span><br>
                    @enderror


                    <br>
                    <h5 class="font-weight-bolder">Redes Sociales</h5>
                    <div class="multisteps-form__content">
                        <div class="row mt-3">

                            <div class="col-12 mt-3">
                                <label>Facebook</label>
                                <input class="multisteps-form__input form-control" value="{{ old('facebook') }}"
                                    name="facebook" type="text" placeholder="https://..." />
                                @error('facebook')
                                <span class="text-danger">
                                    {{ $message }}
                                </span>
                                @enderror
                            </div>
                            <div class="col-12 mt-3">
                                <label>Instagram</label>
                                <input class="multisteps-form__input form-control" value="{{ old('instagram') }}"
                                    name="instagram" type="text" placeholder="https://..." />
                                @error('instagram')
                                <span class="text-danger">
                                    {{ $message }}
                                </span><br>
                                @enderror
                            </div>
                            <div class="col-12">
                                <label>Youtube</label>
                                <input class="multisteps-form__input form-control" value="{{ old('youtube') }}"
                                    name="youtube" type="text" placeholder="@soft" />
                                @error('youtube')
                                <span class="text-danger">
                                    {{ $message }}
                                </span><br>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <br>
                    <h5 class="font-weight-bolder">Datos de contacto</h5>
                    <div class="multisteps-form__content">
                        <div class="row mt-3">
                            <div class="col-12 mt-3">
                                <label>Pagina de contacto</label>
                                <input class="multisteps-form__input form-control" value="{{ old('contacto_pagina') }}"
                                    name="contacto_pagina" type="text" placeholder="https://..." />
                                @error('contacto_pagina')
                                <span class="text-danger">
                                    {{ $message }}
                                </span><br>
                                @enderror
                            </div>

                            <div class="col-12 mt-3">
                                <label for="projectName" class="form-label">Contacto correo electronico</label>
                                <input type="email" class="form-control" value="{{ old('contacto_correo') }}"
                                    name="contacto_correo">
                                @error('contacto_correo')
                                <span class="text-danger">
                                    {{ $message }}
                                </span><br>
                                @enderror
                            </div>
                            <div class="col-12 mt-3">
                                <label for="projectName" class="form-label">Contacto telefono</label>
                                <input type="text" class="form-control" value="{{ old('contacto_telefono') }}"
                                    name="contacto_telefono">
                                @error('contacto_telefono')
                                <span class="text-danger">
                                    {{ $message }}
                                </span><br>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <label class="mt-4 form-label">Portada del evento</label>
                    <p class="form-text text-muted text-xs ms-1">
                        La portada
                    </p>

                    <input type="file" class="form-control" value="{{ old('file') }}" name="file">


                    @error('file')
                    <span class="text-danger">
                        {{ $message }}
                    </span><br>
                    @enderror



                    <div class="d-flex justify-content-end mt-4">
                        <a href="{{route('eventos')}}" type="button"  name="button" class="btn btn-light m-0">Cancelar</a>
                        <button type="submit" name="button" class="btn bg-gradient-primary m-0 ms-2">Crear
                            Evento</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('dashboard')
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="{{asset('assets/js/plugins/choices.min.js')}}"></script>
<script src="{{asset('assets/js/plugins/quill.min.js')}}"></script>
<script src="{{asset('assets/js/plugins/flatpickr.min.js')}}"></script>
<script src="{{asset('assets/js/plugins/dropzone.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>

<script>
    $('#alert').fadeIn();
    setTimeout(function () {
        $("#alert").fadeOut();
    }, 4000);

    if (document.getElementById('editor')) {
      var quill = new Quill('#editor', {
        theme: 'snow' // Specify theme in configuration
      });
    }



    if (document.querySelector('.datetimepicker')) {
      flatpickr('.datetimepicker', {
        allowInput: true
      }); // flatpickr
    }






    if (document.getElementById('select-categorias')) {
      var element = document.getElementById('select-categorias');
      const example = new Choices(element, {
        searchEnabled: true
      });
    };

    if (document.getElementById('select-tipo-pagos')) {
      var element = document.getElementById('select-tipo-pagos');
      const example = new Choices(element, {
        searchEnabled: true
      });
    };
</script>
<!-- Kanban scripts -->

<script>
    var win = navigator.platform.indexOf('Win') > -1;
    if (win && document.querySelector('#sidenav-scrollbar')) {
      var options = {
        damping: '0.5'
      }
      Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
    }
</script>
@endpush


@endsection