@extends('layouts.app')

@section('title', 'Novo Agendamento')

@push('styles-custom')
<style>
.sala-preview {
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    border-left: 4px solid;
}
</style>
@endpush

@section('content')
<div class="mb-9">
    <div class="row g-3 mb-4">
        <div class="col">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('agendamento.calendario') }}">Agendamento</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Novo Agendamento</li>
                </ol>
            </nav>
            <h2 class="mb-0">Novo Agendamento</h2>
        </div>
        <div class="col-auto">
            <a href="{{ route('agendamento.calendario') }}" class="btn btn-phoenix-secondary">
                <span class="fas fa-arrow-left me-2"></span>Voltar
            </a>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-12 col-xl-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Informações do Agendamento</h5>
                </div>
                <div class="card-body">
                    <form id="createAgendamentoForm">
                        @csrf
                        <div class="row g-3">
                            <!-- Título -->
                            <div class="col-12">
                                <label for="titulo" class="form-label">Título <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="titulo" name="titulo" required>
                                <div class="invalid-feedback"></div>
                            </div>
                            
                            <!-- Sala -->
                            <div class="col-12 col-md-6">
                                <label for="sala_id" class="form-label">Sala/Local <span class="text-danger">*</span></label>
                                <select class="form-select" id="sala_id" name="sala_id" required>
                                    <option value="">Selecione uma sala</option>
                                    @foreach($salas as $sala)
                                    <option value="{{ $sala->id }}" data-color="{{ $sala->cor_identificacao }}">
                                        {{ $sala->nome }}
                                        @if($sala->capacidade)
                                            ({{ $sala->capacidade }} pessoas)
                                        @endif
                                    </option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback"></div>
                            </div>
                            
                            <!-- Cliente/Responsável -->
                            <div class="col-12 col-md-6">
                                <label for="cliente_responsavel" class="form-label">Cliente/Responsável</label>
                                <input type="text" class="form-control" id="cliente_responsavel" name="cliente_responsavel">
                                <div class="invalid-feedback"></div>
                            </div>
                            
                            <!-- Data e Hora de Início -->
                            <div class="col-12 col-md-6">
                                <label for="data_inicio" class="form-label">Data/Hora Início <span class="text-danger">*</span></label>
                                <input type="datetime-local" class="form-control" id="data_inicio" name="data_inicio" required>
                                <div class="invalid-feedback"></div>
                            </div>
                            
                            <!-- Data e Hora de Fim -->
                            <div class="col-12 col-md-6">
                                <label for="data_fim" class="form-label">Data/Hora Fim <span class="text-danger">*</span></label>
                                <input type="datetime-local" class="form-control" id="data_fim" name="data_fim" required>
                                <div class="invalid-feedback"></div>
                            </div>
                            
                            <!-- Descrição -->
                            <div class="col-12">
                                <label for="descricao" class="form-label">Descrição</label>
                                <textarea class="form-control" id="descricao" name="descricao" rows="3" placeholder="Detalhes sobre o evento/agendamento"></textarea>
                                <div class="invalid-feedback"></div>
                            </div>
                            
                            <!-- Observações -->
                            <div class="col-12">
                                <label for="observacoes" class="form-label">Observações</label>
                                <textarea class="form-control" id="observacoes" name="observacoes" rows="2" placeholder="Observações internas ou especiais"></textarea>
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                        
                        <div class="mt-4">
                            <button type="submit" class="btn btn-phoenix-primary me-2" id="salvarBtn">
                                <span class="fas fa-save me-2"></span>Salvar Agendamento
                            </button>
                            <a href="{{ route('agendamento.calendario') }}" class="btn btn-phoenix-secondary">
                                <span class="fas fa-times me-2"></span>Cancelar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-12 col-xl-4">
            <!-- Preview da Sala Selecionada -->
            <div class="card mb-3" id="salaPreviewCard" style="display: none;">
                <div class="card-header">
                    <h5 class="mb-0">Sala Selecionada</h5>
                </div>
                <div class="card-body" id="salaPreviewContent">
                    <!-- Conteúdo será preenchido via JavaScript -->
                </div>
            </div>
            
            <!-- Alert de Disponibilidade -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Verificação de Disponibilidade</h5>
                </div>
                <div class="card-body">
                    <div id="disponibilidadeAlert" class="alert alert-info" role="alert">
                        <span class="fas fa-info-circle me-2"></span>
                        Selecione uma sala e defina o horário para verificar a disponibilidade.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts-custom')
<script>
$(document).ready(function() {
    // Auto-definir data/hora atual mínima
    const now = new Date();
    now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
    $('#data_inicio').attr('min', now.toISOString().slice(0, 16));
    
    // Preview da sala selecionada
    $('#sala_id').on('change', function() {
        const salaId = this.value;
        if (salaId) {
            showSalaPreview(salaId);
        } else {
            $('#salaPreviewCard').hide();
        }
        verificarDisponibilidade();
    });
    
    // Auto-definir data/hora fim baseada no início
    $('#data_inicio').on('change', function() {
        if (this.value && !$('#data_fim').val()) {
            const inicio = new Date(this.value);
            inicio.setHours(inicio.getHours() + 1);
            
            const year = inicio.getFullYear();
            const month = String(inicio.getMonth() + 1).padStart(2, '0');
            const day = String(inicio.getDate()).padStart(2, '0');
            const hours = String(inicio.getHours()).padStart(2, '0');
            const minutes = String(inicio.getMinutes()).padStart(2, '0');
            
            $('#data_fim').val(`${year}-${month}-${day}T${hours}:${minutes}`);
        }
        verificarDisponibilidade();
    });
    
    $('#data_fim').on('change', verificarDisponibilidade);
    
    // Submit do formulário
    $('#createAgendamentoForm').on('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const submitBtn = $('#salvarBtn');
        
        submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span>Salvando...');
        
        fetch('{{ route("agendamento.agendamentos.store") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                Swal.fire({
                    title: 'Sucesso!',
                    text: data.message,
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    window.location.href = '{{ route("agendamento.calendario") }}';
                });
            } else {
                showFormErrors(data.errors || {});
                
                Swal.fire({
                    title: 'Erro!',
                    text: data.message,
                    icon: 'error'
                });
            }
        })
        .catch(error => {
            console.error('Error:', error);
            Swal.fire({
                title: 'Erro!',
                text: 'Erro inesperado ao salvar agendamento.',
                icon: 'error'
            });
        })
        .finally(() => {
            submitBtn.prop('disabled', false).html('<span class="fas fa-save me-2"></span>Salvar Agendamento');
        });
    });
});

function showSalaPreview(salaId) {
    const salaOption = $(`#sala_id option[value="${salaId}"]`);
    const salaTexto = salaOption.text();
    const salaCor = salaOption.data('color') || '#0d6efd';
    
    const previewHtml = `
        <div class="sala-preview" style="border-left-color: ${salaCor}; background-color: ${salaCor}15;">
            <div class="d-flex align-items-center mb-2">
                <div class="me-2" style="width: 16px; height: 16px; background-color: ${salaCor}; border-radius: 3px;"></div>
                <strong>${salaTexto}</strong>
            </div>
            <small class="text-body-secondary">Esta sala será usada no agendamento</small>
        </div>
    `;
    
    $('#salaPreviewContent').html(previewHtml);
    $('#salaPreviewCard').show();
}

function verificarDisponibilidade() {
    const salaId = $('#sala_id').val();
    const dataInicio = $('#data_inicio').val();
    const dataFim = $('#data_fim').val();
    
    const alert = $('#disponibilidadeAlert');
    
    if (!salaId || !dataInicio || !dataFim) {
        alert.removeClass('alert-success alert-danger')
             .addClass('alert-info')
             .html('<span class="fas fa-info-circle me-2"></span>Selecione uma sala e defina o horário para verificar a disponibilidade.');
        return;
    }
    
    fetch('{{ route("agendamento.api.verificar-conflito") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            sala_id: salaId,
            data_inicio: dataInicio,
            data_fim: dataFim
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.conflict) {
            alert.removeClass('alert-info alert-success')
                 .addClass('alert-danger')
                 .html('<span class="fas fa-exclamation-triangle me-2"></span>' + data.message);
        } else {
            alert.removeClass('alert-info alert-danger')
                 .addClass('alert-success')
                 .html('<span class="fas fa-check me-2"></span>' + data.message);
        }
    });
}

function showFormErrors(errors) {
    // Limpar erros anteriores
    $('.is-invalid').removeClass('is-invalid');
    $('.invalid-feedback').text('');
    
    // Mostrar novos erros
    Object.keys(errors).forEach(field => {
        const input = $(`#${field}`);
        const feedback = input.siblings('.invalid-feedback');
        
        input.addClass('is-invalid');
        feedback.text(errors[field][0]);
    });
}
</script>
@endpush