@extends('layouts.app')

@section('content')
    <script>window.__sopPhases = @json($phases); window.__sopCanEdit = @json($canEdit);</script>

    <div id="booking-sop-page" x-data="sopApp()">
        <x-layout.page-header
            title="Quy Trình Booking KOC"
            iconFa="handshake"
            iconFaStyle="fas"
            description="Tài liệu chuẩn hoá quy trình booking — từ tìm kiếm KOC đến xây dựng pool đối tác lâu dài"
        />

        <div class="list-page-content">

            {{-- Principles Section: collapsible, card grid khi mở --}}
            <div class="sop-principles-card"
                 x-data="{ open: false }"
                 :class="{ 'is-open': open }">
                <div class="sop-principles-card-header" @click="open = !open">
                    <h3 class="sop-principles-card-title">Nguyên tắc chung</h3>
                    <div class="sop-principles-header-right">
                        <div class="sop-principles-preview" x-show="!open" x-cloak>
                        <span class="sop-principles-preview-item sop-ppi--blue">Không mặc cả lần đầu</span>
                        <span class="sop-principles-preview-item sop-ppi--rose">Tận dụng kênh phụ</span>
                        <span class="sop-principles-preview-item sop-ppi--amber">Chi phí lớn phải có văn bản</span>
                        <span class="sop-principles-preview-item sop-ppi--green">Duyệt nội dung trước khi đăng</span>
                        <span class="sop-principles-preview-item sop-ppi--purple">Chốt quyền sử dụng ngay từ đầu</span>
                        <span class="sop-principles-preview-item sop-ppi--indigo">Phản hồi trong ngày</span>
                        </div>
                        <span class="sop-principles-card-toggle">
                            <template x-if="!open">
                                <x-fas-chevron-down style="width:10px;height:10px" />
                            </template>
                            <template x-if="open">
                                <x-fas-chevron-up style="width:10px;height:10px" />
                            </template>
                        </span>
                    </div>
                </div>
                <div class="sop-principles-row" x-show="open" x-cloak>
                    <div class="sop-principle-card sop-pc--blue">
                        <div class="sop-principle-card-title">Không mặc cả lần đầu</div>
                        <div class="sop-principle-card-desc">Không ép giá khi hợp tác lần đầu. Nếu ngân sách thấp, đổi bằng affiliate cao hơn, sản phẩm tặng kèm hoặc cam kết dài hạn.</div>
                    </div>
                    <div class="sop-principle-card sop-pc--rose">
                        <div class="sop-principle-card-title">Tận dụng kênh phụ</div>
                        <div class="sop-principle-card-desc">Đề xuất reup trên kênh phụ hoặc nền tảng khác để tăng reach mà không tăng chi phí.</div>
                    </div>
                    <div class="sop-principle-card sop-pc--amber">
                        <div class="sop-principle-card-title">Chi phí lớn phải có văn bản</div>
                        <div class="sop-principle-card-desc">Thỏa thuận miệng dễ phát sinh tranh cãi. Các khoản chi phí lớn cần được xác nhận bằng văn bản trước khi triển khai.</div>
                    </div>
                    <div class="sop-principle-card sop-pc--green">
                        <div class="sop-principle-card-title">Duyệt nội dung trước khi đăng</div>
                        <div class="sop-principle-card-desc">Yêu cầu KOC gửi demo để duyệt trước. Sau khi đăng, không tự ý ẩn hoặc xóa nội dung trong thời gian campaign.</div>
                    </div>
                    <div class="sop-principle-card sop-pc--purple">
                        <div class="sop-principle-card-title">Chốt quyền sử dụng ngay từ đầu</div>
                        <div class="sop-principle-card-desc">Thống nhất quyền Spark Ads và quyền sử dụng nội dung ngay khi chốt deal, không xin bổ sung sau khi video đã đăng.</div>
                    </div>
                    <div class="sop-principle-card sop-pc--indigo">
                        <div class="sop-principle-card-title">Phản hồi trong ngày</div>
                        <div class="sop-principle-card-desc">Feedback demo, duyệt thanh toán và giải đáp thắc mắc trong ngày. Chậm phản hồi có thể mất KOC vào tay đối thủ.</div>
                    </div>
                </div>
            </div>

            {{-- Phase Stepper --}}
            <div class="sop-progress-header">
                <template x-for="(phase, pi) in phases" :key="phase.id">
                    <div class="sop-progress-item"
                         :class="{
                             'is-active': activePhase === pi,
                             'is-done': pi < activePhase
                         }"
                         :data-phase="pi"
                         @click="selectPhase(pi)"
                         :title="'Giai đoạn ' + phase.num + ': ' + phase.name">
                        <div class="sop-progress-dot">
                            <template x-if="pi < activePhase">
                                <x-fas-check style="width:12px;height:12px" />
                            </template>
                            <template x-if="pi >= activePhase">
                                <span x-text="phase.num"></span>
                            </template>
                        </div>
                        <span class="sop-progress-label" x-text="phase.name"></span>
                    </div>
                </template>
            </div>

            {{-- Phase 1 (Tìm & Tiếp cận) + Phase 2 (Đàm phán & Chốt deal) — 3-col layout data-driven --}}
            <template x-if="currentPhase && activePhase <= 1">
                <div class="sop-steps-grid--phase2" x-cloak>
                    <template x-for="colData in getPhaseColumns(activePhase)" :key="colData.colIndex">
                        <div class="sop-substep-col">
                            {{-- Render các step trong col --}}
                            <template x-for="step in colData.steps" :key="step.id">
                                <div class="sop-step-block" :data-phase="activePhase">
                                    @include('components.features.booking-sop.step')
                                </div>
                            </template>
                        </div>
                    </template>
                </div>
            </template>

            {{-- Steps grid (phases 3-5) --}}
            <template x-if="currentPhase && activePhase >= 2">
                <div class="sop-steps-grid" x-cloak>
                    <template x-for="(step, si) in currentPhase.steps" :key="step.id">
                        <div class="sop-step-block" :data-phase="activePhase">
                            @include('components.features.booking-sop.step')
                        </div>
                    </template>
                </div>
            </template>

            {{-- Empty state --}}
            <div class="sop-empty" x-show="!currentPhase">
                <div class="sop-empty-icon">👆</div>
                <p>Chọn một giai đoạn ở phía trên để xem các bước</p>
            </div>

        </div>

        @include('components.features.booking-sop.edit-step-modal')
    </div>
@endsection


