@extends('layouts-v2.app')

@section('head')
    <!-- Sheet JS -->
    <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
@endsection

@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>
        <a href="{{ route('oa-campaigns.index') }}" class="hover:text-blue-600 cursor-pointer">Campaigns</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Mã kích hoạt</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6 uppercase">Mã kích hoạt - <span class="campaign-title"></span></h1>

    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        
        <div class="p-4 border-b border-gray-100">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <x-floating-input name="activation_code" label="Tìm mã kích hoạt" id="activation-code" clearable="true" />
                
                <x-floating-select 
                    name="activation_code_status"
                    id="activation-code-status"
                    label="Trạng thái"
                    :options="[
                        '' => 'Tất cả',
                        '0' => 'Chưa sử dụng',
                        '1' => 'Đã sử dụng',
                        '2' => 'Hết hạn'
                    ]"
                />

                {{-- Chọn sản phẩm --}}
                <div class="md:col-span-1 relative">
                    <span class="custom-placeholder absolute left-3 -top-1/5 -translate-y-1/2 text-gray-500 pointer-events-none z-10 text-xs bg-white p-1.25">
                        Chọn người dùng
                    </span>
                    <select id="user_search" multiple style="width: 100%;"></select>
                </div>

                <button id="btnFilter" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-6 rounded uppercase text-sm tracking-wider">
                    Lọc
                </button>
            </div>
        </div>

        <div class="p-4 flex flex-wrap justify-between items-center gap-4">
            <x-floating-select 
                id="perpage"
                name="perpage"
                class="w-40"
                label="Số lượng hiển thị"
                :options="[
                    '' => '10',
                    '20' => '20',
                    '30' => '30',
                    '50' => '50',
                    '100' => '100'
                ]"
            />
            <div class="flex gap-2">
                <button id="btn-add-activation-code" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded text-sm flex items-center font-medium">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                    TẠO MÃ MỚI
                </button>
                <button id="btn-import-excel" class="bg-blue-500 hover:bg-blue-600 border border-gray-300 text-white px-4 py-2 rounded text-sm flex items-center font-medium uppercase">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
                    Import Excel
                </button>
                <button id="btn-refresh" class="border border-[#00569d] text-[#00569d] px-4 py-2 rounded text-sm flex items-center font-medium uppercase hover:bg-blue-50">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
                    Làm mới
                </button>
            </div>
        </div>

        <!-- Table -->
        <div class="overflow-x-auto border-t border-gray-200">
            <table class="w-full text-left text-xs font-semibold tracking-wider">
                <thead>
                    <tr class="bg-white border-b border-gray-100 uppercase">
                        <th class="px-4 py-4 text-sm font-semibold text-gray-600">Mã kích hoạt</th>
                        <th class="px-4 py-4 text-sm font-semibold text-gray-600">Trạng thái</th>
                        <th class="px-4 py-4 text-sm font-semibold text-gray-600">Hạn kích hoạt</th>
                        <th class="px-4 py-4 text-sm font-semibold text-gray-600">Người sử dụng</th>
                        <th class="px-4 py-4 text-sm font-semibold text-gray-600">Ngày kích hoạt</th>
                        <th class="px-4 py-4 text-sm font-semibold text-gray-600">Hạn sử dụng sản phẩm</th>
                        <th class="px-4 py-4 text-sm font-semibold text-gray-600">Người tạo</th>
                        <th class="px-4 py-4 text-sm font-semibold text-gray-600">Ngày tạo</th>
                        <th class="px-4 py-4 text-sm font-semibold text-gray-600 text-center">Thao tác</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50 text-gray-500" id="tbody-oa-activation-codes">
                    <tr>
                        <td colspan="9" 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>

    {{-- Phân trang (Pagination) --}}
    <div class="mt-6 flex justify-center" id="pagination"></div>

    <!-- Modal: Thêm mã kích hoạt -->
    <div id="add-activation-code-modal" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4 z-50 hidden">
        <div id="add-activation-code-content" class="bg-white rounded-xl shadow-xl w-full max-w-lg overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100">
                <h2 class="text-xl font-semibold text-gray-700">Tạo mã kích hoạt</h2>
            </div>

            <form id="add-activation-code-form" method="POST" class="pt-1 pb-4 px-6 space-y-4">
                @csrf
                
                <div class="relative">
                    <x-floating-input name="prefix" id="add-activation-code-prefix" label="Tiền tố" />
                    <p class="text-[11px] text-gray-400 mt-1 italic">Để trống nếu không muốn có tiền tố</p>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <x-floating-input type="number" min="4" max="50" value="4" name="code_length" id="add-activation-code-len" label="Độ dài mã" />

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

                <x-floating-input type="number" min="1" max="1000" value="100" name="quantity" id="add-activation-code-quantity" label="Số lượng mã" />

                <!-- Loại hạn sử dụng -->
                <div class="space-y-3">
                    <span class="block text-gray-400 text-sm">Loại hạn sử dụng</span>
                    <div class="flex items-center space-x-6">
                        <label class="flex items-center cursor-pointer text-gray-500">
                            <input type="radio" name="expiry_type" value="days" checked class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                            <span class="ml-2">Số ngày</span>
                        </label>
                        <label class="flex items-center cursor-pointer text-gray-500">
                            <input type="radio" name="expiry_type" value="date" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                            <span class="ml-2">Ngày cụ thể</span>
                        </label>
                    </div>
                    <div class="relative hidden" id="expiry-type-date">
                        <label class="absolute -top-2 left-3 bg-white px-1 text-xs text-gray-400">Ngày hết hạn</label>
                        <input type="text" id="add-activation-code-expiry-date" name="expiry_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">
                        <p class="text-[11px] text-gray-400 mt-1">Chọn ngày hết hạn cụ thể</p>
                    </div>
                    <div id="expiry-type-days">
                        <x-floating-input type="number" min="1" value="30" name="expiry_days" id="add-activation-code-expiry-days" label="Hạn sử dụng (ngày)" />
                        <p class="text-[11px] text-gray-400 mt-1 leading-relaxed">Số ngày có hiệu lực kể từ ngày tạo</p>
                    </div>
                </div>

                <!-- Loại hạn sử dụng sản phẩm -->
                <div class="space-y-3">
                    <span class="block text-gray-400 text-sm">Loại hạn sử dụng sản phẩm</span>
                    <div class="flex items-center space-x-6">
                        <label class="flex items-center cursor-pointer text-gray-500">
                            <input type="radio" name="use_expiry_type" value="days" checked class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                            <span class="ml-2">Số ngày</span>
                        </label>
                        <label class="flex items-center cursor-pointer text-gray-500">
                            <input type="radio" name="use_expiry_type" value="date" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                            <span class="ml-2">Ngày cụ thể</span>
                        </label>
                    </div>
                    <div class="relative hidden" id="use-expiry-type-date">
                        <label class="absolute -top-2 left-3 bg-white px-1 text-xs text-gray-400">Ngày hết hạn sản phẩm</label>
                        <input type="text" id="add-activation-code-use-expiry-date" name="use_expiry_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">
                        <p class="text-[11px] text-gray-400 mt-1">Chọn ngày hết hạn cụ thể cho sản phẩm</p>
                    </div>
                    <div id="use-expiry-type-days">
                        <x-floating-input type="number" min="1" value="30" name="use_expiry_days" id="add-activation-code-use-expiry-days" label="Hạn sử dụng sản phẩm (ngày)" />
                        <p class="text-[11px] text-gray-400 mt-1 leading-relaxed">Số ngày sản phẩm có hiệu lực kể từ ngày kích hoạt</p>
                    </div>
                </div>

                <div class="flex justify-end space-x-4 pt-4">
                    <button type="button" class="btn-close-add-activation-code-modal px-8 py-2 border border-blue-800 text-blue-800 rounded hover:bg-blue-50 font-semibold transition-colors uppercase text-sm">
                        HỦY
                    </button>
                    <button id="btn-submit-add-activation-code" class="disabled:opacity-50 disabled:cursor-not-allowed px-8 py-2 text-blue-700 font-semibold hover:text-blue-500 hover:bg-blue-100 rounded transition-colors uppercase text-sm">
                        TẠO MÃ
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal: Import mã kích hoạt từ Excel -->
    <div id="import-activation-code-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden">
        <div id="import-activation-code-content" class="w-full max-w-2xl p-6 bg-white rounded-xl shadow-xl">
            
            <div class="mb-4">
                <h2 class="text-xl font-semibold text-gray-700">Import mã kích hoạt từ Excel</h2>
            </div>

            <div class="relative mb-6">
                <span class="absolute px-1 text-sm text-blue-500 bg-white -top-2 left-3">Chọn file Excel</span>
                <label for="import-activation-code-file" class="flex items-center cursor-pointer w-full px-4 py-3 border border-gray-300 rounded-md focus-within:border-blue-500">
                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style> @keyframes check {
                        to {
                            stroke-dashoffset: 0;
                        }
                        }</style>
                        <rect width="10" height="14" x="7" y="5" stroke="#0A0A30" stroke-width="1.5" rx="1"/><path stroke="#265BFF" stroke-linecap="round" stroke-width="1.5" d="M10 8.973h4m-4 3.64h2" style="animation:check 3s infinite cubic-bezier(.99,-.1,.01,1.02)" stroke-dashoffset="100" stroke-dasharray="100"/>
                    </svg>
                    <span class="text-gray-600 flex-1" id="import-activation-code-file-name"></span>
                    <button id="btn-clear-import-excel" type="button" class="hidden">
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes blink-1{0%,50%,to{opacity:1}25%{opacity:0}}</style><rect width="16" height="16" x="4" y="4" stroke="#0A0A30" stroke-width="1.5" rx="2.075"/><path fill="#265BFF" d="M10.242 9.18a.75.75 0 00-1.061 1.062l1.79 1.79-1.79 1.79a.75.75 0 001.06 1.06l1.79-1.79 1.79 1.79a.75.75 0 001.062-1.06l-1.79-1.79 1.79-1.79a.75.75 0 10-1.061-1.061l-1.79 1.79-1.79-1.79z" style="animation:blink-1 2s steps(1,end) infinite both"/>
                        </svg>
                    </button>
                </label>

                <input type="file" id="import-activation-code-file" accept=".xlsx" placeholder="Chọn file excel" class="hidden w-full border border-gray-300 rounded-md p-3 focus:outline-none focus:ring-1 focus:ring-blue-500 text-gray-400" />
            </div>

            <div class="p-4 mb-6 rounded-lg bg-cyan-50 border border-cyan-100">
                <h3 class="font-bold text-cyan-500 mb-2">Mẫu Excel</h3>
                <p class="mb-3 text-sm text-cyan-600 font-medium">File Excel cần có các cột sau:</p>
                
                <ul class="space-y-1 text-sm">
                    <li><strong class="text-cyan-500">code</strong> <span class="text-cyan-500">- Mã kích hoạt ( bắt buộc )</span></li>
                    <li><strong class="text-cyan-500">campaign_id</strong> <span class="text-cyan-500">- ID Campaign ( không bắt buộc, sẽ bị bỏ qua )</span></li>
                    <li><strong class="text-cyan-500">prefix</strong> <span class="text-cyan-500">- Tiền tố ( không bắt buộc )</span></li>
                    <li><strong class="text-cyan-500">expiry_days</strong> <span class="text-cyan-500">- Số ngày có hiệu lực ( VD: 30, 60, 90 , ...)</span></li>
                    <li><strong class="text-cyan-500">status</strong> <span class="text-cyan-500">- Trạng thái ( 0: Chưa sử dụng / 1: Đã sử dụng / 2: Hết hạn )</span></li>
                </ul>

                <a href="/activation_code/activation-codes-template.xlsx" download class="mt-4 w-fit flex items-center px-4 py-2 text-xs font-semibold uppercase border border-cyan-400 text-cyan-600 rounded hover:bg-cyan-100 transition shadow-sm">
                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes slide-right{0%{transform:translateY(0)}to{transform:translateY(1px)}}</style><path fill="#265BFF" d="M12.75 6.432a.75.75 0 00-1.5 0h1.5zm-1.5 6a.75.75 0 001.5 0h-1.5zm-1.22-2.53a.75.75 0 10-1.06 1.06l1.06-1.06zm1.97 3.03l-.53.53a.75.75 0 001.06 0l-.53-.53zm3.03-1.97a.75.75 0 00-1.06-1.06l1.06 1.06zm-3.78-4.53v6h1.5v-6h-1.5zm-2.28 4.53l2.5 2.5 1.06-1.06-2.5-2.5-1.06 1.06zm3.56 2.5l2.5-2.5-1.06-1.06-2.5 2.5 1.06 1.06z" style="animation:slide-right .5s cubic-bezier(1,-.43,.68,.57) infinite alternate both"/><path fill="#0A0A30" d="M8.398 15.37a.75.75 0 10-.796 1.27l.796-1.27zm-.319.685l.398-.636-.398.636zm8.327.58a.75.75 0 00-.812-1.26l.812 1.26zm-8.804.006l.08.05.795-1.272-.079-.05-.796 1.272zm.08.05a8.14 8.14 0 008.724-.055l-.812-1.262a6.64 6.64 0 01-7.117.045l-.796 1.271z"/></svg>
                    Tải Mẫu
                </a>
            </div>

            <div id="import-activation-code-result" class="p-4 mb-6 bg-green-50 rounded-lg border border-green-100 hidden">
                <h3 class="font-bold text-green-600 mb-2">Tổng kết</h3>
                <div class="space-y-1 text-sm text-green-600 font-medium" id="import-activation-code-board"></div>
            </div>

            <div class="flex justify-end space-x-4">
                <button class="btn-close-import-activation-code-modal px-8 py-2 text-sm font-medium text-blue-600 border border-blue-600 rounded-md hover:bg-blue-50 transition uppercase">
                    Hủy
                </button>
                <button disabled id="btn-submit-import-activation-code" class="disabled:opacity-50 disabled:cursor-not-allowed px-6 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 transition uppercase shadow-sm">
                    Import
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    window.routes = {
        getActivationCodesByCampaign: "{{ route('oa-campaigns.getActivationCodesByCampaign' , ['id' => ':id']) }}",
        addOAActivationCode: "{{ route('oa-activation-codes.store', ['campaignId' => ':id']) }}",
        useOAActivationCode: "{{ route('oa-activation-codes.useActivationCode', ['id' => ':id']) }}",
        deleteOAActivationCode: "{{ route('oa-activation-codes.destroy', ['id' => ':id']) }}",
        importExcelOAActivationCode: "{{ route('oa-activation-codes.importExcel') }}",
        searchUsers: "{{ route('users.searchUsers') }}"
    }
</script>

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

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