@extends('layouts.admin')

@section('title', ($creating ? 'Create' : 'Edit').' '.$product->name.' page — '.config('app.name'))
@section('page_title', $creating ? 'Create '.$product->name.' page' : 'Edit '.$product->name.' page')

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.cms.product-pages.index') }}">Product pages</a></li>
    <li class="breadcrumb-item active">{{ $product->name }}</li>
@endsection

@push('styles')
<style>
    .pp-editor { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
    .pp-nav { position: sticky; top: 1rem; }
    .pp-nav .card-body { padding: 0.5rem 0; }
    .pp-nav a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.65rem 1rem; color: inherit; text-decoration: none; border-left: 3px solid transparent; }
    .pp-nav a:hover { background: #f4f8fb; }
    .pp-nav a.is-current { background: #eef5fb; border-left-color: var(--brand-primary, #0F62FE); font-weight: 650; }
    .pp-nav .pp-group { padding: 0.55rem 1rem 0.2rem; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-muted); font-weight: 750; }
    .pp-pill { font-size: 0.68rem; color: var(--brand-muted); white-space: nowrap; }
    .pp-pill.is-ready { color: #0b7a3b; }
    @media (max-width: 900px) { .pp-editor { grid-template-columns: 1fr; } .pp-nav { position: static; } }
</style>
@endpush

@push('scripts')
    <script src="{{ asset('js/rich-text.js') }}"></script>
@endpush

@section('content')
    <div class="pp-editor">
        <aside class="pp-nav card">
            <div class="card-header"><h5 class="mb-0">{{ strtoupper($product->code) }}</h5></div>
            <div class="card-body">
                <div class="pp-group">Page</div>
                <a href="{{ route('admin.cms.product-pages.edit', ['product' => $product, 'section' => 'slogan']) }}" class="{{ $current === 'slogan' ? 'is-current' : '' }}">
                    <span>Slogan</span>
                    <span class="pp-pill {{ ($filled['slogan'] ?? false) ? 'is-ready' : '' }}">{{ ($filled['slogan'] ?? false) ? 'Set' : 'Add' }}</span>
                </a>
                <a href="{{ route('admin.cms.product-pages.edit', ['product' => $product, 'section' => 'versions']) }}" class="{{ $current === 'versions' ? 'is-current' : '' }}">
                    <span>Versions</span>
                    <span class="pp-pill {{ ($filled['versions'] ?? false) ? 'is-ready' : '' }}">{{ ($filled['versions'] ?? false) ? 'Files' : 'Add' }}</span>
                </a>
                <div class="pp-group">Sections</div>
                @foreach ($catalog as $key => $def)
                    <a href="{{ route('admin.cms.product-pages.edit', ['product' => $product, 'section' => $key]) }}" class="{{ $current === $key ? 'is-current' : '' }}">
                        <span>{{ $def['title'] }}</span>
                        <span class="pp-pill {{ ($filled[$key] ?? false) ? 'is-ready' : '' }}">{{ ($filled[$key] ?? false) ? 'On page' : 'Add' }}</span>
                    </a>
                @endforeach
            </div>
            <div class="card-footer">
                <a href="{{ route('public.products.show', $product) }}" target="_blank" rel="noopener">View public page</a>
            </div>
        </aside>

        <div>
            @if ($current === 'slogan')
                <form method="POST" action="{{ route('admin.cms.product-pages.update', $product) }}" class="card">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="current_section" value="slogan">
                    <div class="card-header"><h5 class="mb-0">Slogan</h5></div>
                    <div class="card-body">
                        <p class="text-muted">Short line under the product name on the public page and on the home page.</p>
                        <label class="form-label" for="tagline">Slogan</label>
                        <input class="form-control" id="tagline" name="tagline" value="{{ old('tagline', $product->tagline) }}" maxlength="255" placeholder="Settle A/R Transactions With A/P Transactions!">
                    </div>
                    <div class="card-footer d-flex gap-2">
                        <button class="btn btn-primary" type="submit">Save slogan</button>
                        <a class="btn btn-outline-secondary" href="{{ route('admin.cms.product-pages.index') }}">All product pages</a>
                    </div>
                </form>
            @elseif ($current === 'versions')
                @include('admin.cms.product-pages._version-downloads')
            @else
                @php $def = $catalog[$current]; @endphp
                <form method="POST" action="{{ route('admin.cms.product-pages.update', $product) }}" class="card">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="current_section" value="{{ $current }}">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">{{ $def['title'] }}</h5>
                        <span class="pp-pill {{ ($filled[$current] ?? false) ? 'is-ready' : '' }}">{{ ($filled[$current] ?? false) ? 'On the public page' : 'Not on the page yet' }}</span>
                    </div>
                    <div class="card-body">
                        @unless ($filled[$current] ?? false)
                            <p class="text-muted">This section is empty. Fill it in and save to add it to {{ $product->name }}.</p>
                        @endunless
                        @include('admin.cms.product-pages._fields', ['key' => $current, 'def' => $def, 'sections' => $sections])
                    </div>
                    <div class="card-footer d-flex gap-2">
                        <button class="btn btn-primary" type="submit">{{ ($filled[$current] ?? false) ? 'Save '.$def['title'] : 'Add '.$def['title'].' to page' }}</button>
                        <a class="btn btn-outline-secondary" href="{{ route('admin.cms.product-pages.index') }}">All product pages</a>
                    </div>
                </form>
            @endif
        </div>
    </div>
@endsection