@include('admin.partials._validation')

<div class="row">
    <div class="col-sm-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title">
                    Geral
                </div>
            </div>
            <div class="card-body">

                <div class="form-group row">
                    {!! Form::label('title', 'Titulo *', ['class' => 'col-sm-2 col-form-label text-sm-left']) !!}
                    <div class="col-sm-10">
                        {!! Form::text('title', $item->title, ['class' => 'form-control', 'placeholder' => 'Título', 'required']) !!}
                    </div>
                </div>

                <div class="form-group row">
                    {!! Form::label('event_at', 'Data do evento *', ['class' => 'col-sm-2 col-form-label text-sm-left']) !!}
                    <div class="col-sm-4 col-md-3">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                            </div>
                            {!! Form::input('date','event_at', $item->event_at ? $item->event_at->format('Y-m-d') : date('Y-m-d'), ['class' => 'form-control required', 'placeholder' => '', 'required']) !!}
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    {!! Form::label('event_time', 'Horário *', ['class' => 'col-sm-2 col-form-label text-sm-left']) !!}
                    <div class="col-sm-4 col-md-3">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="far fa-clock"></i></span>
                            </div>
                            {!! Form::time('event_time', $item->event_at ? $item->event_at->format('H:i') : '', ['class' => 'form-control', 'placeholder' => 'Horário do Evento', 'required']) !!}
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    {!! Form::label('image', 'Imagem *', ['class' => 'col-sm-2 col-form-label text-sm-left']) !!}
                    <div class="col-sm-10">
                        <div class="custom-file">
                            {!! Form::file('image', ['class' => 'custom-file-input']) !!}
                            <label class="custom-file-label" for="image">Nenhum arquivo selecionado</label>
                        </div>
                        <small>
                            Utilizar resolução de no máximo 422x200
                        </small>
                        <small>
                            @if ($item->image)
                                <a href="{{ $item->getImage() }}" class="js-modal-image">
                                    Visualizar logo atual
                                </a>
                            @endif
                        </small>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-10 offset-sm-2">
                        <div class="form-group">
                            <div class="custom-control custom-switch custom-switch-off-light custom-switch-on-success">
                                <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" value="1" {{ $item->is_active == 1 ? 'checked' : '' }}>
                                <label class="custom-control-label" for="is_active">Evento Ativo</label>
                            </div>
                        </div>
                    </div>
                </div>

                <hr>

                <div class="form-group row">
                    {!! Form::label('limit_subscription_at', 'Data Limite de Inscrição *', ['class' => 'col-sm-2 col-form-label text-sm-left']) !!}
                    <div class="col-sm-4 col-md-3">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                            </div>
                            {!! Form::input('date','limit_subscription_at', $item->limit_subscription_at ? $item->limit_subscription_at->format('Y-m-d') : date('Y-m-d'), ['class' => 'form-control required', 'placeholder' => '','required' ]) !!}
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    {!! Form::label('subscription_time', 'Horário limite *', ['class' => 'col-sm-2 col-form-label text-sm-left']) !!}
                    <div class="col-sm-4 col-md-3">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="far fa-clock"></i></span>
                            </div>
                            {!! Form::time('subscription_time', $item->limit_subscription_at ? $item->limit_subscription_at->format('H:i') : '', ['class' => 'form-control', 'placeholder' => 'Horário Limite', 'required']) !!}
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-10 offset-sm-2">
                        <div class="form-group">
                            <div class="js-event-type custom-control custom-switch custom-switch-off-light custom-switch-on-success">
                                <input type="checkbox" class="custom-control-input" id="is_presencial" name="is_presencial" value="1" {{ $item->is_presencial == 1 ? 'checked' : '' }}>
                                <label class="custom-control-label" for="is_presencial">Evento Presencial</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-10 offset-sm-2">
                        <div class="form-group">
                            <div class="custom-control custom-switch custom-switch-off-light custom-switch-on-success">
                                <input type="checkbox" class="custom-control-input" id="is_exclusive" name="is_exclusive" value="1" {{ $item->is_exclusive == 1 ? 'checked' : '' }}>
                                <label class="custom-control-label" for="is_exclusive">Evento Exclusivo</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="js-forms form-group row">
                    {!! Form::label('link', 'Link Google Forms *', ['class' => 'col-sm-2 col-form-label text-sm-left']) !!}
                    <div class="col-sm-10">
                        {!! Form::text('forms', $item->forms, ['class' => 'form-control', 'placeholder' => 'Link Google Forms']) !!}
                        <small>
                        Utilizar link com https://
                        </small>
                    </div>
                </div>

                <div class="js-meet form-group row">
                    {!! Form::label('link', 'Link Meet *', ['class' => 'col-sm-2 col-form-label text-sm-left']) !!}
                    <div class="col-sm-10">
                        {!! Form::text('meet', $item->meet, ['class' => 'form-control', 'placeholder' => 'Link Meet']) !!}
                        <small>
                        Utilizar link com https://
                        </small>
                    </div>

                </div>

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

<div id="modal-crop" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Recorte de imagem</h5>
            </div>
            <div class="modal-body text-center">
                <div id="image-crop" style="display:inline-block;"></div>
            </div>
            <div class="modal-footer">
                <button id="modal-crop-save" type="button" class="btn btn-primary">Salvar</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script type="text/javascript">

    $('.js-event-type').on('change', function() {
        configureForm();
    });

    function configureForm() {
        var isChecked = $('#is_presencial').prop('checked');

        if(isChecked){
            $('.js-forms').show();
            $('.js-meet').hide();
        } else {
            $('.js-forms').hide();
            $('.js-meet').show();
        }
    }

    $(document).ready(function loadPage() {
        configureForm();
    });

</script>
@endpush