<x-app-layout>
    <x-slot name="header">
        <style>
            .dash-header-title {
                font-weight: 600;
                font-size: 1.5rem;
                letter-spacing: -0.01em;
                color: #0f0f0f;
            }
        </style>
        <h2 class="dash-header-title">Edit Brand</h2>
    </x-slot>

    <style>
        .form-wrap {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            max-width: 720px;
            margin: 0 auto;
            padding: 32px 24px;
        }

        /* ── TOP BAR ── */
        .form-topbar {
            margin-bottom: 24px;
        }

        .form-eyebrow {
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #999;
            margin-bottom: 4px;
        }

        .form-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #0f0f0f;
            letter-spacing: -0.01em;
        }

        /* ── CARD ── */
        .form-card {
            background: #fff;
            border: 1px solid #ebebeb;
            border-radius: 12px;
            padding: 28px 32px;
        }

        /* ── 2 COLUMN LAYOUT ── */
        .form-two-columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .form-field-full {
            grid-column: span 2;
        }

        /* ── FIELD ── */
        .form-field {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #999;
            margin-bottom: 6px;
        }

        .form-input,
        .form-textarea,
        .form-select {
            display: block;
            width: 100%;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: 0.85rem;
            font-weight: 400;
            color: #1a1a1a;
            background: #fafafa;
            border: 1px solid #ebebeb;
            border-radius: 8px;
            padding: 10px 14px;
            outline: none;
            transition: border-color 0.2s, background 0.2s;
            box-sizing: border-box;
        }

        .form-input:focus,
        .form-textarea:focus,
        .form-select:focus {
            border-color: #0f0f0f;
            background: #fff;
        }

        .form-textarea {
            resize: vertical;
            min-height: 80px;
        }

        .form-hint {
            font-size: 0.68rem;
            font-weight: 400;
            color: #ccc;
            margin-top: 4px;
        }

        .form-error {
            font-size: 0.68rem;
            font-weight: 400;
            color: #c62828;
            margin-top: 4px;
        }

        /* ── FILE INPUT ── */
        .form-file {
            display: block;
            width: 100%;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: 0.8rem;
            color: #aaa;
            background: #fafafa;
            border: 1px dashed #e0e0e0;
            border-radius: 8px;
            padding: 10px 14px;
            cursor: pointer;
            box-sizing: border-box;
            transition: border-color 0.2s;
        }

        .form-file:hover { border-color: #bbb; }

        .form-file::file-selector-button {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            background: #0f0f0f;
            color: #fff;
            border: none;
            border-radius: 30px;
            padding: 6px 14px;
            margin-right: 12px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .form-file::file-selector-button:hover { background: #333; }

        /* ── LOGO PREVIEW ── */
        .logo-preview {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 10px 14px;
            background: #fafafa;
            border: 1px solid #ebebeb;
            border-radius: 8px;
            margin-bottom: 12px;
        }

        .logo-preview-img {
            width: 48px;
            height: 48px;
            object-fit: contain;
            border-radius: 8px;
            background: #fff;
            border: 1px solid #ebebeb;
            padding: 4px;
        }

        .logo-preview-meta {
            flex: 1;
        }

        .logo-preview-label {
            font-size: 0.6rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #999;
            margin-bottom: 2px;
        }

        .logo-preview-hint {
            font-size: 0.7rem;
            font-weight: 400;
            color: #ccc;
        }

        /* ── DIVIDER ── */
        .form-divider {
            border: none;
            border-top: 1px solid #f0f0f0;
            margin: 24px 0 20px 0;
        }

        /* ── ACTIONS ── */
        .form-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 16px;
            margin-top: 8px;
        }

        .btn-cancel {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #aaa;
            text-decoration: none;
            padding-bottom: 2px;
            border-bottom: 1px solid transparent;
            transition: color 0.2s, border-color 0.2s;
        }

        .btn-cancel:hover { color: #0f0f0f; border-bottom-color: #0f0f0f; }

        .btn-submit {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            background: #0f0f0f;
            color: #fff;
            border: none;
            border-radius: 30px;
            padding: 10px 28px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .btn-submit:hover { background: #333; }
    </style>

    <div class="form-wrap">

        {{-- Top Bar --}}
        <div class="form-topbar">
        </div>

        <div class="form-card">
            <form action="{{ route('admin.brands.update', $brand->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                {{-- 2 Columns Layout --}}
                <div class="form-two-columns">
                    {{-- Nama Brand --}}
                    <div class="form-field">
                        <label for="name" class="form-label">Nama Brand</label>
                        <input type="text" name="name" id="name" class="form-input"
                            value="{{ old('name', $brand->name) }}" required>
                        @error('name')
                            <p class="form-error">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Status --}}
                    <div class="form-field">
                        <label for="is_active" class="form-label">Status</label>
                        <select name="is_active" id="is_active" class="form-select">
                            <option value="1" {{ old('is_active', $brand->is_active) == true ? 'selected' : '' }}>Aktif</option>
                            <option value="0" {{ old('is_active', $brand->is_active) == false ? 'selected' : '' }}>Non-Aktif</option>
                        </select>
                        @error('is_active')
                            <p class="form-error">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                {{-- Deskripsi (full width) --}}
                <div class="form-field">
                    <label for="description" class="form-label">Deskripsi</label>
                    <textarea name="description" id="description" class="form-textarea" rows="3">{{ old('description', $brand->description) }}</textarea>
                    @error('description')
                        <p class="form-error">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Logo --}}
                <div class="form-field">
                    <label class="form-label">Logo Brand</label>

                    @if($brand->logo)
                        <div class="logo-preview">
                            <img src="{{ asset('storage/' . $brand->logo) }}" alt="{{ $brand->name }}" class="logo-preview-img">
                            <div class="logo-preview-meta">
                                <div class="logo-preview-label">Logo saat ini</div>
                                <div class="logo-preview-hint">Upload file baru untuk mengganti logo</div>
                            </div>
                        </div>
                    @endif

                    <input type="file" name="logo" id="logo" class="form-file" accept="image/*">
                    @error('logo')
                        <p class="form-error">{{ $message }}</p>
                    @enderror
                </div>

                <hr class="form-divider">

                <div class="form-actions">
                    <a href="{{ route('admin.brands.index') }}" class="btn-submit">Batal</a>
                    <button type="submit" class="btn-submit">Perbarui Brand</button>
                </div>

            </form>
        </div>

    </div>
</x-app-layout>