@extends('layouts.app')

@section('title', 'Tanımlar')

@section('content')
    <div class="row row-cards">
        @foreach (['groups' => ['Müşteri grupları', $groups], 'tags' => ['Etiketler', $tags]] as $type => [$label, $items])
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header"><h3 class="card-title">{{ $label }}</h3></div>
                    <ul class="list-group list-group-flush">
                        @forelse ($items as $item)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>{{ $item->name }} <span class="text-secondary small">({{ $item->customers_count }} müşteri)</span></span>
                                <form method="POST" action="{{ route('definitions.destroy', [$type, $item->id]) }}">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-link text-danger">Sil</button>
                                </form>
                            </li>
                        @empty
                            <li class="list-group-item text-secondary">Kayıt yok.</li>
                        @endforelse
                    </ul>
                    <form method="POST" action="{{ route('definitions.store', $type) }}" class="card-footer" novalidate>
                        @csrf
                        <div class="input-group">
                            <input type="text" name="name" maxlength="100" aria-label="Yeni {{ $label }}"
                                   class="form-control @error('name', $type) is-invalid @enderror" placeholder="Yeni kayıt adı">
                            <button type="submit" class="btn btn-primary">Ekle</button>
                        </div>
                        @error('name', $type)<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </form>
                </div>
            </div>
        @endforeach
    </div>
@endsection