@extends('layout')

@section('content')
    @php
        $kindLabel = ['entrada' => 'Entradas', 'saida' => 'Saídas', 'ambos' => 'Ambos'];
        $iconChoices = ['sell', 'local_shipping', 'receipt_long', 'autorenew', 'campaign', 'payments', 'work', 'bolt', 'shopping_cart', 'savings', 'handshake', 'apartment'];
    @endphp

    <div class="page-head">
        @include('partials.context-back')
        <div class="t"><h1>Categorias</h1><p class="lead">Classificam os lançamentos do financeiro</p></div>
    </div>

    <div class="card" x-data="{ add: false }" style="max-width:720px">
        <div class="card-head">
            <h2>Categorias</h2><span class="grow"></span>
            <button class="btn btn--subtle btn--sm" @click="add = !add"><i class="ic sm">add</i> Nova</button>
        </div>
        <div class="card-body">
            <form method="post" action="{{ url('financeiro/categorias') }}" data-ajax data-reload="1" x-show="add" x-cloak style="margin-bottom:14px">
                @csrf
                <div class="form-grid">
                    <div class="field"><label>Nome</label><input name="name" required maxlength="60"></div>
                    <div class="field">
                        <label>Tipo</label>
                        <select name="kind">
                            <option value="saida">Saída</option>
                            <option value="entrada">Entrada</option>
                            <option value="ambos">Ambos</option>
                        </select>
                    </div>
                    <div class="field">
                        <label>Ícone</label>
                        <select name="icon">
                            @foreach ($iconChoices as $ic)<option value="{{ $ic }}">{{ $ic }}</option>@endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Cor</label>
                        <select name="color">
                            @foreach (\App\Models\Category::COLORS as $c)<option value="{{ $c }}">{{ $c }}</option>@endforeach
                        </select>
                    </div>
                </div>
                <div class="form-actions" style="margin-top:6px">
                    <button type="button" class="btn btn--ghost" @click="add = false">Cancelar</button>
                    <button type="submit" class="btn btn--primary">Criar categoria</button>
                </div>
            </form>

            @if ($categories->isEmpty())
                <div class="empty"><i class="ic">sell</i><p>Nenhuma categoria ainda.</p></div>
            @else
                <div class="rows">
                    @foreach ($categories as $c)
                        <div class="item" id="cat-{{ $c->id }}" {{ $c->archived ? 'style="opacity:.5"' : '' }}>
                            <span class="ico"><i class="ic sm">{{ $c->icon ?: 'sell' }}</i></span>
                            <span class="tx">
                                <p>{{ $c->name }} <span class="badge badge--{{ $c->color }} plain">{{ $kindLabel[$c->kind] ?? $c->kind }}</span>
                                   {!! $c->archived ? '<span class="muted small">(arquivada)</span>' : '' !!}</p>
                            </span>
                            @if (!$c->archived)
                                <button class="icon-btn" title="Remover"
                                        data-api-delete="/categorias/{{ $c->id }}" data-confirm-click="Remover esta categoria?" data-reload-after="700">
                                    <i class="ic sm">close</i>
                                </button>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
@endsection