@extends('layouts.app')

@section('title', 'Gerenciar Salas')

@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">Gerenciar Salas</li>
                </ol>
            </nav>
            <h2 class="mb-0">Gerenciar Salas</h2>
        </div>
        <div class="col-auto">
            <button class="btn btn-phoenix-primary me-2" type="button" data-bs-toggle="modal" data-bs-target="#novaSalaModal">
                <span class="fas fa-plus me-2"></span>Nova Sala
            </button>
            <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="card">
        <div class="card-header">
            <h5 class="mb-0">Lista de Salas</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-sm fs-9 mb-0">
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Capacidade</th>
                            <th>Status</th>
                            <th>Equipamentos</th>
                            <th class="text-end">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($salas as $sala)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="me-2" style="width: 16px; height: 16px; background-color: {{ $sala->cor_identificacao }}; border-radius: 3px;"></div>
                                    <div>
                                        <strong>{{ $sala->nome }}</strong>
                                        @if($sala->descricao)
                                            <br><small class="text-body-secondary">{{ Str::limit($sala->descricao, 50) }}</small>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td>{{ $sala->capacidade ? $sala->capacidade . ' pessoas' : 'Não definida' }}</td>
                            <td>
                                <span class="badge bg-{{ $sala->status === 'ativa' ? 'success' : 'secondary' }}">
                                    {{ ucfirst($sala->status) }}
                                </span>
                            </td>
                            <td>
                                @if($sala->equipamentos && count($sala->equipamentos) > 0)
                                    <span class="badge bg-info">{{ count($sala->equipamentos) }} itens</span>
                                @else
                                    <span class="text-body-tertiary">Nenhum</span>
                                @endif
                            </td>
                            <td class="text-end">
                                <div class="btn-group btn-group-sm">
                                    <button class="btn btn-phoenix-primary" onclick="editarSala({{ $sala->id }})" title="Editar">
                                        <span class="fas fa-edit"></span>
                                    </button>
                                    <button class="btn btn-phoenix-{{ $sala->status === 'ativa' ? 'warning' : 'success' }}" onclick="toggleStatusSala({{ $sala->id }})" title="{{ $sala->status === 'ativa' ? 'Desativar' : 'Ativar' }}">
                                        <span class="fas fa-{{ $sala->status === 'ativa' ? 'pause' : 'play' }}"></span>
                                    </button>
                                    <button class="btn btn-phoenix-danger" onclick="excluirSala({{ $sala->id }})" title="Excluir">
                                        <span class="fas fa-trash"></span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-4">
                                <span class="fas fa-door-open text-body-tertiary fs-1 mb-3 d-block"></span>
                                <h5 class="text-body-tertiary">Nenhuma sala cadastrada</h5>
                                <p class="text-body-secondary">Clique em "Nova Sala" para começar.</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Nova Sala -->
@include('agendamento.modals.sala-form')

@endsection

@push('scripts-custom')
<script>
$(document).ready(function() {
    // Submit do formulário de sala
    $('#salaForm').on('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const isEditing = $('#sala_id').val();
        const url = isEditing 
            ? `/agendamento/salas/${$('#sala_id').val()}` 
            : '{{ route("agendamento.salas.store") }}';
        
        if (isEditing) {
            formData.append('_method', 'PUT');
        }
        
        const submitBtn = $('#salvarSala');
        
        // Loading state
        submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span>Salvando...');
        
        // Debug: verificar dados sendo enviados
        console.log('Enviando dados para:', url);
        for (let pair of formData.entries()) {
            console.log(pair[0] + ': ' + pair[1]);
        }
        
        fetch(url, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => {
            console.log('Response status:', response.status);
            return response.json();
        })
        .then(data => {
            console.log('Response data:', data);
            
            if (data.success) {
                Swal.fire({
                    title: 'Sucesso!',
                    text: data.message,
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    $('#novaSalaModal').modal('hide');
                    // Forçar reload da página
                    window.location.reload();
                });
            } else {
                showSalaFormErrors(data.errors || {});
                
                Swal.fire({
                    title: 'Erro!',
                    text: data.message,
                    icon: 'error'
                });
            }
        })
        .catch(error => {
            console.error('Fetch Error:', error);
            Swal.fire({
                title: 'Erro!',
                text: 'Erro inesperado ao salvar sala.',
                icon: 'error'
            });
        })
        .finally(() => {
            // Reset loading state
            submitBtn.prop('disabled', false).html('<span class="fas fa-save me-2"></span>Salvar Sala');
        });
    });
    
    // Limpar formulário quando modal for fechado
    $('#novaSalaModal').on('hidden.bs.modal', function () {
        resetSalaForm();
    });
});

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 resetSalaForm() {
    $('#salaForm')[0].reset();
    $('#sala_id').val('');
    $('#form_method').val('POST');
    $('#novaSalaModalLabel').html('<span class="fas fa-door-open me-2"></span>Nova Sala');
    
    // Resetar equipamentos - deixar apenas um campo
    $('#equipamentosContainer').html(`
        <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>
    `);
    
    clearSalaFormErrors();
}

function showSalaFormErrors(errors) {
    clearSalaFormErrors();
    
    Object.keys(errors).forEach(field => {
        const input = $(`#sala_${field}, #${field}`);
        const feedback = input.siblings('.invalid-feedback');
        
        input.addClass('is-invalid');
        feedback.text(errors[field][0]);
    });
}

function clearSalaFormErrors() {
    $('#salaForm .is-invalid').removeClass('is-invalid');
    $('#salaForm .invalid-feedback').text('');
}

function editarSala(id) {
    window.location.href = `/agendamento/salas/${id}/edit`;
}
function toggleStatusSala(id) {
    fetch(`/agendamento/salas/${id}/toggle-status`, {
        method: 'PATCH',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            Swal.fire({
                title: 'Sucesso!',
                text: data.message,
                icon: 'success',
                timer: 2000,
                showConfirmButton: false
            }).then(() => {
                location.reload();
            });
        } else {
            Swal.fire({
                title: 'Erro!',
                text: data.message,
                icon: 'error'
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        Swal.fire({
            title: 'Erro!',
            text: 'Erro de conexão ao alterar status da sala.',
            icon: 'error'
        });
    });
}

function excluirSala(id) {
    Swal.fire({
        title: '⚠️ Confirmar Exclusão',
        text: 'Tem certeza que deseja excluir esta sala? Esta ação não pode ser desfeita.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: '🗑️ Sim, Excluir',
        cancelButtonText: '❌ Cancelar',
        reverseButtons: true,
        allowOutsideClick: false
    }).then((result) => {
        if (result.isConfirmed) {
            confirmarExclusaoSala(id);
        }
    });
}

function confirmarExclusaoSala(id) {
    Swal.fire({
        title: 'Excluindo...',
        text: 'Removendo sala do sistema',
        allowOutsideClick: false,
        showConfirmButton: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });
    
    fetch(`/agendamento/salas/${id}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            Swal.fire({
                title: '✅ Excluída!',
                text: data.message || 'Sala excluída com sucesso!',
                icon: 'success',
                timer: 2000,
                showConfirmButton: false
            }).then(() => {
                location.reload();
            });
        } else {
            Swal.fire({
                title: '❌ Erro!',
                text: data.message || 'Erro ao excluir sala',
                icon: 'error',
                confirmButtonText: 'OK'
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        Swal.fire({
            title: '❌ Erro!',
            text: 'Erro de conexão ao excluir sala',
            icon: 'error',
            confirmButtonText: 'OK'
        });
    });
}
</script>
@endpush