@extends('layouts.app')

@section('title', $placement->name)

@section('content')

<div class="nx-wrap" style="padding-top:24px; padding-bottom:48px;">

    {{-- Breadcrumb --}}
    <div style="display:flex; align-items:center; gap:8px; margin-bottom:20px;
                font-size:13px; color:var(--nx-muted);">
        <a href="{{ route('home') }}" style="color:var(--nx-muted);">Home</a>
        <span>›</span>
        <a href="{{ route('explore') }}" style="color:var(--nx-muted);">Explore</a>
        <span>›</span>
        <span style="color:var(--nx-text);">{{ $placement->name }}</span>
    </div>

    {{-- Header --}}
    <div style="display:flex; justify-content:space-between; align-items:flex-start;
                flex-wrap:wrap; gap:14px; margin-bottom:24px;">
        <div>
            <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;
                        margin-bottom:8px;">
                <h1 style="margin:0; font-size:clamp(22px,3vw,32px);">
                    {{ $placement->name }}
                </h1>
                <span class="nx-badge nx-badge-good">✔ Instant Book</span>
            </div>
            <p class="nx-muted" style="margin:0;">
                {{ $placement->spot_duration }}s spot ·
                Fixed pricing ·
                {{ $placement->area ? $placement->area.', ' : '' }}{{ $placement->city }} ·
                Trust score: {{ $placement->trust_score }}/5 ·
                Proof SLA: {{ $placement->proof_sla_hours }}h
            </p>
        </div>
        <div style="display:flex; gap:10px; flex-wrap:wrap;">
            <a class="nx-btn" href="{{ route('explore') }}">← Back to explore</a>
        </div>
    </div>

    <div class="nx-grid-main">

        {{-- ============================================================
             LEFT: Details
        ============================================================ --}}
        <div>

            {{-- Gallery placeholder --}}
            <div style="height:300px; border-radius:var(--nx-radius-lg);
                background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(34,197,94,.12));
                border:1px solid rgba(255,255,255,.08); margin-bottom:16px;
                display:flex; align-items:center; justify-content:center;">
                <span class="nx-muted" style="font-size:13px;">
                    📸 Placement photos will appear here
                </span>
            </div>

            {{-- Specs --}}
            <div class="nx-card" style="margin-bottom:14px;">
                <h4 style="margin:0 0 14px; font-size:13px; text-transform:uppercase;
                            letter-spacing:.08em; color:var(--nx-muted);">
                    Placement specs
                </h4>

                <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
                    @foreach([
                        ['Format',      ucfirst(str_replace('_',' ',$placement->format))],
                        ['Resolution',  $placement->resolution ?? 'N/A'],
                        ['Spot duration', $placement->spot_duration.'s'],
                        ['Loop duration', $placement->loop_duration ? $placement->loop_duration.'s' : 'N/A'],
                        ['Share of voice', $placement->share_of_voice ? $placement->share_of_voice.'%' : 'N/A'],
                        ['Illumination', ucfirst($placement->illumination)],
                        ['City',        $placement->city],
                        ['Area',        $placement->area ?? 'N/A'],
                        ['Facing',      $placement->facing ?? 'N/A'],
                        ['Nexus ID',    $placement->nexus_id],
                    ] as [$label, $value])
                    <div>
                        <div class="nx-muted" style="font-size:11px; text-transform:uppercase;
                                                      letter-spacing:.06em; margin-bottom:3px;">
                            {{ $label }}
                        </div>
                        <div style="font-weight:600; font-size:14px;">{{ $value }}</div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Proof requirements --}}
            <div class="nx-card" style="margin-bottom:14px;">
                <h4 style="margin:0 0 12px; font-size:13px; text-transform:uppercase;
                            letter-spacing:.08em; color:var(--nx-muted);">
                    Proof requirements
                </h4>
                <div style="display:flex; flex-direction:column; gap:8px;">
                    <div style="display:flex; align-items:center; gap:10px;">
                        <span class="nx-badge nx-badge-good">✓</span>
                        <span class="nx-muted" style="font-size:14px;">
                            Minimum {{ $placement->proof_photos_required }}
                            photo{{ $placement->proof_photos_required > 1 ? 's' : '' }} required
                        </span>
                    </div>
                    @if($placement->proof_playback_log_required)
                    <div style="display:flex; align-items:center; gap:10px;">
                        <span class="nx-badge nx-badge-good">✓</span>
                        <span class="nx-muted" style="font-size:14px;">
                            Playback log required
                        </span>
                    </div>
                    @endif
                    <div style="display:flex; align-items:center; gap:10px;">
                        <span class="nx-badge nx-badge-warn">⏱</span>
                        <span class="nx-muted" style="font-size:14px;">
                            Upload within {{ $placement->proof_sla_hours }} hours of deployment
                        </span>
                    </div>
                    <div style="display:flex; align-items:center; gap:10px;">
                        <span class="nx-badge">₰</span>
                        <span class="nx-muted" style="font-size:14px;">
                            Payout releases after proof passes checks
                        </span>
                    </div>
                </div>
            </div>

            {{-- Owner info --}}
            <div class="nx-card">
                <h4 style="margin:0 0 12px; font-size:13px; text-transform:uppercase;
                            letter-spacing:.08em; color:var(--nx-muted);">
                    Media owner
                </h4>
                <div style="display:flex; justify-content:space-between;
                            align-items:center; flex-wrap:wrap; gap:10px;">
                    <div>
                        <div style="font-weight:700; margin-bottom:4px;">
                            {{ $placement->mediaOwner->business_name }}
                        </div>
                        <div class="nx-muted" style="font-size:13px;">
                            Trust score: {{ $placement->mediaOwner->trust_score }}/5 ·
                            {{ $placement->mediaOwner->getTrustBadge() }}
                        </div>
                    </div>
                    <span class="nx-badge {{ $placement->mediaOwner->instant_book_eligible
                        ? 'nx-badge-good' : 'nx-badge-warn' }}">
                        {{ $placement->mediaOwner->instant_book_eligible
                            ? '✔ Instant Book eligible'
                            : 'Standard owner' }}
                    </span>
                </div>
            </div>

        </div>

        {{-- ============================================================
             RIGHT: Booking panel
        ============================================================ --}}
        <div>
            <div class="nx-panel" style="position:sticky; top:80px;">
                <div style="padding:20px;">

                    <h3 style="margin:0 0 6px;">Book now</h3>
                    <p class="nx-muted" style="margin:0 0 16px; font-size:13px;">
                        Select dates and package. Confirms instantly after payment.
                    </p>

                    {{-- Pricing --}}
                    @if($placement->pricingPolicy)
                    <div style="padding:14px; border-radius:var(--nx-radius);
                                border:1px solid rgba(34,197,94,.25);
                                background:rgba(34,197,94,.06); margin-bottom:16px;">
                        <div style="font-size:11px; text-transform:uppercase;
                                    letter-spacing:.08em; color:var(--nx-muted); margin-bottom:6px;">
                            Fixed pricing
                        </div>
                        <div style="font-size:24px; font-weight:800; font-family:'Space Grotesk',sans-serif;">
                            {{ $placement->pricingPolicy->getFormattedPrice() }}
                        </div>
                        <div class="nx-muted" style="font-size:13px; margin-top:2px;">
                            per {{ $placement->pricingPolicy->billing_period }}
                        </div>
                    </div>
                    @endif

                    @auth
                    <form action="{{ route('cart.add') }}" method="POST">
                        @csrf
                        <input type="hidden" name="placement_id" value="{{ $placement->id }}"/>
                        <input type="hidden" name="booking_type" value="instant"/>

                        <div class="nx-grid-2">
                            <div>
                                <label class="nx-label">Start date</label>
                                <input class="nx-input" type="date" name="start_date"
                                       min="{{ now()->toDateString() }}" required/>
                            </div>
                            <div>
                                <label class="nx-label">End date</label>
                                <input class="nx-input" type="date" name="end_date"
                                       min="{{ now()->toDateString() }}" required/>
                            </div>
                        </div>

                        <label class="nx-label">Package</label>
                        <select class="nx-select" name="package_name">
                            <option value="Standard">
                                Standard — {{ $placement->spot_duration }}s spot
                            </option>
                            <option value="Prime">Prime hours (+40%)</option>
                            <option value="High Frequency">High frequency (+80%)</option>
                        </select>

                        {{-- Availability indicator --}}
                        <div class="nx-item" style="margin-top:14px; display:flex;
                                    justify-content:space-between; align-items:center;">
                            <div>
                                <div style="font-weight:700; font-size:14px;">Availability</div>
                                <div class="nx-muted" style="font-size:12px; margin-top:2px;">
                                    @if($placement->availabilitySlots->count())
                                        {{ $placement->availabilitySlots->count() }} slots available
                                    @else
                                        Check dates above
                                    @endif
                                </div>
                            </div>
                            <span class="nx-badge nx-badge-good">Available</span>
                        </div>

                        <div class="nx-divider"></div>

                        <button type="submit" class="nx-btn nx-btn-primary nx-btn-lg"
                                style="width:100%; margin-bottom:10px;">
                            Add to cart →
                        </button>

                        <p class="nx-muted" style="font-size:12px; margin:0; text-align:center;">
                            Booking locks inventory · Creative upload follows · Proof required within
                            {{ $placement->proof_sla_hours }}h
                        </p>
                    </form>

                    @else
                    <div style="text-align:center; padding:20px 0;">
                        <p class="nx-muted" style="margin:0 0 16px; font-size:14px;">
                            You need an account to book this placement.
                        </p>
                        <a class="nx-btn nx-btn-primary nx-btn-lg"
                           href="{{ route('register') }}"
                           style="width:100%; margin-bottom:10px;">
                            Create free account
                        </a>
                        <a class="nx-btn" href="{{ route('login') }}" style="width:100%;">
                            Sign in
                        </a>
                    </div>
                    @endauth

                </div>
            </div>
        </div>

    </div>
</div>

@endsection