@extends('layouts.app')

@section('title', 'Open a Dispute')

@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('advertiser.dashboard') }}" style="color:var(--nx-muted);">
            Dashboard
        </a>
        <span>›</span>
        <a href="{{ route('disputes.index') }}" style="color:var(--nx-muted);">
            Disputes
        </a>
        <span>›</span>
        <span style="color:var(--nx-text);">Open dispute</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;">Open a Dispute</h2>
            <p class="nx-muted" style="margin:0;">
                Disputes place payouts on hold until resolved.
                Evidence matters — be specific and thorough.
            </p>
        </div>
        <a class="nx-btn" href="{{ route('disputes.index') }}">← Disputes</a>
    </div>

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

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

                {{-- Warning banner --}}
                <div style="padding:14px; border-radius:var(--nx-radius);
                     border:1px solid rgba(251,191,36,.25);
                     background:rgba(251,191,36,.06); margin-bottom:20px;">
                    <div style="font-weight:700; margin-bottom:4px;">
                        ⚠ Before you open a dispute
                    </div>
                    <div class="nx-muted" style="font-size:13px; line-height:1.6;">
                        Opening a dispute will immediately place the owner's
                        payout on hold. Only open a dispute if you have
                        genuine evidence of a policy violation.
                        False disputes affect your trust rating.
                    </div>
                </div>

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

                    {{-- Booking item selector --}}
                    @if($bookingItem)
                        <input type="hidden" name="booking_item_id"
                               value="{{ $bookingItem->id }}"/>

                        <div style="padding:14px; border-radius:var(--nx-radius);
                             border:1px solid rgba(124,92,255,.25);
                             background:rgba(124,92,255,.06); margin-bottom:16px;">
                            <div style="font-size:11px; text-transform:uppercase;
                                        letter-spacing:.08em; color:var(--nx-muted);
                                        margin-bottom:6px;">
                                Disputing booking item
                            </div>
                            <div style="font-weight:700; font-size:15px; margin-bottom:3px;">
                                {{ $bookingItem->placement->name }}
                            </div>
                            <div class="nx-muted" style="font-size:13px;">
                                {{ $bookingItem->booking->reference }} ·
                                {{ $bookingItem->start_date->format('d M') }} –
                                {{ $bookingItem->end_date->format('d M Y') }} ·
                                {{ $bookingItem->getFormattedTotal() }}
                            </div>
                        </div>

                    @else

                        <label class="nx-label">
                            Select booking item
                            <span style="color:var(--nx-danger);">*</span>
                        </label>
                        <select class="nx-select" name="booking_item_id" required>
                            <option value="">— Select a booking item —</option>
                            @foreach($bookings as $booking)
                                @foreach($booking->items as $item)
                                <option value="{{ $item->id }}">
                                    {{ $booking->reference }} —
                                    {{ $item->placement->name }} —
                                    {{ $item->start_date->format('d M Y') }}
                                </option>
                                @endforeach
                            @endforeach
                        </select>

                    @endif

                    {{-- Reason --}}
                    <label class="nx-label">
                        Reason
                        <span style="color:var(--nx-danger);">*</span>
                    </label>
                    <select class="nx-select" name="reason" required>
                        <option value="">— Select a reason —</option>
                        @foreach([
                            ['proof_missing',      'Proof missing'],
                            ['proof_late',         'Proof submitted late'],
                            ['wrong_creative',     'Wrong creative deployed'],
                            ['obstructed',         'Placement obstructed'],
                            ['poor_visibility',    'Poor visibility'],
                            ['placement_mismatch', 'Placement mismatch'],
                            ['no_deployment',      'No deployment at all'],
                            ['other',              'Other'],
                        ] as [$value, $label])
                        <option value="{{ $value }}"
                            {{ old('reason') === $value ? 'selected' : '' }}>
                            {{ $label }}
                        </option>
                        @endforeach
                    </select>

                    {{-- Description --}}
                    <label class="nx-label">
                        Detailed description
                        <span style="color:var(--nx-danger);">*</span>
                    </label>
                    <textarea class="nx-textarea" name="description"
                              rows="6" required minlength="20"
                              placeholder="Describe exactly what happened. Include:
