@extends('layouts.admin.theme')
@section('title', env('APP_NAME') . ' :: Indicadores de TI')

@section('content')
    <div class="card shadow-sm">

        @include('components.buttons._headLineButtonsBackAdd', [
            'headLine' => "<i class='fa-solid fa-computer'></i> " . __($headLine ?? 'Indicadores de TI'),
            'routeBack' => 'admin.dashboard',
            'routeBackParams' => [],
            'nameBack' => __('Voltar'),
            'permission' => 'INDICADORES_TI',

            'routeOther' => 'admin.indicadoresTi.relatorio.index',
            'nameOther' => __('Relatórios'),
            'fontawesomeOther' => '<i class="fa-solid fa-chart-bar"></i>',

            'tabs' => [
                [
                    'route' => 'admin.indicadoresTi.gerenciar',
                    'label' => 'Gerenciar Assuntos',
                    'class' => 'fa-sliders',
                    'permission' => 'INDICADORES_TI',
                    'permission_check' => 'editar',
                ],
                [
                    'route' => 'admin.indicadoresTi.gerenciar.clientes',
                    'label' => 'Gerenciar Clientes',
                    'class' => 'fa-users',
                    'permission' => 'INDICADORES_TI',
                    'permission_check' => 'editar',
                ],
            ],
        ])

        <div class="card-body">

            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $erro)
                            <li>{{ $erro }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @php
                $novoFormData = [
                    'chamadoForm' => new \App\Models\IndicadoresTi\Chamado([
                        'status' => 'pendente',
                        'prioridade' => 'media',
                        'tipo' => 'help_desk',
                        'canal' => 'portal',
                        'data_abertura' => now(),
                        'atendente_id' => auth()->id(),
                    ]),
                    'action' => route('admin.indicadoresTi.store'),
                    'method' => 'POST',
                    'assuntosForm' => collect(),
                    'subassuntosForm' => collect(),
                    'filterParams' => $filterParams ?? [],
                ];
            @endphp

            <div class="mt-3">
                @if (empty($chamadosAbertos))
                    <div class="tab-content border rounded p-3 bg-white shadow-sm">
                        <div class="tab-pane show active" id="painel-novo-chamado" role="tabpanel">
                            @include('admin.indicadoresTi.form', $novoFormData)
                        </div>
                    </div>
                @else
                    <ul class="nav nav-tabs flex-nowrap overflow-auto" id="abas-chamado" role="tablist" style="scrollbar-width: thin;">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-novo" data-bs-toggle="tab" data-bs-target="#painel-novo-chamado"
                                type="button" role="tab" aria-controls="painel-novo-chamado" aria-selected="false">
                                <i class="fa-solid fa-plus me-1"></i>{{ __('Novo Chamado') }}
                            </button>
                        </li>

                        @foreach ($chamadosAbertos as $chamadoAberto)
                            <li class="nav-item" role="presentation" id="aba-edicao-{{ $chamadoAberto->id }}">
                                <div class="nav-link d-flex align-items-center gap-2 px-3">
                                    <button class="nav-link {{ session('aba_ativa') == $chamadoAberto->id ? 'active' : '' }}"
                                        id="tab-editar-{{ $chamadoAberto->id }}" data-bs-toggle="tab"
                                        data-bs-target="#painel-editar-{{ $chamadoAberto->id }}" type="button" role="tab"
                                        aria-controls="painel-editar-{{ $chamadoAberto->id }}"
                                        aria-selected="{{ session('aba_ativa') == $chamadoAberto->id ? 'true' : 'false' }}">
                                        <i class="fa-solid fa-pen-to-square me-1"></i>
                                        {{ $chamadoAberto->numero }}
                                    </button>
                                    <a href="{{ route('admin.indicadoresTi.fecharAba', $chamadoAberto->id) }}"
                                        class="btn-close ms-1 fechar-aba-link" title="{{ __('Fechar aba') }}"
                                        aria-label="{{ __('Fechar aba') }}" data-chamado-id="{{ $chamadoAberto->id }}"
                                        style="font-size: 0.65rem; vertical-align: middle;"></a>
                                </div>
                            </li>
                        @endforeach
                    </ul>

                    <div class="tab-content border border-top-0 rounded-bottom p-3 bg-white shadow-sm">
                        <div class="tab-pane fade" id="painel-novo-chamado" role="tabpanel" aria-labelledby="tab-novo">
                            @include('admin.indicadoresTi.form', $novoFormData)
                        </div>

                        @foreach ($chamadosAbertos as $chamadoAberto)
                            <div class="tab-pane fade {{ session('aba_ativa') == $chamadoAberto->id ? 'show active' : '' }}"
                                id="painel-editar-{{ $chamadoAberto->id }}" role="tabpanel"
                                aria-labelledby="tab-editar-{{ $chamadoAberto->id }}">
                                @include('admin.indicadoresTi.form', [
                                    'chamadoForm' => $chamadoAberto,
                                    'action' => route('admin.indicadoresTi.update', $chamadoAberto->id),
                                    'method' => 'PUT',
                                    'assuntosForm' => $chamadoAberto->setor_id
                                        ? \App\Models\IndicadoresTi\Assunto::where('setor_id', $chamadoAberto->setor_id)->orderBy('nome')->get()
                                        : collect(),
                                    'subassuntosForm' => $chamadoAberto->assunto_id
                                        ? \App\Models\IndicadoresTi\Subassunto::where('assunto_id', $chamadoAberto->assunto_id)->orderBy('nome')->get()
                                        : collect(),
                                    'filterParams' => $filterParams,
                                ])
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            <div class="mt-4">
                @include('admin.indicadoresTi.list')
            </div>

        </div>
    </div>

    <div class="modal fade" id="modal-novo-cliente" tabindex="-1" aria-labelledby="modal-novo-cliente-label"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal-novo-cliente-label">{{ __('Novo Cliente') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="{{ __('Fechar') }}"></button>
                </div>
                <div class="modal-body">
                    <div id="novo-cliente-erro" class="alert alert-danger d-none" role="alert"></div>

                    <div class="mb-3">
                        <label class="form-label" for="nc-nome">{{ __('Nome') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="nc-nome"
                            placeholder="{{ __('Nome completo') }}" autocomplete="off">
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="nc-tipo-identificacao">{{ __('Tipo de Identificação') }} <span class="text-danger">*</span></label>
                        <select class="form-select" id="nc-tipo-identificacao">
                            <option value="cpf">{{ __('CPF') }}</option>
                            <option value="matricula">{{ __('Matrícula') }}</option>
                        </select>
                    </div>

                    <div class="mb-3" id="nc-grupo-cpf">
                        <label class="form-label" for="nc-cpf">{{ __('CPF') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="nc-cpf" placeholder="000.000.000-00"
                            autocomplete="off">
                    </div>

                    <div class="mb-3 d-none" id="nc-grupo-matricula">
                        <label class="form-label" for="nc-matricula">{{ __('Matrícula') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="nc-matricula"
                            placeholder="{{ __('Matrícula do servidor') }}" autocomplete="off">
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="nc-setor">{{ __('Setor') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="nc-setor" placeholder="{{ __('Setor') }}"
                            autocomplete="off">
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="nc-telefone">{{ __('Telefone') }}</label>
                        <input type="text" class="form-control" id="nc-telefone"
                            placeholder="{{ __('Telefone') }}" autocomplete="off">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">{{ __('Cancelar') }}</button>
                    <button type="button" class="btn btn-primary" id="btn-salvar-cliente">
                        <span class="spinner-border spinner-border-sm d-none me-1" id="spinner-salvar-cliente"
                            role="status" aria-hidden="true"></span>
                        {{ __('Salvar') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection