@extends('layouts.app')

@section('content')
    <div id="campaigns-page"
         x-data='campaignsPage(@json(['users' => $users]))'
         x-init="init()"
         data-can-export="{{ $can_export ? '1' : '0' }}">

        <x-layout.page-header
            title="Quản Lý Chiến Dịch"
            iconFa="bullseye"
            description="Tạo và quản lý các chiến dịch marketing"
        />

        <div class="list-page-content">
            {{-- Stats Grid --}}
            <div class="list-page-stats-grid dashboard-grid" id="campaigns-stats">
                <div class="stat-card">
                    <div class="stat-label">Đang tải...</div>
                    <div class="stat-value">-</div>
                </div>
            </div>

            {{-- Filters & Toolbar --}}
            <x-ui.cards type="section-card" cardClass="list-page-card">
                <x-slot name="header">
                    <div class="section-header-actions">
                        <x-ui.buttons type="button" id="add-campaign-btn" variant="add" iconFa="plus" label="Tạo chiến dịch" @click="openAddModal()" />

                        <x-ui.buttons type="button" id="open-brief-btn" variant="secondary" iconFa="file-alt" label="Tạo brief" @click="openBriefForSelected()" />

                        <x-ui.buttons type="button" id="export-excel-btn" variant="secondary" iconFa="file-export" label="Xuất Excel" title="Xuất danh sách Excel" @click="exportCSV()" x-bind:disabled="!canExport" />

                        <div class="header-toolbar-actions">
                            <div class="header-search-wrap">
                                <div class="filter-search-inline">
                                    <div class="search-input-icon">
                                        <x-fas-search class="search-icon" />
                                    </div>
                                    <input type="text" id="search-campaigns" placeholder="Tìm theo tên chiến dịch..." class="search-input" x-model.debounce.300ms="keyword" @input="page = 1; load()">
                                </div>
                            </div>

                            <select x-model="status" @change="page = 1; load()" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-primary-600" style="height:34px;font-size:12px;">
                                <option value="">Tất cả trạng thái</option>
                                @foreach (App\Enums\CampaignStatus::cases() as $st)
                                    <option value="{{ $st->value }}">{{ $st->label() }}</option>
                                @endforeach
                            </select>

                            <x-ui.buttons type="button" variant="ghost-primary" iconFa="times" label="Xóa bộ lọc" @click="clearFilters()" />
                        </div>
                    </div>
                </x-slot>
            </x-ui.cards>

            {{-- Data Table --}}
            @php
                $toggleableColumns = [
                    ['key' => 'product_name', 'label' => 'Sản phẩm'],
                    ['key' => 'assigned_to_name', 'label' => 'Người phụ trách'],
                    ['key' => 'start_date', 'label' => 'Ngày bắt đầu'],
                    ['key' => 'koc_count', 'label' => 'Số KOC'],
                    ['key' => 'cast_cost', 'label' => 'Chi phí cast '],
                    ['key' => 'sample_cost', 'label' => 'Chi phí mẫu '],
                    ['key' => 'shipping_cost', 'label' => 'Chi phí ship '],
                    ['key' => 'total_cost', 'label' => 'Tổng 3 chi phí '],
                    ['key' => 'status', 'label' => 'Trạng thái'],
                    ['key' => 'brief', 'label' => 'Brief'],
                ];

                $campaignColumns = [
                    ['key' => '_stt', 'label' => 'STT', 'type' => 'index', 'cellClass' => 'col-center', 'widthClass' => 'col-xxs', 'truncate' => false, 'toggleable' => false],
                    ['key' => 'campaign_name', 'label' => 'Tên chiến dịch', 'toggleable' => false, 'cellClass' => 'col-left', 'widthClass' => 'col-xl', 'sticky' => 'left', 'render' => 'campaignNameLinkHtml(row)', 'truncate' => true],
                    ['key' => 'product_name', 'label' => 'Sản phẩm', 'cellClass' => 'col-left', 'widthClass' => 'col-lg'],
                    ['key' => 'assigned_to_name', 'label' => 'Người phụ trách', 'cellClass' => 'col-left', 'widthClass' => 'col-sm'],
                    ['key' => 'start_date', 'label' => 'Ngày bắt đầu', 'type' => 'date', 'cellClass' => 'col-center', 'widthClass' => 'col-md-sm'],
                    ['key' => 'koc_count', 'label' => 'Số KOC', 'type' => 'number', 'sortable' => true, 'cellClass' => 'col-right number-cell', 'widthClass' => 'col-xs'],
                    ['key' => 'cast_cost', 'label' => 'Chi phí cast ', 'type' => 'currency', 'sortable' => true, 'cellClass' => 'col-right number-cell', 'widthClass' => 'col-mid'],
                    ['key' => 'sample_cost', 'label' => 'Chi phí mẫu ', 'type' => 'currency', 'sortable' => true, 'cellClass' => 'col-right number-cell', 'widthClass' => 'col-mid'],
                    ['key' => 'shipping_cost', 'label' => 'Chi phí ship ', 'type' => 'currency', 'sortable' => true, 'cellClass' => 'col-right number-cell', 'widthClass' => 'col-mid'],
                    ['key' => 'total_cost', 'label' => 'Tổng chi phí ', 'type' => 'currency', 'sortable' => true, 'cellClass' => 'col-right number-cell', 'widthClass' => 'col-mid'],
                    ['key' => 'status', 'label' => 'Trạng thái', 'type' => 'status', 'statusEnum' => 'campaignStatus', 'cellClass' => 'col-center', 'widthClass' => 'col-md-sm'],
                    ['key' => 'brief', 'label' => 'Brief', 'render' => 'briefButtonHtml(row)', 'cellClass' => 'col-center', 'widthClass' => 'col-xs', 'truncate' => false],
                ];
            @endphp

            <div x-data="columnVisibility({
                columns: {{ Illuminate\Support\Js::from($toggleableColumns) }},
            })">
            <x-ui.cards type="section-card" title="Danh sách chiến dịch" cardClass="list-page-card list-page-table-card">
                <x-slot name="header">
                    <x-ui.column-visibility />
                </x-slot>
                <x-ui.tabular
                    id="campaigns-table"
                    :columns="$campaignColumns"
                    column-visibility="visible"
                    rows="rows"
                    loading="loading"
                    loadingText="Đang tải dữ liệu..."
                    emptyText="Chưa có chiến dịch"
                    hasActions="true"
                    rowClick="goToDetail"
                    startIndex="startItem"
                >
                    <x-slot name="actions">
                        <button class="btn-icon" @click="goToDetail(row)" title="Xem chi tiết">&#x1F50D;</button>
                        <button class="btn-icon" @click="openEditModal(row)" title="Sửa">&#x270F;&#xFE0F;</button>
                        <button class="btn-icon btn-icon-danger" @click="handleDelete(row.id)" title="Xóa">&#x1F5D1;&#xFE0F;</button>
                    </x-slot>
                </x-ui.tabular>

                <x-ui.pagination id="campaigns-pagination" />
            </x-ui.cards>
        </div>
        </div>

        {{-- Add Modal --}}
        <x-features.campaign.campaign-modal
            mode="create"
            id="addCampaignModal"
            title="Tạo chiến dịch"
            formId="addCampaignForm"
            submitLabel="Tạo chiến dịch"
        />

        {{-- Edit Modal --}}
        <x-features.campaign.campaign-modal
            mode="edit"
            id="editCampaignModal"
            title="Cập nhật chiến dịch"
            formId="editCampaignForm"
            submitLabel="Lưu thay đổi"
        />

        {{-- Delete Confirmation Modal --}}
        <x-modals.confirm-modal
            id="deleteCampaignConfirmModal"
            title="Xác nhận xóa"
            message="Bạn có chắc chắn muốn xóa chiến dịch này? Hành động này không thể hoàn tác."
            level="error"
            confirm-label="Xóa"
            onConfirm="confirmDeleteCampaign"
        />

        {{-- Campaign Brief Modal --}}
        <x-features.campaign.campaign-brief-modal
            id="campaignBriefModal"
            title="Brief chiến dịch"
            formId="campaignBriefForm"
        />

        {{-- Confirm Delete Brief Modal --}}
        <x-modals.confirm-modal
            id="deleteBriefConfirmModal"
            title="Xác nhận xóa brief"
            message="Bạn có chắc chắn muốn xóa brief này? Hành động này không thể hoàn tác."
            level="error"
            confirm-label="Xóa"
            onConfirm="confirmDeleteBrief"
        />
    </div>
@endsection
