@extends('painel-admin.menu')
@section('title', 'Edição da AGENDA')
@section('content')
    <form method="POST" id="formEnvioDados" action="{{route('agenda.update' , $agenda->id)}}" enctype="multipart/form-data">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
        @csrf
        @method('put')
        <div class="row">
            <div class="col-12 mt-3">
                <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-center flex-wrap">
                    <h2 class="mb-3 mb-sm-0">Edição da Agenda</h2>

                    <div class="d-flex flex-column flex-sm-row flex-wrap" style="gap: 5px;">
                        <a href="{{ route('agenda.index') }}" class="btn btn-danger btn">Voltar</a>
                        <button type="button" class="btn btn-primary btnSalvar">Alterar</button>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-12">
                <label for="grupo" class="form-label">Titulo</label>
                <input type="text" class="form-control" id="titulo" name="titulo" value="{{old('titulo',$agenda->titulo)}}">
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-md-12">
                <label>Descrição</label>
                <textarea class="form-control" id="descricao" name="descricao">{{ old('descricao', $agenda->descricao) }}</textarea>
                @if ($errors->has('descricao'))
                    <p class="text-danger">{{ $errors->first('descricao') }}</p>
                @endif 
            </div>
        </div>
        <row class="row mt-2">
            <div id="cliente-container" class="col-md-12">
                <label>Cliente</label>
                <select id="cliente" class="custom-select @error('cliente') is-invalid @enderror select2" name="cliente_agenda" autocomplete="cliente" autofocus>
                    <option></option>
                    @foreach($empresas as $empresa)
                        <option value="{{ $empresa->Codigo }}" {{ old('cliente', $agenda->id_empresa) == $empresa->Codigo ? 'selected' : '' }}>
                            {{ $empresa->RazaoSocialCliente . ' - ' . $empresa->CGCCliente }}
                        </option>
                    @endforeach
                </select>
                @if ($errors->has('cliente'))
                    <p class="text-danger">{{ $errors->first('cliente') }}</p>
                @endif
            </div>
        </row>
        <div class="row mt-2 mb-4">
            <div class="col-md-6">
                <label>Data Evento</label>
                <input type="datetime-local" class="form-control" id="data_evento" name="data_evento" value="{{ $agenda->data_evento }}" required oninput="validarAno(this)" >
                @if ($errors->has('data_evento'))
                    <p class="text-danger">{{ $errors->first('data_evento') }}</p>
                @endif
            </div>
            <div class="col-md-6">
                <label>Tipo do Evento</label>
                <select id="tipo_evento" class="form-control" name="tipo_evento" required>
                    <option value="treinamento" {{ old('tipo_evento', $agenda->tipo_evento) == "treinamento" ? 'selected' : '' }}>Treinamento</option>
                    <option value="treinamento_presencial" {{ old('tipo_evento', $agenda->tipo_evento) == "treinamento_presencial" ? 'selected' : '' }}>Treinamento Presencial</option>
                    <option value="lembrete" {{ old('tipo_evento', $agenda->tipo_evento) == "lembrete" ? 'selected' : '' }}>Lembrete</option>
                    <option value="instalacao" {{ old('tipo_evento', $agenda->tipo_evento) == "instalacao" ? 'selected' : '' }}>Instalação</option>
                </select>
            </div>
        </div>
    </form>
   
    <style>

        .select2-container {
            width: 100% !important;
        }

        .select2-selection--single {
            border: 1px solid #ced4da;
            border-radius: 4px;
            padding: 10px;
            height: 40px !important;
            box-sizing: border-box; 
        }

        .select2-selection__arrow {
            height: 38px; 
        }

        .select2-selection__rendered {
            color: #495057; 
            line-height: 40px; 
        }

        .select2-container--default .select2-selection--single .select2-selection__placeholder {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 14px;
            color: #6c757d;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .select2-container--default.select2-container--focus .select2-selection--single {
            border-color: #80bdff; 
        }
      
        
    </style>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/i18n/pt-BR.js"></script>

    <script>

        var currentItemId = 'agenda-link';

        function validarAno(input) {
            const data = input.value;
            const partes = data.split('-');
            const ano = partes[0];

            if (ano.length > 4) {
                partes[0] = ano.slice(0, 4);


                input.value = partes.join('-');

                Swal.fire({
                    icon: 'error',
                    title: 'Ano inválido!',
                    text: 'O ano não pode ter mais de 4 dígitos.',
                    confirmButtonText: 'OK'
                });
            }
        }
        document.querySelectorAll('.btnSalvar').forEach(function(button) {
            button.addEventListener('click', function(event) {
                event.preventDefault();

                const tipoEvento = document.getElementById('tipo_evento').value;
                const titulo = document.getElementById('titulo').value.trim();
                const descricao = document.getElementById('descricao').value.trim();
                const dataEvento = document.getElementById('data_evento').value;

                if (!titulo || !descricao || !dataEvento) {
                    Swal.fire('Campos obrigatórios', 'Preencha todos os campos: Título, Descrição e Data do Evento.', 'warning');
                    return;
                }

                if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(dataEvento)) {
                    Swal.fire('Data inválida', 'Informe a data e hora do evento corretamente.', 'warning');
                    return;
                }

                if (tipoEvento === 'lembrete') {
                    confirmarCadastro();
                    return;
                }

                const clienteId = document.getElementById('cliente').value;

                if (!clienteId) {
                    Swal.fire('Atenção', 'Selecione um cliente primeiro.', 'warning');
                    return;
                }
                confirmarCadastro();
            });
        });

        function confirmarCadastro() {
            Swal.fire({
                title: 'Confirmação',
                text: 'Deseja realmente Alterar essa Agenda?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Confirmar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('formEnvioDados').submit(); 
                }
            });
        }


        var $j = jQuery.noConflict();
        $j(document).ready(function() {
            var oldCliente = "{{ old('cliente') }}";

            if (oldCliente) {
                $j.ajax({
                    url: '/buscar-cliente-id',
                    dataType: 'json',
                    data: { id: oldCliente },
                    success: function(data) {
                        if (data) {
                            var select = new Option(data.nome, data.id, true, true);
                            $j('#cliente').append(select).trigger('change');
                        }
                    }
                });
            }

            $j('#cliente').select2({
                theme: 'default',
                language: "pt-BR",
                width: '100%',
                ajax: {
                    url: '/buscar-cliente',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return { q: params.term };
                    },
                    processResults: function (data) {
                        return { results: data.results };
                    },
                    cache: true
                },
                minimumInputLength: 1,
                placeholder: 'Digite a razão social ou fantasia para buscar',
            });

            $j('#cliente').on('select2:select', function (e) { 
                var data = e.params.data;
            });
        });

        function toggleCliente() {
            const tipoEvento = document.getElementById('tipo_evento').value;
            const clienteContainer = document.getElementById('cliente-container');

            if (tipoEvento === 'lembrete') {
                clienteContainer.style.display = 'none';
            } else {
                clienteContainer.style.display = 'block';
            }
        }

        document.addEventListener('DOMContentLoaded', function () {
            toggleCliente(); 
            document.getElementById('tipo_evento').addEventListener('change', toggleCliente);
        });
    </script>


    
@endsection