@extends('adminlte.app')

@section('content')

<link rel="stylesheet" href="{{ asset('css/tfds.css') }}">
@php
    if (!function_exists('tfdsBadgeClasse')) {
    function tfdsBadgeClasse($s){
        return [
            \App\Models\Despesa::STATUS_APROVADA      => 'ok',
            \App\Models\Despesa::STATUS_CONTABILIZADA => 'cont',
            \App\Models\Despesa::STATUS_CONCLUIDA     => 'conc',
            \App\Models\Despesa::STATUS_REEMBOLSADA   => 'reemb',
        ][$s] ?? 'ok';
    }
    }
@endphp

<div class="content-wrapper tfds-root">

    @if ($message = Session::get('success')) <div class="tfds-alert ok">{{ $message }}</div> @endif
    @if ($message = Session::get('error'))   <div class="tfds-alert err">{{ $message }}</div> @endif

    <div class="tfds-header-row">
        <div>
            <h1 class="tfds-h1">Despesas Validadas</h1>
            <p class="tfds-sub">Gestão de status · Contabilizada, Concluída e Reembolsada são finais</p>
        </div>
        <a href="{{ route('despesas.index') }}" class="tfds-btn tfds-btn-ghost"><i class="fas fa-arrow-left"></i> Despesas</a>
    </div>

    <div class="tfds-card">
        @if($despesas->isEmpty())
            <div class="tfds-empty">Nenhuma despesa validada.</div>
        @else
        <table id="tabelashow" class="tfds-tbl table">
            <thead>
                <tr>
                    <th>ID</th><th>Data</th><th>Centro de Custo</th><th>Descrição</th>
                    <th class="r">Valor</th><th>Validada por</th><th>Status</th>
                    @if($permissoes->gerir_status_despesas)<th></th>@endif
                </tr>
            </thead>
            <tbody>
                @foreach ($despesas as $despesa)
                    <tr>
                        <td>{{ $despesa->id }}</td>
                        <td>{{ $despesa->data ? date('d/m/Y', strtotime($despesa->data)) : '' }}</td>
                        <td>{{ optional($despesa->centroCusto)->nome_centro_custo }}</td>
                        <td>{{ $despesa->descricao }}</td>
                        <td class="r">€ {{ number_format($despesa->valor, 2, ',', '.') }}</td>
                        <td>{{ optional($despesa->validadoPor)->name ?? '—' }}</td>
                        <td><span class="tfds-badge {{ tfdsBadgeClasse($despesa->status) }}">{{ $despesa->status }}</span></td>
                        @if($permissoes->gerir_status_despesas)
                        <td class="r">
                            <button type="button" class="tfds-btn tfds-btn-primary tfds-btn-sm btn-status"
                                data-id="{{ $despesa->id }}"
                                data-status="{{ $despesa->status }}"
                                data-url="{{ route('despesas.status', $despesa) }}">
                                <i class="fas fa-exchange-alt"></i> Status
                            </button>
                        </td>
                        @endif
                    </tr>
                @endforeach
            </tbody>
        </table>
        @endif
    </div>
</div>

@if($permissoes->gerir_status_despesas)
{{-- ===== MODAL DE STATUS ===== --}}
<div class="tfds-modal-bg" id="modalStatus">
    <div class="tfds-modal">
        <h3>Alterar status — Despesa #<span id="m-id"></span></h3>
        <form method="POST" id="formStatus">
            @csrf
            <label class="tfds-label" for="m-status">Novo status</label>
            <select name="status" id="m-status" class="tfds-select" required>
                <option value="{{ \App\Models\Despesa::STATUS_PENDENTE }}">Pendente (reabre a despesa)</option>
                <option value="{{ \App\Models\Despesa::STATUS_CONTABILIZADA }}">Contabilizada (final)</option>
                <option value="{{ \App\Models\Despesa::STATUS_CONCLUIDA }}">Concluída (final)</option>
                <option value="{{ \App\Models\Despesa::STATUS_REEMBOLSADA }}">Reembolsada (final)</option>
            </select>
            <label  for="m-obs" class="tfds-label tfds-i26">Observação (opcional)</label>
            <textarea name="observacao" id="m-obs" class="tfds-textarea" maxlength="500"></textarea>
            <div class="tfds-i44">
                <button type="button" class="tfds-btn tfds-btn-ghost" id="m-cancel">Cancelar</button>
                <button type="submit" class="tfds-btn tfds-btn-primary"><i class="fas fa-save"></i> Salvar</button>
            </div>
        </form>
    </div>
</div>
@endif

<script src={{ asset('/plugins/datatables/jquery.dataTables.min.js') }}></script>
<script src={{ asset('/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}></script>
<script>
    $(function(){
        if ($('#tabelashow tbody tr').length) {
            $('#tabelashow').DataTable({
                "paging": true, "lengthChange": false, "searching": true, "ordering": true,
                "info": true, "autoWidth": false, "responsive": false, "order": [[1, "desc"]],
                "pageLength": 10,
                "oLanguage": { "sSearch":"Buscar:", "sZeroRecords":"Nenhum resultado",
                    "sInfo":"Mostrando _START_ a _END_ de _TOTAL_", "sInfoEmpty":"0 registros",
                    "oPaginate":{ "sPrevious":"Anterior", "sNext":"Seguinte" } }
            });
        }

        $('.btn-status').on('click', function(){
            $('#m-id').text($(this).data('id'));
            $('#m-status').val($(this).data('status'));
            $('#formStatus').attr('action', $(this).data('url'));
            $('#modalStatus').addClass('show');
        });
        $('#m-cancel, #modalStatus').on('click', function(e){
            if (e.target === this) $('#modalStatus').removeClass('show');
        });
    });
</script>
@endsection