@extends('layouts.publicador.novo_padrao')

@section('content')
    <div class="container my-4 py-3">
        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <h3 class="card-title mb-4">Pesquisar Contratos de Suporte</h3>
                <form action="{{ route('publicador.contratos_suporte.index') }}" method="GET">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label for="titulo" class="form-label">Título</label>
                            <input type="text" class="form-control" id="titulo" name="titulo"
                                value="{{ request('titulo') }}" placeholder="Buscar por título">
                        </div>
                        <div class="col-md-4">
                            <label for="contrato" class="form-label">Contrato</label>
                            <input type="text" class="form-control" id="contrato" name="contrato"
                                value="{{ request('contrato') }}" placeholder="Buscar por contrato">
                        </div>
                        <div class="col-md-4">
                            <label for="responsavel" class="form-label">Responsável</label>
                            <select name="responsavel[]" id="responsavel" class="form-control" multiple>
                                @foreach ($responsaveis as $responsavel)
                                    <option value="{{ $responsavel }}"
                                        {{ (is_array(request('responsavel')) && in_array($responsavel, request('responsavel'))) ||
                                        (is_string(request('responsavel')) && $responsavel == request('responsavel'))
                                            ? 'selected'
                                            : '' }}>
                                        {{ $responsavel }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-search me-2"></i>Pesquisar
                            </button>
                            <a href="{{ route('publicador.contratos_suporte.index') }}"
                                class="btn btn-outline-secondary ms-2">
                                <i class="bi bi-x-circle me-2"></i>Limpar
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success text-center remove-after-3s" role="alert">
                {{ session('success') }}
            </div>
        @endif

        <div class="card shadow-sm">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="card-title m-0">Lista de Contratos de Suporte</h5>
                    <a href="{{ route('publicador.contratos_suporte.create') }}" class="btn btn-sm btn-success">
                        <i class="bi bi-plus-circle me-1"></i> Adicionar
                    </a>
                </div>
                @if ($contratos->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover table-striped">
                            <thead class="table-light">
                                <tr>
                                    <th>Objeto</th>
                                    <th>Contrato</th>
                                    <th>Responsável</th>
                                    <th>Data Início</th>
                                    <th>Data Fim</th>
                                    <th>Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($contratos as $contrato)
                                    <tr>
                                        <td>{{ $contrato->titulo }}</td>
                                        <td>{{ $contrato->contrato }}</td>
                                        <td>{{ $contrato->responsavel }}</td>
                                        <td>{{ $contrato->data_inicio_formatada }}</td>
                                        <td>{{ $contrato->data_fim_formatada }}</td>
                                        <td>
                                            <button class="btn btn-sm btn-outline-info view-details"
                                                data-id="{{ $contrato->id }}"
                                                onclick="showContratoDetails({{ $contrato->id }})">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                            <a href="{{ route('publicador.contratos_suporte.edit', $contrato->id) }}"
                                                class="btn btn-sm btn-outline-primary" title="Editar">
                                                <i class="fa fa-pencil"></i>
                                            </a>
                                            <form
                                                action="{{ route('publicador.contratos_suporte.destroy', $contrato->id) }}"
                                                method="POST" class="d-inline delete-form">
                                                @csrf
                                                @method('DELETE')
                                                <button type="button" class="btn btn-sm btn-outline-danger btn-delete"
                                                    title="Excluir">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3">
                        {{ $contratos->links() }}
                    </div>
                @else
                    <div class="alert alert-info">
                        Nenhum contrato encontrado.
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Modal para detalhes do contrato -->
    <div class="modal fade" id="contratoDetailModal" tabindex="-1" aria-labelledby="contratoDetailModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="contratoDetailModalLabel">Detalhes do Contrato</h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label fw-bold">Objeto:</label>
                                <p id="modalTitulo" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label fw-bold">Contrato:</label>
                                <p id="modalContrato" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label fw-bold">Condição do Contrato:</label>
                                <p id="modalCondicaocontrato" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Contatos:</label>
                                <p id="modalContatos" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Email:</label>
                                <p id="modalEmail" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Telefone:</label>
                                <p id="modalTelefone" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Responsável:</label>
                                <p id="modalResponsavel" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Data de Início:</label>
                                <p id="modalDataInicio" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Data de Fim:</label>
                                <p id="modalDataFim" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label class="form-label fw-bold">Observações:</label>
                                <p id="modalObs" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label class="form-label fw-bold">Anexos:</label>
                                <div id="modalAnexos"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Data de Criação:</label>
                                <p id="modalCreatedAt" class="form-control-plaintext"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label fw-bold">Última Atualização:</label>
                                <p id="modalUpdatedAt" class="form-control-plaintext"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css"
        rel="stylesheet" />
    <style>
        /* Estilos do formulário */
        .modal-header.bg-primary.text-white {
            background-color: #004071 !important;
        }

        .col-12.mt-4 {
            text-align: center;
        }

        .pagination {
            justify-content: center;
        }

        h3.card-title.mb-4 {
            text-align: center;
        }

        .card {
            border-radius: 15px;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }

        .form-control,
        .form-select {
            border-radius: 10px;
        }

        .btn {
            border-radius: 10px;
            padding: 0.5rem 1.5rem;
        }

        .select2-container--bootstrap-5 .select2-selection {
            border-radius: 10px;
        }

        .select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field {
            border-radius: 5px;
        }

        .table {
            font-size: 0.9rem;
        }

        .table th {
            font-weight: 600;
        }

        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }

        .input-group-text {
            background-color: #f8f9fa;
        }

        .col-12.espaco {
            margin-top: 1%;
        }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#responsavel').select2({
                theme: 'bootstrap-5',
                width: '100%',
                placeholder: 'Selecione um ou mais responsáveis',
                allowClear: true
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const deleteButtons = document.querySelectorAll('.btn-delete');
            deleteButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    const form = this.closest('form');
                    const url = form.action;
                    const token = form.querySelector('input[name="_token"]').value;

                    Swal.fire({
                        title: 'Tem certeza?',
                        text: "Você não poderá reverter isso!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Sim, excluir!',
                        cancelButtonText: 'Cancelar'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // Usar AJAX para submeter o formulário
                            fetch(url, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRF-TOKEN': token
                                    },
                                    body: JSON.stringify({
                                        _method: 'DELETE'
                                    })
                                })
                                .then(response => response.json())
                                .then(data => {
                                    if (data.success) {
                                        Swal.fire(
                                            'Excluído!',
                                            'O contrato foi excluído com sucesso.',
                                            'success'
                                        ).then(() => {
                                            // Recarregar a página ou atualizar a tabela
                                            window.location.reload();
                                        });
                                    } else {
                                        Swal.fire(
                                            'Erro!',
                                            'Ocorreu um erro ao excluir o contrato.',
                                            'error'
                                        );
                                    }
                                })
                                .catch(error => {
                                    console.error('Error:', error);
                                    Swal.fire(
                                        'Erro!',
                                        'Ocorreu um erro ao excluir o contrato.',
                                        'error'
                                    );
                                });
                        }
                    });
                });
            });
        });

        function showContratoDetails(id) {
            fetch(`{{ route('publicador.contratos_suporte.show', ['id' => ':id']) }}`.replace(':id', id))
                .then(response => response.json())
                .then(data => {
                    const setTextContent = (id, text) => {
                        const element = document.getElementById(id);
                        if (element) element.textContent = text || '--';
                    };

                    setTextContent('modalTitulo', data.titulo);
                    setTextContent('modalContrato', data.contrato);
                    setTextContent('modalContatos', data.contatos);
                    setTextContent('modalEmail', data.email);
                    setTextContent('modalTelefone', data.telefone);
                    setTextContent('modalResponsavel', data.responsavel);
                    setTextContent('modalObs', data.obs);
                    setTextContent('modalDataInicio', data.data_inicio);
                    setTextContent('modalDataFim', data.data_fim);
                    setTextContent('modalCreatedAt', data.created_at);
                    setTextContent('modalUpdatedAt', data.updated_at);
                    setTextContent('modalCondicaocontrato', data.condicao_contrato);


                    const anexosContainer = document.getElementById('modalAnexos');
                    if (anexosContainer) {
                        anexosContainer.innerHTML = '';
                        if (data.anexos && data.anexos.length > 0) {
                            data.anexos.forEach((anexo, index) => {
                                const fileName = anexo.split('/').pop(); // Extrai apenas o nome do arquivo
                                const anexoElement = document.createElement('div');
                                anexoElement.className =
                                    'file-preview d-flex align-items-center bg-light p-2 mb-2 rounded';
                                anexoElement.innerHTML = `
                            <span class="fa fa-file mr-2"></span>
                            <span class="file-name flex-grow-1">${fileName}</span>
                            <div class="file-actions">
                                <button type="button" class="btn btn-sm btn-outline-info view-file" onclick="viewFile('existing', '${anexo}')" title="Visualizar">
                                    <i class="fa fa-eye"></i>
                                </button>
                            </div>
                        `;
                                anexosContainer.appendChild(anexoElement);
                            });
                        } else {
                            anexosContainer.innerHTML = '<p>Nenhum anexo disponível.</p>';
                        }
                    }

                    const modal = new bootstrap.Modal(document.getElementById('contratoDetailModal'));
                    modal.show();
                })
                .catch(error => console.error('Error:', error));
        }

        function viewFile(type, filePath) {
            if (type === 'existing') {
                window.open(`{{ url('storage') }}/${filePath}`, '_blank');
            }
        }
    </script>
@endsection