@extends('layouts.admin.theme')
@section('title', env('APP_NAME') . ' :: ' . __('Gerenciar Clientes'))

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

        @include('components.buttons._headLineButtonsBackAdd', [
            'headLine' => "<i class='fa-solid fa-users'></i> " . __($headLine),
            'routeBack' => 'admin.indicadoresTi.index',
            'routeBackParams' => [],
            'nameBack' => __('Voltar'),
            'permission' => 'INDICADORES_TI',
        ])

        <div class="card-body">

            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fa-solid fa-circle-check me-2"></i>{{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{{ __('Fechar') }}"></button>
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fa-solid fa-circle-exclamation me-2"></i>
                    <ul class="mb-0 ps-3">
                        @foreach ($errors->all() as $erro)
                            <li>{{ $erro }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                        aria-label="{{ __('Fechar') }}"></button>
                </div>
            @endif

            <div class="card shadow-sm border-0">
                <div class="card-header bg-white py-3">
                    <div class="row align-items-center g-3">
                        <div class="col-lg-10">
                            <form method="GET" action="{{ route('admin.indicadoresTi.gerenciar.clientes') }}"
                                role="search">
                                <div class="input-group">
                                    <span class="input-group-text bg-white">
                                        <i class="fa-solid fa-magnifying-glass text-muted"></i>
                                    </span>

                                    <input type="text" name="busca" class="form-control"
                                        placeholder="{{ __('Buscar por nome, CPF, matrícula ou setor...') }}"
                                        value="{{ $busca }}" autocomplete="off"
                                        aria-label="{{ __('Buscar clientes') }}">

                                    @if ($busca)
                                        <a href="{{ route('admin.indicadoresTi.gerenciar.clientes') }}"
                                            class="btn btn-outline-secondary" aria-label="{{ __('Limpar busca') }}">
                                            <i class="fa-solid fa-xmark"></i>
                                        </a>
                                    @endif

                                    <button type="submit" class="btn btn-primary">
                                        <i class="fa-solid fa-magnifying-glass me-1"></i>
                                        {{ __('Buscar') }}
                                    </button>
                                </div>
                            </form>
                        </div>

                        <div class="col-lg-2 d-flex justify-content-lg-end">
                            <button type="button" class="btn btn-primary text-nowrap w-100 w-lg-auto"
                                data-bs-toggle="modal" data-bs-target="#gc-modal-novo-cliente">
                                <i class="fa-solid fa-plus me-1"></i>
                                {{ __('Novo Cliente') }}
                            </button>
                        </div>
                    </div>

                    <div class="card-header bg-white py-3 text-lg-end">
                        <small class="text-muted">
                            {{ __('Total de clientes:') }} <strong>{{ $clientes->total() }}</strong>
                        </small>
                    </div>
                </div>

                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="ps-4">{{ __('Nome') }}</th>
                                    <th>{{ __('CPF') }}</th>
                                    <th>{{ __('Matrícula') }}</th>
                                    <th>{{ __('Setor') }}</th>
                                    <th>{{ __('Telefone') }}</th>
                                    <th class="text-end pe-4">{{ __('Ações') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($clientes as $cliente)
                                    <tr>
                                        <td class="ps-4 fw-semibold">{{ $cliente->nome }}</td>
                                        <td>{{ $cliente->cpf ?? '—' }}</td>
                                        <td>{{ $cliente->matricula ?? '—' }}</td>
                                        <td>{{ $cliente->setor ?? '—' }}</td>
                                        <td>{{ $cliente->telefone ?? '—' }}</td>
                                        <td class="text-end pe-4">
                                            <div class="d-flex gap-1 justify-content-end">
                                                @if (auth()->user()->getPermissaoDetalhes('INDICADORES_TI')['editar'])
                                                    <button type="button" class="btn btn-sm btn-outline-primary"
                                                        data-bs-toggle="modal" data-bs-target="#modal-editar-cliente"
                                                        data-id="{{ $cliente->id }}"
                                                        aria-label="{{ __('Editar') }} {{ $cliente->nome }}"
                                                        title="{{ __('Editar') }}">
                                                        <i class="fa-solid fa-pen-to-square"></i>
                                                    </button>
                                                @endif

                                                @if (auth()->user()->getPermissaoDetalhes('INDICADORES_TI')['excluir'])
                                                    <form
                                                        action="{{ route('admin.indicadoresTi.gerenciar.clientes.destroy', $cliente) }}"
                                                        method="POST" class="d-inline gc-form-excluir"
                                                        data-nome="{{ $cliente->nome }}">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-outline-danger"
                                                            aria-label="{{ __('Excluir') }} {{ $cliente->nome }}"
                                                            title="{{ __('Excluir') }}">
                                                            <i class="fa-solid fa-trash"></i>
                                                        </button>
                                                    </form>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-5">
                                            <div class="text-muted">
                                                <i class="fa-solid fa-users-slash fa-2x mb-3 d-block"></i>
                                                {{ __('Nenhum cliente encontrado.') }}
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                @if ($clientes->hasPages())
                    <div class="card-footer bg-white">
                        <div class="d-flex justify-content-center">
                            {{ $clientes->links() }}
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    @if (auth()->user()->getPermissaoDetalhes('INDICADORES_TI')['adicionar'])
        <div class="modal fade" id="gc-modal-novo-cliente" tabindex="-1" aria-labelledby="gc-modal-novo-cliente-label"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content shadow">
                    <div class="modal-header bg-light">
                        <h5 class="modal-title" id="gc-modal-novo-cliente-label">
                            <i class="fa-solid fa-user-plus me-2 text-primary"></i>{{ __('Novo Cliente') }}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="{{ __('Fechar') }}"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-danger d-none" id="gc-nc-erros" role="alert">
                            <ul class="mb-0" id="gc-nc-erros-lista"></ul>
                        </div>

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

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

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

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

                        <div class="mb-3">
                            <label class="form-label fw-medium" for="gc-nc-setor">{{ __('Setor') }}</label>
                            <input type="text" class="form-control" id="gc-nc-setor"
                                placeholder="{{ __('Ex: TI, RH, Financeiro...') }}" autocomplete="off">
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-medium" for="gc-nc-telefone">{{ __('Telefone') }}</label>
                            <input type="text" class="form-control" id="gc-nc-telefone" placeholder="(00) 00000-0000"
                                autocomplete="off">
                        </div>

                        <small class="text-muted">
                            <i
                                class="fa-solid fa-circle-info me-1"></i>{{ __('Informe o CPF ou a Matrícula (pelo menos um).') }}
                        </small>
                    </div>
                    <div class="modal-footer bg-light">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fa-solid fa-xmark me-1"></i>{{ __('Cancelar') }}
                        </button>
                        <button type="button" class="btn btn-primary" id="gc-btn-salvar-novo">
                            <span class="spinner-border spinner-border-sm d-none me-1" id="gc-spinner-novo"
                                aria-hidden="true"></span>
                            <i class="fa-solid fa-floppy-disk me-1"></i>{{ __('Salvar') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @if (auth()->user()->getPermissaoDetalhes('INDICADORES_TI')['editar'])
        <div class="modal fade" id="modal-editar-cliente" tabindex="-1" aria-labelledby="modal-editar-cliente-label"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modal-editar-cliente-label">{{ __('Editar Cliente') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="{{ __('Fechar') }}"></button>
                    </div>
                    <div class="modal-body">
                        <div id="editar-cliente-erro" class="alert alert-danger d-none" role="alert"></div>

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

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

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

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

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

                        <div class="mb-3">
                            <label class="form-label" for="ec-telefone">{{ __('Telefone') }}</label>
                            <input type="text" class="form-control" id="ec-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-editar-cliente">
                            <span class="spinner-border spinner-border-sm d-none me-1" id="spinner-salvar-editar-cliente"
                                role="status" aria-hidden="true"></span>
                            {{ __('Salvar') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif

@endsection