@extends('layouts.app')

@section('title', 'Editar Sala')

@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"><a href="{{ route('agendamento.salas.index') }}">Gerenciar Salas</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Editar Sala</li>
                </ol>
            </nav>
            <h2 class="mb-0">Editar Sala</h2>
        </div>
        <div class="col-auto">
            <a href="{{ route('agendamento.salas.index') }}" 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 da Sala</h5>
                </div>
                <div class="card-body">
                    <form id="editSalaForm">
                        @csrf
                        @method('PUT')
                        <div class="row g-3">
                            <!-- Nome -->
                            <div class="col-12">
                                <label for="nome" class="form-label">Nome da Sala <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="nome" name="nome" value="{{ $sala->nome }}" required>
                                <div class="invalid-feedback"></div>
                            </div>
                            
                            <!-- Capacidade -->
                            <div class="col-12 col-md-6">
                                <label for="capacidade" class="form-label">Capacidade</label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="capacidade" name="capacidade" min="1" value="{{ $sala->capacidade }}">
                                    <span class="input-group-text">pessoas</span>
                                </div>
                                <div class="invalid-feedback"></div>
                            </div>
                            
                            <!-- Cor de Identificação -->
                            <div class="col-12 col-md-6">
                                <label for="cor_identificacao" class="form-label">Cor de Identificação</label>
                                <input type="color" class="form-control form-control-color" id="cor_identificacao" name="cor_identificacao" value="{{ $sala->cor_identificacao }}" title="Escolha uma cor">
                                <div class="form-text">Cor usada no calendário</div>
                                <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">{{ $sala->descricao }}</textarea>
                                <div class="invalid-feedback"></div>
                            </div>
                            
                            <!-- Equipamentos -->
                            <div class="col-12">
                                <label class="form-label">Equipamentos Disponíveis</label>
                                <div id="equipamentosContainer">
                                    @if($sala->equipamentos && count($sala->equipamentos) > 0)
                                        @foreach($sala->equipamentos as $equipamento)
                                        <div class="input-group mb-2">
                                            <input type="text" class="form-control" name="equipamentos[]" value="{{ $equipamento }}" placeholder="Ex: Microfone, Piano, Computador">
                                            <button type="button" class="btn btn-outline-danger" onclick="removeEquipamento(this)">
                                                <span class="fas fa-times"></span>
                                            </button>
                                        </div>
                                        @endforeach
                                    @else
                                        <div class="input-group mb-2">
                                            <input type="text" class="form-control" name="equipamentos[]" placeholder="Ex: Microfone, Piano, Computador">
                                            <button type="button" class="btn btn-outline-danger" onclick="removeEquipamento(this)">
                                                <span class="fas fa-times"></span>
                                            </button>
                                        </div>
                                    @endif
                                </div>
                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="addEquipamento()">
                                    <span class="fas fa-plus me-1"></span>Adicionar Equipamento
                                </button>
                            </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 Alterações
                            </button>
                            <a href="{{ route('agendamento.salas.index') }}" 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 -->
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="mb-0">Preview da Sala</h5>
                </div>
                <div class="card-body" id="salaPreviewContent">
                    <div class="sala-preview" style="border-left-color: {{ $sala->cor_identificacao }}; background-color: {{ $sala->cor_identificacao }}15;">
                        <div class="d-flex align-items-center mb-2">
                            <div class="me-2" style="width: 16px; height: 16px; background-color: {{ $sala->cor_identificacao }}; border-radius: 3px;"></div>
                            <strong>{{ $sala->nome }}</strong>
                        </div>
                        @if($sala->capacidade)
                            <div class="mb-1"><small class="text-body-secondary">Capacidade: {{ $sala->capacidade }} pessoas</small></div>
                        @endif
                        @if($sala->descricao)
                            <div><small class="text-body-secondary">{{ Str::limit($sala->descricao, 100) }}</small></div>
                        @endif
                    </div>
                </div>
            </div>
            
            <!-- Informações -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Informações</h5>
                </div>
                <div class="card-body">
                    <div class="row g-2 text-body-secondary fs-9">
                        <div class="col-6">
                            <strong>Status:</strong>
                        </div>
                        <div class="col-6">
                            <span class="badge bg-{{ $sala->status === 'ativa' ? 'success' : 'secondary' }}">
                                {{ ucfirst($sala->status) }}
                            </span>
                        </div>
                        <div class="col-6">
                            <strong>Criado em:</strong>
                        </div>
                        <div class="col-6">
                            {{ $sala->created_at->format('d/m/Y H:i') }}
                        </div>
                        <div class="col-6">
                            <strong>Atualizado em:</strong>
                        </div>
                        <div class="col-6">
                            {{ $sala->updated_at->format('d/m/Y H:i') }}
                        </div>
                        <div class="col-6">
                            <strong>Agendamentos:</strong>
                        </div>
                        <div class="col-6">
                            {{ $sala->agendamentos_count }} futuros
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts-custom')
<script>
$(document).ready(function() {
    // Atualizar preview quando mudar cor ou nome
    $('#cor_identificacao, #nome, #capacidade, #descricao').on('change input', function() {
        updatePreview();
    });
    
    // Submit do formulário
    $('#editSalaForm').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.salas.update", $sala) }}', {
            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.salas.index") }}';
                });
            } 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 sala.',
                icon: 'error'
            });
        })
        .finally(() => {
            submitBtn.prop('disabled', false).html('<span class="fas fa-save me-2"></span>Salvar Alterações');
        });
    });
});

function addEquipamento() {
    const container = $('#equipamentosContainer');
    const newInput = `
        <div class="input-group mb-2">
            <input type="text" class="form-control" name="equipamentos[]" placeholder="Ex: Microfone, Piano, Computador">
            <button type="button" class="btn btn-outline-danger" onclick="removeEquipamento(this)">
                <span class="fas fa-times"></span>
            </button>
        </div>
    `;
    container.append(newInput);
}

function removeEquipamento(button) {
    $(button).closest('.input-group').remove();
}

function updatePreview() {
    const nome = $('#nome').val() || 'Nome da Sala';
    const cor = $('#cor_identificacao').val();
    const capacidade = $('#capacidade').val();
    const descricao = $('#descricao').val();
    
    let previewHtml = `
        <div class="sala-preview" style="border-left-color: ${cor}; background-color: ${cor}15;">
            <div class="d-flex align-items-center mb-2">
                <div class="me-2" style="width: 16px; height: 16px; background-color: ${cor}; border-radius: 3px;"></div>
                <strong>${nome}</strong>
            </div>
    `;
    
    if (capacidade) {
        previewHtml += `<div class="mb-1"><small class="text-body-secondary">Capacidade: ${capacidade} pessoas</small></div>`;
    }
    
    if (descricao) {
        const descLimitada = descricao.length > 100 ? descricao.substring(0, 100) + '...' : descricao;
        previewHtml += `<div><small class="text-body-secondary">${descLimitada}</small></div>`;
    }
    
    previewHtml += `</div>`;
    
    $('#salaPreviewContent').html(previewHtml);
}

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