@extends('layouts.app')

@section('title', 'Categories | DYSON LATAM')

@section('content')

    <style>
        .categories-page {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .categories-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
        }

        .categories-kicker {
            margin-bottom: 5px;
            color: #7a80a0;
            font-family: monospace;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        .categories-title {
            margin: 0;
            color: #161929;
            font-size: 24px;
            font-weight: 800;
            letter-spacing: -.03em;
        }

        .categories-subtitle {
            margin: 6px 0 0;
            color: #7a80a0;
            font-family: monospace;
            font-size: 10px;
        }

        .categories-new-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 38px;
            padding: 0 15px;
            border: 0;
            border-radius: 8px;
            background: #171a2b;
            color: #ffffff;
            font-family: monospace;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .04em;
            text-decoration: none;
            text-transform: uppercase;
        }

        .categories-new-button:hover {
            background: #252a41;
        }

        .categories-card {
            background: #ffffff;
            border: 1px solid #dde1ee;
            border-radius: 12px;
            box-shadow: 0 4px 14px rgba(31, 36, 56, .04);
            overflow: hidden;
        }

        .categories-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            padding: 16px 18px;
            border-bottom: 1px solid #edf0f6;
        }

        .categories-card-title {
            margin: 0;
            color: #1a1d2e;
            font-size: 13px;
            font-weight: 800;
        }

        .categories-card-count {
            color: #8c91aa;
            font-family: monospace;
            font-size: 8px;
            white-space: nowrap;
        }

        .categories-table-wrap {
            overflow-x: auto;
        }

        .categories-table {
            width: 100%;
            border-collapse: collapse;
        }

        .categories-table th {
            padding: 10px 14px;
            background: #f7f8fc;
            border-bottom: 1px solid #dde1ee;
            color: #7a80a0;
            font-family: monospace;
            font-size: 8px;
            font-weight: 700;
            letter-spacing: .06em;
            text-align: left;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .categories-table td {
            padding: 13px 14px;
            border-bottom: 1px solid #edf0f6;
            color: #34394f;
            font-size: 10px;
            vertical-align: middle;
        }

        .categories-table tbody tr:last-child td {
            border-bottom: 0;
        }

        .categories-name {
            color: #191c2c;
            font-size: 10px;
            font-weight: 800;
        }

        .categories-id {
            color: #8c91aa;
            font-family: monospace;
            font-size: 9px;
        }

        .categories-actions {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .categories-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 28px;
            padding: 0 10px;
            border-radius: 7px;
            font-family: monospace;
            font-size: 8px;
            font-weight: 700;
            text-decoration: none;
            text-transform: uppercase;
        }

        .categories-action-edit {
            background: #f0f2f8;
            color: #4f566f;
        }

        .categories-action-edit:hover {
            background: #e8eaf2;
            color: #171a2b;
        }

        .categories-action-delete {
            border: 0;
            background: rgba(208, 53, 53, .08);
            color: #d03535;
            cursor: pointer;
        }

        .categories-action-delete:hover {
            background: rgba(208, 53, 53, .14);
        }

        .categories-empty {
            padding: 28px 16px;
            color: #8c91aa;
            font-family: monospace;
            font-size: 9px;
            text-align: center;
        }

        @media (max-width: 700px) {

            .categories-header {
                flex-direction: column;
            }

        }
    </style>

    <div class="categories-page">

        <div class="categories-header">

            <div>

                <div class="categories-kicker">
                    DYSON LATAM / ADMINISTRATION / CATALOGS
                </div>

                <h1 class="categories-title">
                    Categories
                </h1>

                <p class="categories-subtitle">
                    Product category catalog management
                </p>

            </div>

            @if (in_array(auth()->user()->role, ['admin', 'editor'], true))
                <a href="{{ route('categories.create') }}" class="categories-new-button">
                    + New Category
                </a>
            @endif

        </div>

        <div class="categories-card">

            <div class="categories-card-header">

                <h2 class="categories-card-title">
                    Registered Categories
                </h2>

                <div class="categories-card-count">
                    {{ $categories->count() }} categor{{ $categories->count() === 1 ? 'y' : 'ies' }}
                </div>

            </div>

            <div class="categories-table-wrap">

                <table class="categories-table">

                    <thead>

                        <tr>
                            <th>ID</th>
                            <th>Category</th>
                            <th>Actions</th>
                        </tr>

                    </thead>

                    <tbody>

                        @forelse ($categories as $category)
                            <tr>

                                <td>
                                    <div class="categories-id">
                                        #{{ $category->id }}
                                    </div>
                                </td>

                                <td>
                                    <div class="categories-name">
                                        {{ $category->name }}
                                    </div>
                                </td>

                                <td>

                                    <div class="categories-actions">

                                        @if (in_array(auth()->user()->role, ['admin', 'editor'], true))
                                            <a href="{{ route('categories.edit', $category) }}"
                                                class="categories-action categories-action-edit">
                                                Edit
                                            </a>
                                        @endif

                                        @if (auth()->user()->role === 'admin')
                                            <form action="{{ route('categories.destroy', $category) }}" method="POST">

                                                @csrf
                                                @method('DELETE')

                                                <button type="submit" class="categories-action categories-action-delete"
                                                    onclick="return confirm('Are you sure you want to delete this category?')">
                                                    Delete
                                                </button>

                                            </form>
                                        @endif

                                    </div>

                                </td>

                            </tr>

                        @empty

                            <tr>

                                <td colspan="3">

                                    <div class="categories-empty">
                                        No categories registered.
                                    </div>

                                </td>

                            </tr>
                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    </div>

@endsection