@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>
        <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</h1>

    <div class="bg-white p-4 rounded-t-lg border border-gray-200 shadow-sm">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
            <x-floating-input name="activation_code" label="Tìm mã kích hoạt" id="activation-code" clearable="true" />
            
            {{-- Chọn campaign --}}
            <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">
                    Campaign
                </span>
                <select id="campaign_search" multiple style="width: 100%;"></select>
            </div>

            <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'
                ]"
            />

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

    <div class="px-4 py-3 bg-cyan-100 text-cyan-400 font-semibold hidden" id="quantity-selected-codes"></div>

    <div class="bg-white px-4 py-3 border-x border-b border-gray-200 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 space-x-2">
            <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-export-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>
                Export 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>

    <div class="bg-white overflow-x-auto border-x border-b border-gray-200 rounded-b-lg shadow-sm">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="bg-white text-sm text-gray-500 uppercase tracking-wider border-b border-gray-200">
                    <th class="px-4 py-4 w-10"><input type="checkbox" id="check-all-oa-activation-codes" class="rounded w-4 h-4 text-blue-600 cursor-pointer"></th>
                    <th class="px-4 py-4 font-semibold">Mã kích hoạt</th>
                    <th class="px-4 py-4 font-semibold text-center">Campaign</th>
                    <th class="px-4 py-4 font-semibold text-center">Trạng thái</th>
                    <th class="px-4 py-4 font-semibold text-center">Hạn kích hoạt</th>
                    <th class="px-4 py-4 font-semibold text-center">Người sử dụng</th>
                    <th class="px-4 py-4 font-semibold text-center">Ngày kích hoạt</th>
                    <th class="px-4 py-4 font-semibold text-center">Hạn sử dụng sản phẩm</th>
                    <th class="px-4 py-4 font-semibold text-center">Người tạo</th>
                    <th class="px-4 py-4 font-semibold text-center">Ngày tạo</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100" 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>

    {{-- Phân trang (Pagination) --}}
    <div class="mt-6 flex justify-center" id="pagination"></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 = {
        getOAActivationCodes : "{{ route('oa-activation-codes.getOAActivationCodes') }}",
        importExcelOAActivationCode: "{{ route('oa-activation-codes.importExcel') }}",
        searchOACampaigns: "{{ route('oa-campaigns.searchCampaign') }}",
    }
</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-activation-code.index.js') }}"></script>

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