@extends('layouts.master')

@section('content')
    <div class="new-ouvidoria">
        <div class="row g-8">
            <div class="col-lg-4">
                <div class="card mb-4 border">
                    <div class="card-header bg-dark py-3 text-white">
                        <h5 class="mb-0"><i class="bi bi-bar-chart me-2"></i>Estatísticas da Ouvidoria</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="fw-medium">Denúncias</span>
                                <span class="text-dark fw-bold" id="denuncia-percent">0%</span>
                            </div>
                            <div class="progress rounded-0" style="height: 8px;">
                                <div class="progress-bar bg-dark" id="denuncia-bar" role="progressbar" style="width: 0%">
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="fw-medium">Reclamações</span>
                                <span class="text-dark fw-bold" id="reclamacao-percent">0%</span>
                            </div>
                            <div class="progress rounded-0" style="height: 8px;">
                                <div class="progress-bar bg-gray-700" id="reclamacao-bar" role="progressbar"
                                    style="width: 0%"></div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="fw-medium">Sugestões</span>
                                <span class="text-dark fw-bold" id="sugestao-percent">0%</span>
                            </div>
                            <div class="progress rounded-0" style="height: 8px;">
                                <div class="progress-bar bg-secondary" id="sugestao-bar" role="progressbar"
                                    style="width: 0%"></div>
                            </div>
                        </div>
                        <div class="mb-0">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="fw-medium">Elogios</span>
                                <span class="text-dark fw-bold" id="elogio-percent">0%</span>
                            </div>
                            <div class="progress rounded-0" style="height: 8px;">
                                <div class="progress-bar bg-gray-600" role="progressbar" id="elogio-bar" style="width: 0%">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card mb-4 border">
                    <div class="card-header bg-dark py-3 text-white">
                        <h5 class="mb-0"><i class="bi bi-geo-alt me-2"></i>Manifestação Presencial</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <p class="fw-medium mb-0">Setor</p>
                            <p class="text-muted small mb-2">Controle Interno</p>
                        </div>
                        <div class="mb-3">
                            <p class="fw-medium mb-0">Endereço</p>
                            <p class="text-muted small mb-1">R. Libino Ferreira Leite, 251 </p>
                            <p class="text-muted small mb-2">Centro, Caracol - MS, 79270-000, nº511</p>
                        </div>
                        <div class="mb-3">
                            <p class="fw-medium mb-0">Responsável</p>
                            <p class="text-muted small mb-2">XXXXXXXXXXX</p>
                        </div>
                        <div class="mb-3">
                            <p class="fw-medium mb-0">E-mail</p>
                            <p class="text-muted small mb-2">ouvidoria@camaracaracol.ms.gov.br</p>
                        </div>
                        <div class="mb-3">
                            <p class="fw-medium mb-0">Telefone</p>
                            <p class="text-muted small mb-2">(67) 3495-1467
                            </p>
                        </div>
                        <div class="mb-0">
                            <p class="fw-medium mb-0">Horário de Atendimento</p>
                            <p class="text-muted small mb-0">De segunda a sexta, das 7:00 hrs as 11:00 hrs.</p>
                        </div>
                    </div>
                </div>
                <div class="card border">
                    <div class="card-header bg-dark py-3 text-white">
                        <h5 class="mb-0"><i class="bi bi-phone me-2"></i>Aplicativo da Ouvidoria</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small mb-3">Baixe nosso aplicativo para acompanhar suas manifestações</p>
                        <div class="row g-2">
                            <div class="col-6">
                                <div class="border p-2 text-center">
                                    <p class="fw-medium small mb-1">Google Play</p>
                                    <img src="https://camaramunicipaldejardim.ms.gov.br/assets/images/google.png"
                                        alt="Google Play" class="img-fluid mb-2" style="max-height: 80px;">
                                    <img src="https://camaramunicipaldejardim.ms.gov.br/assets/images/QRCode_F%C3%A1cil.png"
                                        width="80" height="80" alt="QR Code" class="img-fluid">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="border p-2 text-center">
                                    <p class="fw-medium small mb-1">Apple Store</p>
                                    <br />
                                    <img src="https://camaramunicipaldejardim.ms.gov.br/assets/images/Apple_Store.png"
                                        alt="Apple Store" class="img-fluid mb-1" style="max-height: 35px;">
                                    <br /><br />
                                    <img src="https://camaramunicipaldejardim.ms.gov.br/assets/images/QRCode_F%C3%A1cil.png"
                                        width="82" height="82" alt="QR Code" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <!-- Busca de Protocolo -->
                <div class="card mb-4 border">
                    <div class="card-header bg-dark py-3 text-white">
                        <h5 class="mb-0"><i class="bi bi-search me-2"></i>Acompanhamento de Manifestação</h5>
                    </div>
                    <div class="card-body">
                        <form id="busca-protocolo-form" class="row g-2 align-items-center">
                            {!! csrf_field() !!}
                            <input type="hidden" name="entidade_id" value="cminocencia">
                            <div class="col-md-8">
                                <input type="text" name="protocolo" class="form-control rounded-0"
                                    placeholder="Informe o número do protocolo" required>
                            </div>
                            <div class="col-md-4">
                                <button type="button" id="buscar-protocolo-btn" class="btn btn-dark w-100 rounded-0">
                                    <i class="bi bi-search me-1"></i> Consultar
                                </button>
                            </div>
                        </form>

                        <div id="status-container" class="mt-4" style="display: none;">
                            <h6 class="border-bottom mb-3 pb-2">Status da Manifestação</h6>

                            <div class="status-timeline mb-4">
                                <div class="timeline-progress">
                                    <div class="timeline-step completed">
                                        <div class="timeline-dot"></div>
                                        <span class="timeline-label">Registrada</span>
                                    </div>
                                    <div class="timeline-step completed">
                                        <div class="timeline-dot"></div>
                                        <span class="timeline-label">Em análise</span>
                                    </div>
                                    <div class="timeline-step active">
                                        <div class="timeline-dot"></div>
                                        <span class="timeline-label">Em andamento</span>
                                    </div>
                                    <div class="timeline-step">
                                        <div class="timeline-dot"></div>
                                        <span class="timeline-label">Concluída</span>
                                    </div>
                                </div>
                            </div>

                            <div class="manifestation-details">
                                <h6 class="border-bottom mb-3 pb-2">Detalhes da Manifestação</h6>
                                <div class="bg-light p-3">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <p class="mb-2"><strong>Protocolo:</strong> <span
                                                    id="protocol-number">20231021143025</span></p>
                                            <p class="mb-2"><strong>Assunto:</strong> Solicitação de informação</p>
                                        </div>
                                        <div class="col-md-6">
                                            <p class="mb-2"><strong>Data de abertura:</strong> 21/10/2023</p>
                                            <p class="mb-0"><strong>Previsão de conclusão:</strong> 30/10/2023</p>
                                        </div>

                                        <div class="col-12 mt-3" id="response-container" style="display: none;">
                                            <h6 class="mb-2">Resposta da Ouvidoria:</h6>
                                            <div class="rounded border bg-white p-3">
                                                <p id="response-text" class="text-muted small mb-0"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card border">
                    <div class="card-header bg-dark py-3 text-white">
                        <h4 class="mb-0"><i class="bi bi-pencil-square me-2"></i>Formulário de Ouvidoria</h4>
                    </div>
                    <div class="card-body p-4">

                        <div id="alert-container"></div>

                        <form id="ouvidoria-form" enctype="multipart/form-data">
                            {!! csrf_field() !!}
                            <input type="hidden" name="entidade_id" value="cminocencia">

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-medium">Tipo de Manifestação <span
                                            class="text-danger">*</span></label>
                                    <select name="tipo" class="rounded-0 form-select" required>
                                        <option value="">Selecione o tipo</option>
                                        <option value="Denúncia">Denúncia</option>
                                        <option value="Reclamação">Reclamação</option>
                                        <option value="Sugestão">Sugestão</option>
                                        <option value="Elogio">Elogio</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-medium">Assunto <span class="text-danger">*</span></label>
                                    <input type="text" name="assunto" class="form-control rounded-0" required>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-medium">Descrição <span class="text-danger">*</span></label>
                                <textarea name="descricao" rows="4" class="form-control rounded-0"
                                    placeholder="Descreva detalhadamente sua manifestação..." required></textarea>
                                <div class="form-text">Máximo de 5000 caracteres</div>
                            </div>

                            <div class="form-check form-switch mb-3">
                                <input type="checkbox" class="form-check-input" id="anonimo-checkbox" name="anonimo"
                                    value="1">
                                <label class="form-check-label" for="anonimo-checkbox">Enviar como anônimo</label>
                            </div>

                            <div id="dados-pessoais">
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label fw-medium">Nome <span
                                                class="text-danger">*</span></label>
                                        <input type="text" name="name" class="form-control rounded-0" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-medium">E-mail <span
                                                class="text-danger">*</span></label>
                                        <input type="email" name="email" class="form-control rounded-0" required>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-medium">Parlamentar</label>
                                <select name="parlamentar_id" id="parlamentar-select" class="rounded-0 form-select">
                                    <option value="">Carregando parlamentares...</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-medium">Anexos (PDF, JPG, PNG)</label>
                                <input type="file" name="anexo[]" class="form-control rounded-0" multiple>
                                <div class="form-text">Tamanho máximo por arquivo: 5MB. Formatos aceitos: PDF, JPG, PNG
                                </div>
                            </div>

                            <!-- AQUI ESTÁ A CAIXINHA DO reCAPTCHA -->
                            <div class="g-recaptcha" data-sitekey="6LecoAMsAAAAACB1g-Opbl8numVZ_kLzfoA0k_y4"
                                style="margin: 0 auto; display: inline-block;">
                            </div>
                            <br />

                            <div class="d-grid">
                                <button type="button" id="enviar-manifestacao-btn"
                                    class="btn btn-dark btn-lg rounded-0 fw-medium py-3">
                                    <i class="bi bi-send me-2"></i>Enviar Manifestação
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Informações de Prazos -->
            <div class="col-lg-4">
                <div class="card mb-4 border">
                    <div class="card-header bg-dark py-3 text-white">
                        <h5 class="mb-0"><i class="bi bi-clock me-2"></i>Informações de Prazos</h5>
                    </div>
                    <div class="card-body">
                        <!-- Prazo de Resposta -->
                        <div class="mb-3">
                            <h6 class="fw-medium">Prazos de Resposta</h6>
                            <p class="text-muted small mb-0">
                                O prazo para resposta ao cidadão é de <strong>30 dias</strong> a contar da data em que a
                                manifestação foi registrada.
                                Este prazo pode ser prorrogado por mais 30 dias, mediante justificativa.
                            </p>
                        </div>

                        <!-- O que é a Ouvidoria -->
                        <div class="mb-3">
                            <h6 class="fw-medium">O que é a Ouvidoria?</h6>
                            <p class="text-muted small mb-0">
                                A ouvidoria funciona como uma ponte entre você e a Administração Pública (órgãos, entidades
                                e agentes públicos).
                                Recebe manifestações, analisa, orienta e encaminha às áreas responsáveis pelo tratamento ou
                                apuração.
                            </p>
                        </div>

                        <!-- Atividades da Ouvidoria -->
                        <div>
                            <h6 class="fw-medium">Atividades da Ouvidoria</h6>
                            <p class="text-muted small mb-0">
                                Além de receber e encaminhar manifestações, a ouvidoria identifica melhorias, propõe
                                mudanças
                                e aponta situações irregulares nos órgãos ou entidades, com base nas informações trazidas
                                pelos cidadãos.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <!-- AQUI ESTÁ A CORREÇÃO: Usar a API simples que exibe o widget v2 -->
    <script src="https://www.google.com/recaptcha/api.js"></script>
    <script>
        function loadStats() {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
                document.querySelector('input[name="_token"]')?.value;

            if (!csrfToken) {
                console.error('Token CSRF não encontrado!');
                return;
            }

            fetch(`/api/ouvidoria/stats`, {
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    credentials: 'same-origin'
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`Erro HTTP: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('Dados recebidos da API:', data);

                    const total = data.total || 1;
                    const stats = data.stats || {};

                    const tipos = [{
                            api: 'Denúncia',
                            html: 'denuncia'
                        },
                        {
                            api: 'Reclamação',
                            html: 'reclamacao'
                        },
                        {
                            api: 'Sugestão',
                            html: 'sugestao'
                        },
                        {
                            api: 'Elogio',
                            html: 'elogio'
                        }
                    ];

                    tipos.forEach(tipo => {
                        const count = stats[tipo.api]?.total || 0;
                        const percent = Math.round((count / total) * 100);

                        const bar = document.getElementById(`${tipo.html}-bar`);
                        const countLabel = document.getElementById(
                            `${tipo.html}-percent`);

                        if (bar && countLabel) {
                            bar.style.width = percent + '%';
                            bar.setAttribute('aria-valuenow', percent);
                            countLabel.textContent = count;
                            bar.setAttribute('title', `${count} ${tipo.api}`);
                        }
                    });
                })
                .catch(err => {
                    console.error('Erro ao carregar estatísticas:', err);
                });
        }

        document.addEventListener('DOMContentLoaded', loadStats);

        document.addEventListener('DOMContentLoaded', function() {
            const anonimoCheckbox = document.getElementById('anonimo-checkbox');
            const dadosPessoais = document.getElementById('dados-pessoais');
            const personalFields = dadosPessoais.querySelectorAll('input');
            const alertContainer = document.getElementById('alert-container');
            const parlamentarSelect = document.getElementById('parlamentar-select');
            const buscarProtocoloBtn = document.getElementById('buscar-protocolo-btn');
            const enviarManifestacaoBtn = document.getElementById('enviar-manifestacao-btn');

            const API_BASE_URL = '/api';

            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
                document.querySelector('input[name="_token"]')?.value;

            if (!csrfToken) {
                console.error('Token CSRF não encontrado!');
            }

            function showAlert(message, type = 'success') {
                alertContainer.innerHTML = `
                <div class="alert alert-${type} alert-dismissible fade show rounded-0" role="alert">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            `;

                setTimeout(() => {
                    const alertElement = alertContainer.querySelector('.alert');
                    if (alertElement) {
                        const alert = new bootstrap.Alert(alertElement);
                        alert.close();
                    }
                }, 5000);
            }

            function loadAssemblymen() {
                fetch(`${API_BASE_URL}/assemblymen`, {
                        method: 'GET',
                        headers: {
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        mode: 'cors'
                    })
                    .then(response => {
                        console.log('Resposta da API:', response);
                        if (!response.ok) {
                            throw new Error('Erro na rede: ' + response.status);
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log('Dados recebidos:', data);
                        if (data.status) {
                            parlamentarSelect.innerHTML = '<option value="">Selecione um parlamentar</option>';
                            data.data.forEach(parlamentar => {
                                const option = document.createElement('option');
                                option.value = parlamentar.id;
                                option.textContent = parlamentar.short_name || parlamentar.name;
                                parlamentarSelect.appendChild(option);
                            });
                        } else {
                            parlamentarSelect.innerHTML =
                                '<option value="">Erro ao carregar parlamentares</option>';
                            console.error('Erro na resposta da API:', data);
                        }
                    })
                    .catch(error => {
                        console.error('Erro ao carregar parlamentares:', error);
                        parlamentarSelect.innerHTML = '<option value="">Erro ao carregar</option>';
                        showAlert('Erro ao carregar lista de parlamentares.', 'danger');
                    });
            }

            function toggleCampos() {
                if (anonimoCheckbox.checked) {
                    dadosPessoais.style.display = 'none';
                    personalFields.forEach(input => {
                        input.removeAttribute('required');
                        input.value = '';
                    });
                } else {
                    dadosPessoais.style.display = 'block';
                    personalFields.forEach(input => input.setAttribute('required', 'required'));
                }
            }

            buscarProtocoloBtn.addEventListener('click', function() {
                const protocoloInput = document.querySelector('input[name="protocolo"]');
                const protocolo = protocoloInput.value.trim();
                const entidadeId = document.querySelector('input[name="entidade_id"]').value;

                if (!protocolo) {
                    showAlert('Por favor, informe um número de protocolo.', 'danger');
                    return;
                }

                buscarProtocoloBtn.disabled = true;
                buscarProtocoloBtn.innerHTML =
                    '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Buscando...';

                const formData = new FormData();
                formData.append('_token', csrfToken);
                formData.append('entidade_id', entidadeId);
                formData.append('protocolo', protocolo);

                fetch(`${API_BASE_URL}/chamados`, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: formData,
                        mode: 'cors'
                    })
                    .then(response => {
                        console.log(response.body);
                        if (!response.ok) {
                            throw new Error('Erro na rede: ' + response.status);
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log(data);
                        if (data.status) {
                            const statusContainer = document.getElementById('status-container');
                            statusContainer.style.display = 'block';
                            statusContainer.scrollIntoView({
                                behavior: 'smooth'
                            });

                            const manifest = data.data;
                            document.getElementById('protocol-number').textContent = manifest
                                .protocolo || '';
                            document.querySelector('.manifestation-details .col-md-6 p:nth-child(2)')
                                .innerHTML =
                                `<strong>Assunto:</strong> ${manifest.assunto || '-'}`;
                            document.querySelector('.manifestation-details .col-md-6 p:nth-child(1)')
                                .innerHTML =
                                `<strong>Protocolo:</strong> ${manifest.protocolo || '-'}`;
                            document.querySelector('.manifestation-details .col-md-6 p:nth-child(3)')
                                ?.remove();
                            document.querySelector('.manifestation-details .col-md-6 p:nth-child(4)')
                                ?.remove();

                            showAlert('Protocolo encontrado com sucesso!', 'success');

                            const timelineSteps = document.querySelectorAll('.timeline-step');
                            timelineSteps.forEach((step, index) => {
                                step.classList.remove('completed', 'active');
                                if (index < manifest.status) {
                                    step.classList.add('completed');
                                } else if (index === manifest.status) {
                                    step.classList.add('active');
                                }
                            });

                            // NOVO CÓDIGO A SER ADICIONADO PARA EXIBIR A RESPOSTA
                            const responseContainer = document.getElementById('response-container');
                            const responseText = document.getElementById('response-text');

                            if (responseContainer && responseText) {
                                if (manifest.resposta) {
                                    responseText.innerHTML = manifest.resposta;
                                    responseContainer.style.display = 'block';
                                } else {
                                    responseText.innerHTML = 'Sem resposta no momento.';
                                    responseContainer.style.display = 'block';
                                }
                            }
                            // FIM DO NOVO CÓDIGO

                        } else {
                            showAlert(data.message || 'Protocolo não encontrado.', 'danger');
                        }
                    })
                    .catch(error => {
                        console.error('Erro na busca:', error);
                        showAlert('Erro ao buscar protocolo. Tente novamente.', 'danger');
                    })
                    .finally(() => {
                        buscarProtocoloBtn.disabled = false;
                        buscarProtocoloBtn.innerHTML = '<i class="bi bi-search me-1"></i> Consultar';
                    });
            });

            enviarManifestacaoBtn.addEventListener('click', function() {
                const form = document.getElementById('ouvidoria-form');
                const formData = new FormData(form);

                // Adiciona o token do reCAPTCHA ao FormData
                var captchaResponse = grecaptcha.getResponse();

                if (captchaResponse.length === 0) {
                    showAlert('Complete o reCAPTCHA para continuar.', 'danger');
                    return;
                }

                formData.append('captchaResponse', captchaResponse);

                enviarManifestacaoBtn.disabled = true;
                enviarManifestacaoBtn.innerHTML =
                    '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Enviando...';

                fetch(`${API_BASE_URL}/store-manifestacao`, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: formData,
                        mode: 'cors'
                    })
                    .then(response => {
                        if (!response.ok) {
                            return response.json().then(errorData => {
                                throw new Error(errorData.message || 'Erro na rede: ' + response
                                    .status);
                            });
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log(data);
                        if (data.status) {
                            showAlert(
                                `Manifestação enviada com sucesso! Seu protocolo é: ${data.data}`,
                                'success'
                            );
                            form.reset();
                            toggleCampos();
                        } else {
                            let errorMessage = 'Erro ao enviar manifestação.';
                            if (data.errors) {
                                errorMessage = Object.values(data.errors).join('<br>');
                            } else if (data.message) {
                                errorMessage = data.message;
                            } else if (data.error) {
                                errorMessage = data.error;
                            }
                            showAlert(errorMessage, 'danger');
                        }
                        grecaptcha.reset();
                    })
                    .catch(error => {
                        console.error('Erro no envio:', error);
                        showAlert('Erro ao enviar manifestação. Tente novamente.', 'danger');
                        grecaptcha.reset();
                    })
                    .finally(() => {
                        enviarManifestacaoBtn.disabled = false;
                        enviarManifestacaoBtn.innerHTML =
                            '<i class="bi bi-send me-2"></i>Enviar Manifestação';
                    });
            });


            document.getElementById('busca-protocolo-form').addEventListener('submit', function(e) {
                e.preventDefault();
            });

            document.getElementById('ouvidoria-form').addEventListener('submit', function(e) {
                e.preventDefault();
            });

            toggleCampos();
            anonimoCheckbox.addEventListener('change', toggleCampos);
            loadAssemblymen();
        });
    </script>
    <style>
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            color: #333;
        }

        .card {
            border-radius: 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .card-header {
            border-radius: 0;
            font-weight: 500;
        }

        .btn-dark {
            background-color: #343a40;
            border-color: #343a40;
        }

        .btn-dark:hover {
            background-color: #23272b;
            border-color: #1d2124;
        }

        .form-control,
        .form-select {
            border-radius: 0;
            border: 1px solid #ced4da;
            padding: 10px 12px;
        }

        .form-control:focus,
        .form-select:focus {
            box-shadow: 0 0 0 2px rgba(52, 58, 64, 0.2);
            border-color: #343a40;
        }

        .progress {
            background-color: 'e9ecef';
            border-radius: 0;
        }

        .progress-bar {
            border-radius: 0;
        }

        .bg-gray-700 {
            background-color: #495057 !important;
        }

        .bg-gray-600 {
            background-color: #6c757d !important;
        }

        .status-timeline {
            position: relative;
            padding: 20px 0;
        }

        .timeline-progress {
            display: flex;
            justify-content: space-between;
            position: relative;
        }

        .timeline-progress::before {
            content: '';
            position: absolute;
            top: 15px;
            left: 0;
            right: 0;
            height: 2px;
            background: #dee2e6;
            z-index: 1;
        }

        .timeline-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .timeline-dot {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: white;
            border: 2px solid #dee2e6;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
        }

        .timeline-step.completed .timeline-dot {
            border-color: #343a40;
            background: #343a40;
            color: white;
            font-size: 12px;
        }

        .timeline-step.active .timeline-dot {
            border-color: #495057;
            background: #495057;
            color: white;
        }

        .timeline-label {
            font-size: 0.8rem;
            color: #6c757d;
            text-align: center;
        }

        @media (max-width: 768px) {
            .timeline-progress {
                flex-direction: column;
                align-items: flex-start;
            }

            .timeline-progress::before {
                width: 2px;
                height: 100%;
                top: 0;
                left: 11px;
            }

            .timeline-step {
                flex-direction: row;
                margin-bottom: 20px;
            }

            .timeline-dot {
                margin-right: 15px;
                margin-bottom: 0;
            }
        }

        .alert {
            border-radius: 0;
            border: none;
        }

        .spinner-border-sm {
            width: 1rem;
            height: 1rem;
        }

        .form-label {
            font-size: 0.875rem;
            white-space: nowrap;
        }
    </style>
@endsection