@extends('layouts.app')

@section('title', 'New Category | DYSON LATAM')

@section('content')

    <style>
        .category-form-page {
            display: flex;
            flex-direction: column;
            gap: 18px;
            max-width: 900px;
        }

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

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

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

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

        .category-back-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 36px;
            padding: 0 13px;
            border: 1px solid #dde1ee;
            border-radius: 8px;
            background: #ffffff;
            color: #555b74;
            font-family: monospace;
            font-size: 8px;
            font-weight: 700;
            text-decoration: none;
            text-transform: uppercase;
        }

        .category-back-link:hover {
            background: #f7f8fc;
            color: #171a2b;
        }

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

        .category-form-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .category-form-label {
            color: #4d536d;
            font-family: monospace;
            font-size: 8px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .category-form-input {
            width: 100%;
            min-height: 40px;
            padding: 0 11px;
            border: 1px solid #dfe3ee;
            border-radius: 8px;
            outline: none;
            background: #ffffff;
            color: #252a3d;
            font-size: 10px;
        }

        .category-form-input:focus {
            border-color: #8d93aa;
            box-shadow: 0 0 0 3px rgba(23, 26, 43, .05);
        }

        .category-form-help {
            color: #8c91aa;
            font-family: monospace;
            font-size: 8px;
            line-height: 1.4;
        }

        .category-form-error {
            color: #d03535;
            font-family: monospace;
            font-size: 8px;
        }

        .category-form-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 9px;
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid #edf0f6;
        }

        .category-form-submit {
            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;
            cursor: pointer;
            text-transform: uppercase;
        }

        .category-form-submit:hover {
            background: #252a41;
        }

        @media (max-width: 700px) {

            .category-form-header {
                flex-direction: column;
            }

            .category-form-actions {
                flex-direction: column;
                align-items: stretch;
            }

        }
    </style>


    <div class="category-form-page">

        {{-- HEADER --}}

        <div class="category-form-header">

            <div>

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

                <h1 class="category-form-title">
                    New Category
                </h1>

                <p class="category-form-subtitle">
                    Add a new product category to the catalog
                </p>

            </div>

            <a href="{{ route('categories.index') }}" class="category-back-link">
                ← Back to Categories
            </a>

        </div>


        {{-- FORM CARD --}}

        <div class="category-form-card">

            <form action="{{ route('categories.store') }}" method="POST">

                @csrf

                <div class="category-form-field">

                    <label for="name" class="category-form-label">
                        Category Name
                    </label>

                    <input type="text" id="name" name="name" class="category-form-input"
                        value="{{ old('name') }}" placeholder="Enter category name" maxlength="255" required autofocus>

                    <div class="category-form-help">
                        The category will automatically become available when creating a new project.
                    </div>

                    @error('name')
                        <div class="category-form-error">
                            {{ $message }}
                        </div>
                    @enderror

                </div>


                <div class="category-form-actions">

                    <a href="{{ route('categories.index') }}" class="category-back-link">
                        Cancel
                    </a>

                    <button type="submit" class="category-form-submit">
                        Create Category
                    </button>

                </div>

            </form>

        </div>

    </div>

@endsection