@extends('layouts.app')

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

@section('content')

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

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

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

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

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

        .countries-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;
        }

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

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

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

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

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

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

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

        .countries-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;
        }

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

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

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

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

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

        .countries-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;
        }

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

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

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

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

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

        @media (max-width: 700px) {

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

        }
    </style>


    <div class="countries-page">

        {{-- HEADER --}}

        <div class="countries-header">

            <div>

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

                <h1 class="countries-title">
                    Country
                </h1>

                <p class="countries-subtitle">
                    Country catalog management
                </p>

            </div>

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

        </div>


        {{-- COUNTRY CARD --}}

        <div class="countries-card">

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

                <h2 class="countries-card-title">
                    Registered Countries
                </h2>

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

            </div>


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

                <table class="countries-table">

                    <thead>

                        <tr>
                            <th>ID</th>
                            <th>Country</th>
                            <th>Actions</th>
                        </tr>

                    </thead>


                    <tbody>

                        @forelse ($countries as $country)
                            <tr>

                                <td>

                                    <div class="countries-id">
                                        #{{ $country->id }}
                                    </div>

                                </td>

                                <td>

                                    <div class="countries-name">
                                        {{ $country->name }}
                                    </div>

                                </td>

                                <td>

                                    <div class="countries-actions">

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


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

                                                @csrf
                                                @method('DELETE')

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

                                            </form>
                                        @endif

                                    </div>

                                </td>

                            </tr>

                        @empty

                            <tr>

                                <td colspan="3">

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

                                </td>

                            </tr>
                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    </div>

@endsection