@extends('layouts.app-bo')
@section('title', __('mechanisms.mechanism_management'))

@section('content')

    <div class="main-content container-fluid">
        <section class="section">
            <div class="card" id="training-demand">
                <div class="card-body">
                    <div class="d-md-flex align-items-center justify-content-between">
                        <div class="mb-4 mb-md-0">
                            <h4 class="card-title">
                                <iconify-icon icon="material-symbols-light:flowsheet-outline"></iconify-icon>
                                {{ __("notes.notes_management") }}
                            </h4>
                            <div class="mb-3 card-subtitle">{{ __('app.Total') }} <b>{{ count($notes) }}</b> {{ __('notes.items') }}</div>
                        </div>
                        <div class="d-flex align-items-center justify-content-between gap-6 mb-2">
                            <a href="{{ route('notes.create', [$locale]) }}" class="btn btn-success d-flex align-items-center gap-1 fs-3 py-2 px-9">
                                <i class="ti ti-plus fs-4"></i>
                                {{ __("app.button.add") }}
                            </a>
                        </div>
                    </div>
                    <div class="{{ $setting->table_div_class }}">
                        <table class="{{ $setting->table_class }}">
                            <thead class="{{ $setting->table_thead_class }}">
                            <tr>
                                <th class="table-reference">#</th>
                                <th>{{ __("notes.table.id") }}</th>
                                <th>{{ __("notes.table.label") }}</th>
                                <th>{{ __("notes.table.image") }}</th>

                                <th class="sticky-search-button table-actions">{{ __("app.actions") }}</th>
                            </tr>
                            </thead>
                            <tbody class="{{ $setting->table_tbody_class }}">
                            @foreach ($notes as $key => $note)
                                <tr style="vertical-align: middle">
                                    <td>{{ $key+1 }}</td>
                                    <td>{{ $note->id }}</td>
                                    <td>{!! $note->labelFull !!}</td>
                                    <td>
                                        <img src="{{ $note->image }}" alt="{{ $note->title }}" title="{{ $note->title }}" class="img-thumbnail" style="max-width: 100px;">
                                    </td>
                                    <td class="sticky-search-button">
                                        <a href="{{ route('notes.show', [$locale, 'note' => $note]) }}" class="text-primary view" title="{{ __('app.button.title.show') }}">
                                            <i class="ti ti-eye fs-5"></i>
                                        </a>
                                        <a href="{{ route('notes.edit', [$locale, 'note' => $note]) }}" class="text-primary check" title="{{ __('app.button.title.edit') }}">
                                            <i class="ti ti-edit fs-5 text-success"></i>
                                        </a>
                                        <form action="{{ route('notes.destroy', [$locale, 'note' => $note]) }}" method="POST" class="d-inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-link p-0" onclick="return confirm('{{ __('notes.message.confirm.delete') }}')">
                                                <i class="ti ti-trash fs-5 text-danger" title="{{ __('app.button.title.delete') }}"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="row">
                        <div class="col-12 mt-3">
                            {{ $notes->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection