@extends('layouts.app')

@section('title', 'Upload Proof')

@section('content')

<div class="nx-wrap-sm" 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('owner.dashboard') }}" style="color:var(--nx-muted);">
            Dashboard
        </a>
        <span>›</span>
        <span style="color:var(--nx-text);">Upload Proof</span>
    </div>

    {{-- Header --}}
    <div style="display:flex; justify-content:space-between; align-items:flex-start;
                flex-wrap:wrap; gap:14px; margin-bottom:24px;">
        <div>
            <h2 style="margin:0 0 6px;">Upload Proof-of-Posting</h2>
            <p class="nx-muted" style="margin:0;">
                {{ $bookingItem->placement->name }} ·
                {{ $bookingItem->booking->reference }} ·
                Attempt #{{ $attemptNumber }}
            </p>
        </div>
        <a class="nx-btn" href="{{ route('owner.dashboard') }}">← Dashboard</a>
    </div>

    <div class="nx-grid-2" style="align-items:start;">

        {{-- ============================================================
             LEFT: Upload form
        ============================================================ --}}
        <div>
            <div class="nx-card">

                {{-- SLA status --}}
                <div style="padding:14px; border-radius:var(--nx-radius);
                     margin-bottom:16px;
                     {{ $bookingItem->isProofOverdue()
                         ? 'border:1px solid rgba(239,68,68,.30); background:rgba(239,68,68,.06);'
                         : 'border:1px solid rgba(251,191,36,.25); background:rgba(251,191,36,.06);' }}">
                    <div style="display:flex; justify-content:space-between;
                                align-items:center; flex-wrap:wrap; gap:8px;">
                        <div>
                            <div style="font-weight:700; font-size:14px; margin-bottom:3px;">
                                {{ $bookingItem->isProofOverdue() ? '⚠ SLA Overdue' : '⏱ SLA Window' }}
                            </div>
                            <div class="nx-muted" style="font-size:13px;">
                                Due: {{ $bookingItem->proof_due_at?->format('d M Y H:i') ?? 'N/A' }}
                            </div>
                        </div>
                        <span class="nx-badge {{ $bookingItem->isProofOverdue()
                            ? 'nx-badge-danger' : 'nx-badge-warn' }}">
                            {{ $bookingItem->getProofTimeRemaining() }}
                        </span>
                    </div>
                </div>

                <form method="POST"
                      action="{{ route('owner.proof.store', $bookingItem) }}"
                      enctype="multipart/form-data">
                    @csrf

                    {{-- Booking details --}}
                    <div class="nx-grid-2" style="margin-bottom:14px;">
                        <div>
                            <div class="nx-muted" style="font-size:11px;
                                 text-transform:uppercase; letter-spacing:.06em;
                                 margin-bottom:4px;">
                                Placement
                            </div>
                            <div style="font-weight:600; font-size:14px;">
                                {{ $bookingItem->placement->name }}
                            </div>
                        </div>
                        <div>
                            <div class="nx-muted" style="font-size:11px;
                                 text-transform:uppercase; letter-spacing:.06em;
                                 margin-bottom:4px;">
                                Booking
                            </div>
                            <div style="font-weight:600; font-size:14px;">
                                {{ $bookingItem->booking->reference }}
                            </div>
                        </div>
                        <div>
                            <div class="nx-muted" style="font-size:11px;
                                 text-transform:uppercase; letter-spacing:.06em;
                                 margin-bottom:4px;">
                                Campaign dates
                            </div>
                            <div style="font-weight:600; font-size:14px;">
                                {{ $bookingItem->start_date->format('d M') }} –
                                {{ $bookingItem->end_date->format('d M Y') }}
                            </div>
                        </div>
                        <div>
                            <div class="nx-muted" style="font-size:11px;
                                 text-transform:uppercase; letter-spacing:.06em;
                                 margin-bottom:4px;">
                                Attempt
                            </div>
                            <div style="font-weight:600; font-size:14px;">
                                #{{ $attemptNumber }}
                            </div>
                        </div>
                    </div>

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

                    {{-- File uploads --}}
                    @if($bookingItem->placement->isOoh())

                        {{-- Billboard: 3 specific photo types --}}
                        <div style="margin-bottom:6px;">
                            <div style="font-weight:700; margin-bottom:4px;">
                                Billboard proof photos
                            </div>
                            <div class="nx-muted" style="font-size:13px; margin-bottom:14px;">
                                Upload all 3 required photo types. Each must be a clear,
                                unobstructed shot.
                            </div>
                        </div>

                        @foreach([
                            ['wide_shot',     'Wide Shot',
                             'Full view of the billboard from a distance showing context'],
                            ['close_shot',    'Close Shot',
                             'Close-up showing creative clearly deployed'],
                            ['angle_traffic', 'Angle / Traffic Direction',
                             'Shot showing the billboard from the road/traffic direction'],
                        ] as $i => [$type, $label, $hint])
                        <div style="padding:14px; border-radius:var(--nx-radius);
                             border:1px solid rgba(255,255,255,.08);
                             background:rgba(0,0,0,.12); margin-bottom:10px;">
                            <label class="nx-label" style="margin-top:0;">
                                {{ $i + 1 }}. {{ $label }}
                                <span style="color:var(--nx-danger);">*</span>
                            </label>
                            <div class="nx-muted" style="font-size:12px; margin-bottom:8px;">
                                {{ $hint }}
                            </div>
                            <input class="nx-input" type="file"
                                   name="files[]"
                                   accept="image/*"
                                   required/>
                            <input type="hidden" name="photo_types[]"
                                   value="{{ $type }}"/>
                        </div>
                        @endforeach

                    @else

                        {{-- DOOH: screen photo(s) + optional playback log --}}
                        <div style="margin-bottom:6px;">
                            <div style="font-weight:700; margin-bottom:4px;">
                                DOOH proof files
                            </div>
                            <div class="nx-muted" style="font-size:13px; margin-bottom:14px;">
                                Upload screen photo(s) showing creative live on screen.
                                {{ $bookingItem->placement->proof_playback_log_required
                                    ? 'Playback log is also required.' : '' }}
                            </div>
                        </div>

                        <label class="nx-label">
                            Screen photo(s)
                            <span style="color:var(--nx-danger);">*</span>
                        </label>
                        <input class="nx-input" type="file"
                               name="files[]"
                               accept="image/*,video/*"
                               multiple
                               required/>
                        <input type="hidden" name="photo_types[]" value="wide_shot"/>
                        <div class="nx-muted" style="font-size:12px; margin-top:6px;">
                            Minimum {{ $bookingItem->placement->proof_photos_required }}
                            photo(s) required. Show creative clearly on screen.
                        </div>

                        @if($bookingItem->placement->proof_playback_log_required)
                        <label class="nx-label" style="margin-top:14px;">
                            Playback log
                            <span style="color:var(--nx-danger);">*</span>
                        </label>
                        <input class="nx-input" type="file"
                               name="files[]"
                               accept=".pdf,.csv,.xls,.xlsx,.txt"
                               required/>
                        <input type="hidden" name="photo_types[]" value="other"/>
                        <div class="nx-muted" style="font-size:12px; margin-top:6px;">
                            Export from your screen management system showing
                            playback timestamps.
                        </div>
                        @endif

                    @endif

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

                    {{-- Timestamp --}}
                    <label class="nx-label">Timestamp (auto)</label>
                    <input class="nx-input" type="text"
                           data-nx-timestamp readonly
                           style="opacity:.7;"/>

                    {{-- Notes --}}
                    <label class="nx-label">Notes (optional)</label>
                    <textarea class="nx-textarea" name="notes" rows="3"
                              placeholder="Any context: lighting conditions, obstruction, maintenance, etc.">
                    </textarea>

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

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

                    <p class="nx-muted" style="font-size:12px; text-align:center; margin:0;">
                        Auto-validation runs immediately after submission.
                        Payout releases when proof passes all checks.
                    </p>

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

        {{-- ============================================================
             RIGHT: Requirements & history
        ============================================================ --}}
        <div>

            {{-- Requirements --}}
            <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);">
                    Proof requirements
                </h4>

                <div style="display:flex; flex-direction:column; gap:10px;">

                    <div style="display:flex; align-items:flex-start; gap:10px;">
                        <span class="nx-badge nx-badge-good" style="flex-shrink:0;">✓</span>
                        <div>
                            <div style="font-size:13px; font-weight:700; margin-bottom:2px;">
                                Minimum {{ $bookingItem->placement->proof_photos_required }}
                                photo(s)
                            </div>
                            <div class="nx-muted" style="font-size:12px;">
                                @if($bookingItem->placement->isOoh())
                                    Wide shot, close shot, and angle/traffic direction required
                                @else
                                    Clear screen photo(s) showing live creative
                                @endif
                            </div>
                        </div>
                    </div>

                    @if($bookingItem->placement->proof_playback_log_required)
                    <div style="display:flex; align-items:flex-start; gap:10px;">
                        <span class="nx-badge nx-badge-good" style="flex-shrink:0;">✓</span>
                        <div>
                            <div style="font-size:13px; font-weight:700; margin-bottom:2px;">
                                Playback log required
                            </div>
                            <div class="nx-muted" style="font-size:12px;">
                                Export from screen management system
                            </div>
                        </div>
                    </div>
                    @endif

                    <div style="display:flex; align-items:flex-start; gap:10px;">
                        <span class="nx-badge nx-badge-warn" style="flex-shrink:0;">⏱</span>
                        <div>
                            <div style="font-size:13px; font-weight:700; margin-bottom:2px;">
                                SLA: {{ $bookingItem->placement->proof_sla_hours }}h window
                            </div>
                            <div class="nx-muted" style="font-size:12px;">
                                Submit within {{ $bookingItem->placement->proof_sla_hours }}
                                hours of deployment
                            </div>
                        </div>
                    </div>

                    <div style="display:flex; align-items:flex-start; gap:10px;">
                        <span class="nx-badge" style="flex-shrink:0;">₰</span>
                        <div>
                            <div style="font-size:13px; font-weight:700; margin-bottom:2px;">
                                Payout after validation
                            </div>
                            <div class="nx-muted" style="font-size:12px;">
                                Funds release when proof passes all auto checks
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            {{-- Auto validation info --}}
            <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);">
                    Auto-validation checks
                </h4>
                <div style="display:flex; flex-direction:column; gap:8px;">
                    @foreach([
                        ['Minimum photo count', 'Checks correct number of files uploaded'],
                        ['SLA window',          'Checks submission is within deadline'],
                        ['Metadata present',    'Checks timestamp is recorded'],
                        $bookingItem->placement->proof_playback_log_required
                            ? ['Playback log', 'Checks log file is present']
                            : null,
                    ] as $check)
                    @if($check)
                    <div style="display:flex; align-items:flex-start; gap:8px;">
                        <span style="color:var(--nx-accent); font-size:14px;
                                     flex-shrink:0; margin-top:1px;">◎</span>
                        <div>
                            <div style="font-size:13px; font-weight:700;">
                                {{ $check[0] }}
                            </div>
                            <div class="nx-muted" style="font-size:12px;">
                                {{ $check[1] }}
                            </div>
                        </div>
                    </div>
                    @endif
                    @endforeach
                </div>

                <div class="nx-divider"></div>
                <div class="nx-muted" style="font-size:12px; line-height:1.6;">
                    <strong style="color:var(--nx-text);">Stage 3:</strong>
                    Computer vision will add creative match detection,
                    obstruction detection, and damage detection.
                </div>
            </div>

            {{-- Previous submissions --}}
            @if($bookingItem->proofSubmissions->count())
            <div class="nx-card">
                <h4 style="margin:0 0 12px; font-size:13px; text-transform:uppercase;
                            letter-spacing:.08em; color:var(--nx-muted);">
                    Previous submissions
                </h4>
                @foreach($bookingItem->proofSubmissions->sortByDesc('created_at') as $sub)
                <div class="nx-item">
                    <div style="display:flex; justify-content:space-between;
                                align-items:center; flex-wrap:wrap; gap:8px;">
                        <div>
                            <div style="font-weight:700; font-size:14px;">
                                {{ $sub->reference }}
                            </div>
                            <div class="nx-muted" style="font-size:12px; margin-top:2px;">
                                Attempt #{{ $sub->attempt_number }} ·
                                {{ $sub->created_at->format('d M Y H:i') }} ·
                                {{ $sub->media->count() }} file(s)
                            </div>
                        </div>
                        <span class="nx-badge {{ $sub->getStatusBadgeClass() }}">
                            {{ strtoupper($sub->status) }}
                        </span>
                    </div>
                </div>
                @endforeach
            </div>
            @endif

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

@endsection