- What you expected vs what occurred
- Specific dates and times
- Any communication with the owner
- What evidence you have">{{ old('description') }}</textarea>
                    <div class="nx-muted" style="font-size:12px; margin-top:4px;">
                        Minimum 20 characters. Be specific — vague disputes
                        are harder to resolve in your favour.
                    </div>

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

                    <button type="submit"
                            class="nx-btn nx-btn-primary nx-btn-lg"
                            style="width:100%; margin-bottom:10px;"
                            data-nx-confirm="Open this dispute? The owner's payout will be held immediately.">
                        Open dispute
                    </button>

                    <a class="nx-btn nx-btn-lg"
                       href="{{ route('disputes.index') }}"
                       style="width:100%; text-align:center;">
                        Cancel
                    </a>

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

        {{-- ============================================================
             RIGHT: Info panel
        ============================================================ --}}
        <div>

            {{-- What happens next --}}
            <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);">
                    What happens next
                </h4>
                <div style="display:flex; flex-direction:column; gap:14px;">
                    @foreach([
                        ['1', 'nx-badge-accent',
                         'Payout held',
                         'Owner payout is immediately placed on hold pending resolution.'],
                        ['2', 'nx-badge-warn',
                         'Owner notified',
                         'Media owner receives notification and can respond with evidence.'],
                        ['3', 'nx-badge-warn',
                         'Review',
                         'Nexus admin reviews evidence from both parties if needed.'],
                        ['4', 'nx-badge-good',
                         'Resolution',
                         'Dispute resolved: refund, partial refund, or payout released.'],
                    ] as [$n, $badge, $title, $desc])
                    <div style="display:flex; gap:12px; align-items:flex-start;">
                        <span class="nx-badge {{ $badge }}"
                              style="flex-shrink:0; min-width:28px;
                                     justify-content:center;">
                            {{ $n }}
                        </span>
                        <div>
                            <div style="font-weight:700; font-size:13px;
                                        margin-bottom:3px;">
                                {{ $title }}
                            </div>
                            <div class="nx-muted" style="font-size:12px;
                                                          line-height:1.5;">
                                {{ $desc }}
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Possible outcomes --}}
            <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);">
                    Possible outcomes
                </h4>
                <div style="display:flex; flex-direction:column; gap:8px;">
                    @foreach([
                        ['nx-badge-good',   'Full refund',      'Advertiser wins — full refund issued'],
                        ['nx-badge-accent', 'Partial refund',   'Split decision — partial refund'],
                        ['nx-badge-warn',   'Payout released',  'Owner wins — payout released'],
                        ['nx-badge',        'No action',        'Insufficient evidence — no change'],
                        ['nx-badge-danger', 'Penalty applied',  'Owner penalised — trust score reduced'],
                    ] as [$badge, $outcome, $desc])
                    <div style="display:flex; align-items:center; gap:10px;">
                        <span class="nx-badge {{ $badge }}"
                              style="font-size:11px; white-space:nowrap;">
                            {{ $outcome }}
                        </span>
                        <span class="nx-muted" style="font-size:12px;">
                            {{ $desc }}
                        </span>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Policy reminder --}}
            <div class="nx-card"
                 style="border-color:rgba(124,92,255,.25);
                        background:rgba(124,92,255,.04);">
                <h4 style="margin:0 0 10px; font-size:13px;">
                    Platform policy reminder
                </h4>
                <div class="nx-muted" style="font-size:12px; line-height:1.7;">
                    Nexus requires all disputes to be evidence-based.
                    Submitting false or frivolous disputes may result in
                    your account being reviewed. All dispute outcomes
                    are final unless new evidence is submitted within
                    7 days of resolution.
                </div>
            </div>

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

@endsection