@extends('layouts-v2.app')

@section('content')
<div>
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Campaigns</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6 uppercase">Campaigns</h1>

    <div class="bg-white p-4 rounded-lg shadow-sm mb-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
            <x-floating-input name="campaign_id" label="ID Campaign" id="campaign-id" clearable />
            <x-floating-input name="campaign_title" label="Tên Campaign" id="campaign-title" clearable />
            <x-floating-select 
                name="campaign_status"
                id="campaign-status"
                label="Trạng thái"
                :options="[
                    '' => 'Tất cả',
                    '1' => 'Hoạt động',
                    '0' => 'Tạm dừng',
                    '2' => 'Hết hạn'
                ]"
            />
            <button type="button" id="btnFilter" class="bg-blue-500 text-white font-semibold py-2.5 px-6 rounded-md hover:bg-blue-600 transition uppercase text-sm tracking-wider">
                Lọc
            </button>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="p-4 flex justify-between items-center border-b">
            {{-- Số lượng hiển thị --}}
            <x-floating-select 
                name="perpage"
                id="perpage"
                class="w-40"
                label="Số lượng hiển thị"
                :options="[
                    '' => '10',
                    '20' => '20',
                    '30' => '30',
                    '50' => '50',
                    '100' => '100'
                ]"
            />
            <button type="button" id="btn-add-campaign" class="bg-blue-500 text-white text-sm font-semibold py-2 px-4 rounded flex items-center hover:bg-blue-600 uppercase">
                <span class="mr-2 text-lg">+</span> Thêm mới
            </button>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm">
                <thead class="bg-gray-50 text-gray-500 uppercase border-b">
                    <tr>
                        <th class="px-4 py-3 font-semibold text-sm">ID</th>
                        <th class="px-4 py-3 font-semibold text-sm">Campaign</th>
                        <th class="px-4 py-3 font-semibold text-sm">Sản phẩm</th>
                        <th class="px-4 py-3 font-semibold text-sm">Trạng thái</th>
                        <th class="px-4 py-3 font-semibold text-sm">Người tạo</th>
                        <th class="px-4 py-3 font-semibold text-sm text-nowrap">Ngày tạo</th>
                        <th class="px-4 py-3 font-semibold text-sm text-center">Thao tác</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100" id="tbody-oa-campaigns">
                    <tr>
                        <td colspan="7" class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium text-gray-900">
                            <div class="flex items-center justify-center">
                                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes loader2{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><path fill="#265BFF" d="M17.179 13.605a.431.431 0 00.279.514l.775.245a.393.393 0 00.499-.268 7.318 7.318 0 00-4.5-8.658.39.39 0 00-.507.255l-.245.775a.43.43 0 00.261.523 5.69 5.69 0 013.438 6.614z" style="animation:loader2 1s cubic-bezier(.63,-.71,.32,1.28) infinite both;transform-origin:center center"/></svg>
                            </div>            
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="mt-6 flex justify-center" id="pagination"></div>

    <!-- Modal: THÊM CAMPAIGN -->
    <div id="add-campaign-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto flex items-center justify-center z-50 hidden">
        <div id="add-campaign-content" class="relative mx-auto p-6 border w-full max-w-4xl shadow-lg rounded-xl bg-white">
            
            <div class="mb-6">
                <h3 class="text-xl font-semibold text-gray-700">Tạo Campaign</h3>
            </div>

            <form id="add-campaign-form" class="space-y-5">
                @csrf
                
                <div>
                    <label class="block text-md font-medium text-gray-400 mb-2">Loại Campaign</label>
                    <div class="flex items-center space-x-6">
                        <label class="flex items-center cursor-pointer">
                            <input checked type="radio" name="type" value="0" class="add-campaign-type w-4 h-4 text-blue-600 focus:ring-blue-500">
                            <span class="ml-2 text-sm text-gray-600">Campaign thông thường</span>
                        </label>
                        <label class="flex items-center cursor-pointer">
                            <input type="radio" name="type" value="1" class="add-campaign-type w-4 h-4 text-blue-600 focus:ring-blue-500">
                            <span class="ml-2 text-sm text-gray-600">Campaign cho đối tác</span>
                        </label>
                    </div>
                </div>

                <x-floating-input name="title" label="Tên Campaign" id="add-campaign-title" />

                <div class="relative">
                    <textarea name="description" rows="2" placeholder="Mô tả" class="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"></textarea>
                </div>

                <!-- Phần Campaign cho đối tác -->
                <div class="space-y-5 hidden" id="add-campaign-partner">
                    <div class="relative">
                        <x-floating-input :disabled="true" name="partner_name" label="Tên đối tác" id="add-campaign-partner-name" />
                        <p class="text-[12px] text-gray-400 mt-1 ml-1">Nhập tên đối tác sẽ sử dụng campaign này</p>
                    </div>

                    <div class="border-t border-dashed pt-4 mt-2">
                        <h4 class="text-xs font-semibold text-gray-500 mb-4 uppercase tracking-wider">Cấu hình tạo mã kích hoạt</h4>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="relative">
                                <x-floating-input :disabled="true" name="code_prefix" label="Tiền tố" id="add-campaign-code-prefix" />
                                <p class="text-[10px] text-gray-400 mt-1 ml-1">Để trống nếu không muốn có tiền tố</p>
                            </div>

                            <div class="relative h-fit">
                                <x-floating-input type="number" min="4" max="50" value="4" :disabled="true" name="code_len" label="Độ dài mã" id="add-campaign-code-len" />
                            </div>

                            <div class="relative col-span-2">
                                <x-floating-select
                                    :disabled="true"
                                    name="code_rule"
                                    id="add-campaign-code-rule"
                                    label="Quy tắc tạo mã"
                                    :options="[
                                        'numbers_only' => 'Chỉ số',
                                        'letters_numbers' => 'Chữ và số',
                                        'letters_only' => 'Chỉ chữ'
                                    ]"
                                />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <x-floating-select 
                        name="status"
                        id="add-campaign-status"
                        label="Trạng thái"
                        :options="[
                            '1' => 'Hoạt động',
                            '0' => 'Không hoạt động',
                            '2' => 'Hết hạn'
                        ]"
                    />
                    <div class="relative">
                        <label class="absolute -top-2 left-3 bg-white px-1 text-xs text-gray-400">Ngày bắt đầu</label>
                        <input type="text" id="start-date-add-campaign" name="start_date" placeholder="dd-mm-yyyy --:--" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2.5 px-4 text-sm outline-none border">
                    </div>
                    <div class="relative">
                        <label class="absolute -top-2 left-3 bg-white px-1 text-xs text-gray-400">Ngày kết thúc</label>
                        <input type="text" id="end-date-add-campaign" name="end_date" placeholder="dd-mm-yyyy --:--" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2.5 px-4 text-sm outline-none border">
                    </div>
                    <div class="relative" class="col-span-1">
                        <select id="add-campaign-package-search"></select>
                        <p class="text-[12px] text-gray-400 mt-1">Chọn sản phẩm áp dụng cho campaign này</p>
                    </div>
                </div>

                <div class="flex justify-end space-x-3 pt-6">
                    <button type="button" class="btn-close-add-campaign-modal px-8 py-2 border border-blue-600 text-blue-600 rounded-lg font-medium hover:bg-blue-50 transition uppercase text-sm">Hủy</button>
                    <button id="btn-submit-add-campaign" class="disabled:cursor-not-allowed disabled:opacity-50 px-8 py-2 text-blue-500 font-medium uppercase text-sm hover:text-blue-600 hover:bg-blue-100 rounded-lg">Tạo</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal: EDIT CAMPAIGN -->
    <div id="edit-campaign-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto flex items-center justify-center z-50 hidden">
        <div id="edit-campaign-content" class="relative mx-auto p-6 border w-full max-w-4xl shadow-lg rounded-xl bg-white">
            
            <div class="mb-6">
                <h3 class="text-xl font-semibold text-gray-700">Sửa Campaign</h3>
            </div>

            <form id="edit-campaign-form" class="space-y-5">
                @csrf
                
                <div>
                    <label class="block text-md font-medium text-gray-400 mb-2">Loại Campaign</label>
                    <div class="flex items-center space-x-6">
                        <label class="flex items-center cursor-pointer">
                            <input type="radio" name="type" value="0" checked class="edit-campaign-type w-4 h-4 text-blue-600 focus:ring-blue-500">
                            <span class="ml-2 text-sm text-gray-600">Campaign thông thường</span>
                        </label>
                        <label class="flex items-center cursor-pointer">
                            <input type="radio" name="type" value="1" class="edit-campaign-type w-4 h-4 text-blue-600 focus:ring-blue-500">
                            <span class="ml-2 text-sm text-gray-600">Campaign cho đối tác</span>
                        </label>
                    </div>
                </div>

                <x-floating-input name="title" label="Tên Campaign" id="edit-campaign-title" />

                <div class="relative">
                    <textarea name="description" id="edit-campaign-description" rows="2" placeholder="Mô tả" class="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"></textarea>
                </div>

                <!-- Phần Campaign cho đối tác -->
                <div class="space-y-5 hidden" id="edit-campaign-partner">
                    <div class="relative">
                        <x-floating-input :disabled="true" name="partner_name" label="Tên đối tác" id="edit-campaign-partner-name" />
                        <p class="text-[12px] text-gray-400 mt-1 ml-1">Nhập tên đối tác sẽ sử dụng campaign này</p>
                    </div>

                    <div class="border-t border-dashed pt-4 mt-2">
                        <h4 class="text-xs font-semibold text-gray-500 mb-4 uppercase tracking-wider">Cấu hình tạo mã kích hoạt</h4>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="relative">
                                <x-floating-input :disabled="true" name="code_prefix" label="Tiền tố" id="edit-campaign-code-prefix" />
                                <p class="text-[10px] text-gray-400 mt-1 ml-1">Để trống nếu không muốn có tiền tố</p>
                            </div>

                            <div class="relative h-fit">
                                <x-floating-input type="number" min="4" max="50" value="4" :disabled="true" name="code_len" label="Độ dài mã" id="edit-campaign-code-len" />
                            </div>

                            <div class="relative col-span-2">
                                <x-floating-select
                                    :disabled="true"
                                    name="code_rule"
                                    id="edit-campaign-code-rule"
                                    label="Quy tắc tạo mã"
                                    :options="[
                                        'numbers_only' => 'Chỉ số',
                                        'letters_numbers' => 'Chữ và số',
                                        'letters_only' => 'Chỉ chữ'
                                    ]"
                                />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <x-floating-select 
                        name="status"
                        id="edit-campaign-status"
                        label="Trạng thái"
                        :options="[
                            '1' => 'Hoạt động',
                            '0' => 'Không hoạt động',
                            '2' => 'Hết hạn'
                        ]"
                    />
                    <div class="relative">
                        <label class="absolute -top-2 left-3 bg-white px-1 text-xs text-gray-400">Ngày bắt đầu</label>
                        <input type="text" id="edit-campaign-start-date" name="start_date" placeholder="dd-mm-yyyy --:--" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2.5 px-4 text-sm outline-none border">
                    </div>
                    <div class="relative">
                        <label class="absolute -top-2 left-3 bg-white px-1 text-xs text-gray-400">Ngày kết thúc</label>
                        <input type="text" id="edit-campaign-end-date" name="end_date" placeholder="dd-mm-yyyy --:--" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2.5 px-4 text-sm outline-none border">
                    </div>
                    <div class="relative" class="col-span-1">
                        <select id="edit-campaign-package-search"></select>
                        <p class="text-[12px] text-gray-400 mt-1">Chọn sản phẩm áp dụng cho campaign này</p>
                    </div>
                </div>

                <div class="flex justify-end space-x-3 pt-6">
                    <button type="button" class="btn-close-edit-campaign-modal px-8 py-2 border border-blue-600 text-blue-600 rounded-lg font-medium hover:bg-blue-50 transition uppercase text-sm">Hủy</button>
                    <button id="btn-submit-edit-campaign" class="disabled:cursor-not-allowed disabled:opacity-50 px-8 py-2 text-blue-500 font-medium uppercase text-sm hover:text-blue-600 hover:bg-blue-100 rounded-lg">Cập nhật</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    window.routes = {
        getOACampagins: "{{ route('oa-campaigns.getOACampaigns') }}",
        getOACampaign: "{{ route('oa-campaigns.show', ['id' => ':id']) }}",
        detail: "{{ route('oa-campaigns.detail', ['id' => '__ID__']) }}",
        addOACampaign: "{{ route('oa-campaigns.store') }}",
        updateOACampaign: "{{ route('oa-campaigns.update', ['id' => ':id']) }}",
        deleteOACampaign: "{{ route('oa-campaigns.destroy', ['id' => ':id']) }}",
        searchOAPackages: "{{ route('oa-packages.searchOAPackages') }}",
    }
</script>

<script src="{{ asset('js/OA/utils.js') }}"></script>
<script src="{{ asset('js/OA/oa-campaign.js') }}"></script>

<script>
    $(document).ready(function() {
        loadOACampaigns();
    });
</script>
@endsection