@extends('layouts.publicador.default')

@section('content')
    <link rel="stylesheet" href="{{ asset('css/fontawesome/css/all.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/fontawesome/css/fontawesome.min.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

    <style>
        :root {
            --primary-color: #2563eb;
            --primary-hover: #1d4ed8;
            --secondary-color: #64748b;
            --success-color: #22c55e;
            --warning-color: #eab308;
            --info-color: #0ea5e9;
            --danger-color: #ef4444;
            --border-radius: 0.5rem;
            --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --transition: all 0.3s ease;
        }

        .content-wrapper {
            background: #fff;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 2rem;
            margin: 2rem auto;
            animation: fadeIn 0.5s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .form-header {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #f1f5f9;
            position: relative;
        }

        .form-header::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100px;
            height: 2px;
            background: var(--primary-color);
            animation: slideRight 0.5s ease-out forwards;
        }

        @keyframes slideRight {
            from {
                width: 0;
            }

            to {
                width: 100px;
            }
        }

        .form-header h4 {
            color: #1e293b;
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .form-header small {
            color: var(--secondary-color);
            font-size: 0.875rem;
            margin-left: 0.5rem;
            opacity: 0.8;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: #1e293b;
            font-weight: 500;
            font-size: 0.9rem;
        }

        .form-control {
            display: block;
            width: 100%;
            padding: 0rem 1rem;
            font-size: 0.9rem;
            line-height: 1.5;
            color: #1e293b;
            background-color: #fff;
            border: 1px solid #e2e8f0;
            border-radius: var(--border-radius);
            transition: var(--transition);
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
            outline: none;
        }

        .form-control.is-invalid {
            border-color: var(--danger-color);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ef4444' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ef4444' stroke='none'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 1rem;
            padding-right: 2.5rem;
        }

        .invalid-feedback {
            display: block;
            margin-top: 0.25rem;
            font-size: 0.875rem;
            color: var(--danger-color);
        }

        /* Select Fields */
        select.form-control {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 16px 12px;
            padding-right: 2.5rem;
            appearance: none;
        }

        /* Date Fields */
        .data-hora {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23666'%3E%3Cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 1.25rem;
            padding-right: 2.5rem;
        }

        /* Checkboxes */
        .checkbox-wrapper {
            background: #f8fafc;
            border-radius: var(--border-radius);
            padding: 1.5rem;
            margin: 1rem 0;
            border: 1px solid #e2e8f0;
        }

        .checkbox-wrapper.has-error {
            border-color: var(--danger-color);
            background-color: rgba(239, 68, 68, 0.05);
        }

        .form-check-label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem;
            margin: 0;
            cursor: pointer;
            transition: var(--transition);
            border-radius: 0.375rem;
        }

        .form-check-label:hover {
            background-color: rgba(0, 0, 0, 0.02);
        }

        input[type="checkbox"] {
            width: 1.125rem;
            height: 1.125rem;
            border-radius: 0.25rem;
            border: 2px solid #cbd5e1;
            transition: var(--transition);
            cursor: pointer;
        }

        input[type="checkbox"]:checked {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        /* Botões */
        .btn {
            padding: 0.625rem 1.5rem;
            font-weight: 500;
            border-radius: 0.375rem;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn:hover {
            transform: translateY(-1px);
        }

        .btn-success {
            background-color: var(--success-color);
            border-color: var(--success-color);
            color: white;
        }

        .btn-success:hover {
            background-color: #16a34a;
            border-color: #16a34a;
            box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.1), 0 2px 4px -1px rgba(34, 197, 94, 0.06);
        }

        .btn-danger {
            background-color: var(--danger-color);
            border-color: var(--danger-color);
            color: white;
        }

        .btn-danger:hover {
            background-color: #dc2626;
            border-color: #dc2626;
            box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.1), 0 2px 4px -1px rgba(239, 68, 68, 0.06);
        }

        /* Separadores */
        hr {
            margin: 2rem 0;
            border: 0;
            border-top: 1px solid #e2e8f0;
        }

        /* Alertas */
        .alert {
            border: none;
            border-radius: var(--border-radius);
            padding: 1rem 1.5rem;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            animation: slideDown 0.3s ease-out;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .alert-danger {
            background-color: rgba(239, 68, 68, 0.15);
            color: var(--danger-color);
            border-left: 4px solid var(--danger-color);
        }

        /* Responsividade */
        @media (max-width: 768px) {
            .content-wrapper {
                padding: 1.5rem;
                margin: 1rem;
            }

            .form-check-label {
                font-size: 0.875rem;
            }

            .btn {
                width: 100%;
                justify-content: center;
                margin: 0.5rem 0;
            }
        }

        /* Editor TinyMCE */
        .tox-tinymce {
            border-radius: var(--border-radius) !important;
            border-color: #e2e8f0 !important;
        }

        .tox .tox-toolbar__group {
            padding: 0 4px !important;
        }

        .tox .tox-tbtn {
            border-radius: 0.25rem !important;
            transition: var(--transition) !important;
        }

        .tox .tox-tbtn:hover {
            background-color: #f1f5f9 !important;
        }

        .tox .tox-tbtn--enabled,
        .tox .tox-tbtn--enabled:hover {
            background-color: var(--primary-color) !important;
            color: white !important;
        }

        .disabled-by-me {
            pointer-events: none;
            opacity: 0.6;
        }

        .disabled-by-me input,
        .disabled-by-me select,
        .disabled-by-me textarea {
            background-color: #e9ecef !important;
            pointer-events: none !important;
            border-color: #ced4da !important;
        }
    </style>

    <div class="container">
        <div class="content-wrapper">
            <div class="form-header">
                <h4>
                    @lang('labels.agenda')
                    <small class="text-muted">
                        {{ empty($model->id) ? __('labels.acoes.adicionar') : __('Comentar') }}
                    </small>
                </h4>
            </div>

            @if ($errors->any())
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-circle"></i>
                    <div>@lang('labels.msg.verifique')</div>
                </div>
            @endif

            @if (empty($model))
                {!! Form::open(['route' => ['publicador.agenda_2.save_comentarios'], 'class' => 'form form-edit', 'files' => true]) !!}
            @else
                {!! Form::model($model, [
                    'route' => ['publicador.agenda_2.save_comentarios'],
                    'class' => 'form form-edit',
                    'method' => 'post',
                    'files' => true,
                ]) !!}
                {{ Form::hidden('id') }}
            @endif

            <div class="row">

                    <div class="col-sm-12 disabled-by-me">
                        <div class="form-group">
                            {{ Form::label('titulo', __('labels.titulo')) }}
                            {{ Form::text('titulo', null, [
                                'class' => 'form-control ' . ($errors->has('titulo') ? 'is-invalid' : ''),
                                'placeholder' => __('labels.titulo'),
                                'autocomplete' => 'off',
                            ]) }}
                            @if ($errors->has('titulo'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('titulo') }}
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-sm-3 disabled-by-me">
                        <div class="form-group">
                            {{ Form::label('local_id', __('labels.local')) }}
                            {{ Form::select('local_id', $locais, null, [
                                'class' => 'form-control ' . ($errors->has('local_id') ? 'is-invalid' : ''),
                                'placeholder' => __('labels.acoes.selecione'),
                                'autocomplete' => 'off',
                            ]) }}
                            @if ($errors->has('local_id'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('local_id') }}
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-sm-3 disabled-by-me">
                        <div class="form-group">
                            {{ Form::label('local', __('labels.endereco')) }}
                            {{ Form::text('local', null, [
                                'class' => 'form-control ' . ($errors->has('local') ? 'is-invalid' : ''),
                                'maxlength' => 150,
                                'placeholder' => __('labels.endereco'),
                                'autocomplete' => 'off',
                            ]) }}
                            @if ($errors->has('local'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('local') }}
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-sm-2 disabled-by-me">
                        <div class="form-group">
                            {{ Form::label('data_evento', __('labels.data_evento')) }}
                            {{ Form::text(
                                'data_evento',
                                empty($model->data_evento) || $model->data_evento->year <= 2 ? '' : $model->data_evento->format('d/m/Y H:i'),
                                [
                                    'class' => 'form-control data-hora ' . ($errors->has('data_evento') ? 'is-invalid' : ''),
                                    'placeholder' => __('labels.data_evento'),
                                    'autocomplete' => 'off',
                                ],
                            ) }}
                            @if ($errors->has('data_evento'))
                                @if ($errors->first('data_evento') == 'validation.checar_disponibilidade_local')
                                    <div class="form-check form-check-inline">
                                        <label class="form-check-label py-1 text-danger">
                                            {{ Form::checkbox('alerta', 1, null, ['class' => 'form-check-input']) }}
                                            @lang('validation.evento_conflito')
                                        </label>
                                    </div>
                                @else
                                    <div class="invalid-feedback">
                                        {{ $errors->first('data_evento') }}
                                    </div>
                                @endif
                            @endif
                        </div>
                    </div>

                                        <div class="col-sm-2">
                        <div class="form-group">
                            <label for="DataTermino">Data Término</label>
                            <input class="form-control data-hora" placeholder="Data Término" name="DataTermino"
                                autocomplete="off" type="text" id="DataTermino" value="{{ old('DataTermino') }}">
                        </div>
                    </div>
                    
                    <div class="col-sm-2 disabled-by-me">
                        <div class="form-group">
                            <label for="ocultar_data">Ocultar data/hora</label>
                            <select name="ocultar_data" class="form-control">
                                <option value="0">Não</option>
                                <option value="1"
                                    {{ !empty($model->ocultar_data) && $model->ocultar_data == 1 ? 'selected' : '' }}>Sim
                                </option>
                            </select>
                        </div>
                    </div>

                    <div class="col-sm-3 disabled-by-me">
                        <div class="form-group">
                            {{ Form::label('status', __('labels.status')) }}
                            {{ Form::select('status', Config::get('constants.status_eventos'), null, [
                                'class' => 'form-control ' . ($errors->has('status') ? 'is-invalid' : ''),
                                'placeholder' => __('labels.acoes.selecione'),
                                'autocomplete' => 'off',
                            ]) }}
                            @if ($errors->has('status'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('status') }}
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-sm-3 disabled-by-me">
                        <div class="form-group">
                            {{ Form::label('publicado', __('labels.publicado_site')) }}
                            {{ Form::select('publicado', Config::get('constants.boolean'), null, [
                                'class' => 'form-control ' . ($errors->has('publicado') ? 'is-invalid' : ''),
                                'placeholder' => __('labels.acoes.selecione'),
                                'autocomplete' => 'off',
                            ]) }}
                            @if ($errors->has('publicado'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('publicado') }}
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-sm-3 disabled-by-me">
                        <div class="form-group">
                            {{ Form::label('proposicao', __('labels.proposicao')) }}
                            {{ Form::text('proposicao', null, [
                                'class' => 'form-control ' . ($errors->has('proposicao') ? 'is-invalid' : ''),
                                'placeholder' => __('labels.proposicao'),
                                'autocomplete' => 'off',
                            ]) }}
                            @if ($errors->has('proposicao'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('proposicao') }}
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-sm-3 disabled-by-me">
                        <div class="form-group">
                            {{ Form::label('transmissao', __('labels.transmissao')) }}
                            {{ Form::select('transmissao', Config::get('constants.boolean'), null, [
                                'class' => 'form-control ' . ($errors->has('transmissao') ? 'is-invalid' : ''),
                                'placeholder' => __('labels.acoes.selecione'),
                                'autocomplete' => 'off',
                            ]) }}
                            @if ($errors->has('transmissao'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('transmissao') }}
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="col-sm-12 mb-3">
                    <hr>
                    <div class="section-title text-center mb-4">
                        <h5>@lang('labels.informacoes_internas')</h5>
                    </div>

                    <div class="form-group">
                        {{ Form::label('comentarios', __('labels.comentarios')) }}
                        {{ Form::textarea('comentarios', null, [
                            'class' => 'form-control',
                            'placeholder' => __('labels.comentarios'),
                        ]) }}
                    </div>
                </div>
            </div>

            <div class="text-center mt-4">
                <a href="{{ route('publicador.agenda_2.calendario') }}" class="btn btn-danger">
                    <i class="fas fa-times"></i>
                    @lang('labels.acoes.cancelar')
                </a>
                {{ Form::button('<i class="fas fa-save"></i> ' . __('labels.acoes.salvar'), [
                    'type' => 'submit',
                    'class' => 'btn btn-success',
                ]) }}
            </div>

            {!! Form::close() !!}
        </div>
    </div>

    @include('layouts.publicador.tinymce')

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            tinymce.init({
                selector: 'textarea:not([name="comentario"])',
                language: 'pt_BR',
                menubar: false,
                branding: false,
                plugins: [
                    'advlist autolink lists link charmap anchor',
                    'visualblocks code paste help wordcount'
                ],
                toolbar: [
                    'undo redo | formatselect | bold italic underline | alignleft aligncenter alignright alignjustify',
                    'link unlink | bullist numlist | outdent indent | removeformat help'
                ],
                content_style: `
                    body {
                        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
                        font-size: 14px;
                        line-height: 1.5;
                    }
                `,
                height: 300,
                paste_retain_style_properties: 'color font-size font-weight font-style',
                valid_elements: 'a[href|target],ul,ol,li,strike,strong/b,em/i,u,br,p[style],hr[width|size|noshade],span[style|id]',
                skin: 'oxide',
                paste_word_valid_elements: 'b,strong,i,em,h1,h2,h3,p,br',
                browser_spellcheck: true,
                contextmenu: false,
                setup: function(editor) {
                    editor.on('change', function() {
                        editor.save();
                    });
                }
            });
        });
    </script>
@endsection