<?php

use Nabik\Gateland\Gateways\BaseGateway;
use Nabik\Gateland\Gateways\Features\FreeFeature;
use Nabik\GatelandPro\GatelandPro;

defined( 'ABSPATH' ) || exit;

wp_enqueue_style('custom-style', GATELAND_URL . 'dev_assets/css/style.css', [], GATELAND_VERSION);
wp_enqueue_style('notyf-style', GATELAND_URL . 'dev_assets/css/notyf.min.css', [], GATELAND_VERSION);

wp_enqueue_script('notyf-script', GATELAND_URL . 'dev_assets/js/notyf.min.js', [], GATELAND_VERSION, true);
wp_enqueue_script('global-script', GATELAND_URL . 'dev_assets/js/global.js', ['notyf-script'], GATELAND_VERSION, true);
wp_enqueue_script('page-script', GATELAND_URL . 'dev_assets/js/page/gateways.js', [], GATELAND_VERSION, true);
wp_enqueue_script('alpine-script', GATELAND_URL . 'dev_assets/js/alpine.min.js', ['global-script', 'page-script'], GATELAND_VERSION, ['strategy' => 'defer']);

wp_localize_script('global-script', 'gateland', [
    'root' => esc_url_raw(rest_url()),
    'nonce' => wp_create_nonce('wp_rest'),
]);
?>

<section x-data="gateways" class="text-base">

    <section class="bg-[#F9FAFB] text-gray-900 py-6 md:pl-5 pl-2.5">

        <div class="container">

            <div class="flex items-center gap-2 flex-wrap mb-5">
                <div class="font-semibold text-lg ml-auto">
                    درگاه‌ها
                </div>
                <a href="?page=gateland-gateways-add" class="bg-primary-500 hover:bg-primary-600 flex items-center gap-2 text-sm text-white hover:text-white rounded-[8px] py-2 px-3.5">
                    <img src="<?php echo GATELAND_URL . 'dev_assets'; ?>/image/icons/plus.svg">
                    <span>افزودن درگاه جدید</span>
                </a>
            </div>

            <div
                    x-show="tableLoaderIsActive || (tableData.length > 0)"
                    class="border border-gray-300 rounded-xl overflow-hidden mb-5"
            >
                <div class="flex flex-wrap gap-x-5 gap-y-2 items-center py-3 px-4">
                    <span class="font-semibold text-lg">
                        لیست درگاه‌ها
                    </span>
                    <a href="?page=gateland-gateways-sort" class="border border-gray-300 hover:bg-primary-600 hover:text-white text-sm shadow-[0_1px_2px_0_#1018280D] rounded-[8px] py-2 px-5 mr-auto">
                        تغییر اولویت‌بندی
                    </a>
                </div>

                <!--table-->
                <div class="overflow-auto custom-scrollbar">
                    <table class="w-full">
                        <thead class="text-sm text-gray-600 text-nowrap">
                            <tr>
                                <td class="bg-gray-100 py-3 px-5">
                                    اولویت
                                </td>
                                <td class="bg-gray-100 py-3 px-5">
                                    نام درگاه
                                </td>
                                <td class="bg-gray-100 py-3 px-5">
                                    وضعیت
                                </td>
                                <td class="bg-gray-100 py-3 px-5">
                                    عملیات
                                </td>
                            </tr>
                        </thead>
                        <tbody class="w-full">
                            <!-- skeleton -->
                            <template x-if="tableLoaderIsActive">
                                <template x-for="row in [1,2,3,4,5]">
                                    <tr class="border-b bg-white border-gray-200">
                                        <td class="py-4 max-w-16 md:px-5 px-3">
                                            <div class="flex items-center gap-3 min-w-[250px]">
                                                <div class="skeleton size-5 rounded-full"></div>
                                            </div>
                                        </td>
                                        <td class="py-4 md:px-5 px-3">
                                            <div class="flex items-center gap-3 min-w-[250px]">
                                                <div class="skeleton size-10 min-w-10 rounded-md"></div>
                                                <div class="text-sm">
                                                    <div class="skeleton w-10 h-4 rounded-full mb-2"></div>
                                                    <div class="skeleton w-24 h-4 rounded-full"></div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="py-4 md:px-5 px-3">
                                            <div class="skeleton w-16 h-4 rounded-full"></div>
                                        </td>
                                        <td class="py-4 md:px-5 px-3">
                                            <div class="flex items-center sm:gap-2 gap-1">
                                                <template x-for="row in [1,2,3]">
                                                    <div class="skeleton size-7 rounded-md"></div>
                                                </template>
                                            </div>
                                        </td>
                                    </tr>
                                </template>
                            </template>

                            <!-- table data -->
                            <template x-if="!tableLoaderIsActive">
                                <template x-for="(row, index) in tableData">
                                    <tr class="border-b bg-white border-gray-200" :key="row.id">
                                        <td class="max-w-16 py-4 md:px-5 px-3">
                                            <span x-text="row.sort"></span>
                                        </td>
                                        <td class="py-4 md:px-5 px-3">
                                            <div class="flex gap-3 min-w-[250px]">
                                                <a :href="row.url" target="_blank"
                                                   class="size-10 min-w-10 flex items-center justify-center"
                                                >
                                                    <img class="max-w-full" :src="row.icon">
                                                </a>
                                                <a :href="row.url" target="_blank" class="block text-sm">
                                                    <div class="font-semibold text-gray-900 mb-0.5">
                                                        <span x-text="row.name"><span>
                                                    </div>
                                                    <div class="text-gray-600">
                                                        <span x-text="row.description"><span>
                                                    </div>
                                                </a>
                                            </div>
                                        </td>
                                        <td class="py-4 md:px-5 px-3">
                                            <template x-if="row.status === 'active'">
                                                <div
                                                        @click="openStatusModal(row)"
                                                        class="inline-block rounded-full bg-success-50 text-xs text-success-700 text-nowrap cursor-pointer px-2 py-1">
                                                    فعال
                                                </div>
                                            </template>
                                            <template  x-if="row.status !== 'active'">
                                                <div
                                                        @click="openStatusModal(row)"
                                                        class="inline-block rounded-full bg-error-50 text-xs text-error-700 text-nowrap cursor-pointer px-2 py-1"
                                                >
                                                    غیر فعال
                                                </div>
                                            </template>
                                        </td>
                                        <td class="py-4 md:px-5 px-3">
                                            <div class="flex items-center sm:gap-2 gap-1">
                                                <a
                                                        :href="`?page=gateland-gateways-edit&gateway_id=${row.id}`"
                                                        class="size-7 flex items-center justify-center rounded hover:shadow hover:bg-primary-100"
                                                >
                                                    <img src="<?php echo GATELAND_URL . 'dev_assets'; ?>/image/icons/settings.svg">
                                                </a>
                                                <a
                                                        :href="`?page=gateland-gateway&gateway_id=${row.id}`"
                                                        class="size-7 flex items-center justify-center rounded hover:shadow hover:bg-success-100"
                                                >
                                                    <img src="<?php echo GATELAND_URL . 'dev_assets'; ?>/image/icons/eye.svg">
                                                </a>
                                                <button
                                                        @click="openDeleteModal(row)"
                                                        class="size-7 flex items-center justify-center rounded hover:shadow hover:bg-error-100"
                                                >
                                                    <img src="<?php echo GATELAND_URL . 'dev_assets'; ?>/image/icons/trash.svg">
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </template>
                            </template>
                        </tbody>
                    </table>
                </div>

            </div>

            <template x-if="tableData.length < 1">
                <!-- notfound -->
                <div class="border border-gray-300 rounded-xl flex flex-col items-center justify-center text-center sm:p-10 p-5">
                    <div class="font-semibold text-gray-900 mb-3">
                        هنوز هیچ درگاه فعالی ندارید!
                    </div>
                    <div class="max-w-[575px] text-gray-600 mb-6">
                        برای شروع تراکنش‌ها، باید یک درگاه پرداخت اضافه کنید. گیت‌لند از بیش از ۳۰
                        درگاه پرداخت پشتیبانی می‌کند تا تجربه‌ای سریع و ایمن برای شما و مشتریانتان فراهم شود.
                    </div>
                    <a href="?page=gateland-gateways-add" class="min-w-fit bg-primary-500 hover:bg-primary-600 flex items-center sm:gap-2 gap-1 text-sm text-white hover:text-white rounded-[8px] text-nowrap py-2 px-3.5">
                        <img  src="<?php echo GATELAND_URL . 'dev_assets'; ?>/image/icons/plus.svg">
                        <span>افزودن درگاه جدید</span>
                    </a>
                </div>
            </template>

            <div x-show="tableData.length > 0" class="flex items-center flex-wrap gap-4 border border-[#738DBF] bg-primary-25 rounded-xl p-3 mb-5">
                <div class="flex items-start gap-4">
                    <img src="<?php echo GATELAND_URL . 'dev_assets'; ?>/image/featured-icon.svg">
                    <div>
                        <div class="text-gray-700 mb-1.5">
                            با افزودن درگاه‌های متفاوت، شانس موفقیت تراکنش‌هایتان را افزایش دهید.
                        </div>
                        <div class="text-gray-600 font-normal">
                            گیت‌لند از بیش از ۳۰ درگاه پرداخت پشتیبانی می‌کند تا بهترین تجربه پرداخت را برای شما و مشتریانتان تضمین کند.
                        </div>
                    </div>
                </div>
                <a href="?page=gateland-gateways-add" class="min-w-fit bg-primary-500 hover:bg-primary-600 flex items-center sm:gap-2 gap-1 text-sm text-white hover:text-white rounded-[8px] text-nowrap py-2 px-3.5 mr-auto">
                    <img class="" src="<?php echo GATELAND_URL . 'dev_assets'; ?>/image/icons/plus.svg">
                    <span>افزودن درگاه جدید</span>
                </a>
            </div>

        </div>

        <!-- status modal -->
        <div
                x-transition
                x-cloak
                class="fixed top-0 left-0 z-10 flex items-center justify-center w-full h-full overflow-auto custom-scrollbar p-4"
                x-show="modals.status.active"
        >
            <!-- overlay -->
            <div
                    @click="modals.status.active = false"
                    class="fixed z-10 top-0 left-0 w-full h-full bg-black bg-opacity-50 cursor-pointer"
            ></div>

            <!-- body -->
            <div class="bg-white w-[480px] max-w-full z-20  rounded-xl p-5 my-auto">
                <div class="mb-3">
                    <div class="size-12 flex items-center justify-center bg-primary-50 rounded-full">
                        <div class="size-9 flex items-center justify-center bg-primary-100 rounded-full">
                            <img src="<?php echo GATELAND_URL . 'dev_assets'; ?>/image/icons/active.svg">
                        </div>
                    </div>
                </div>
                <div class="font-semibold text-lg mb-1">
                    <template x-if="modals.status.gateway?.status === 'active'">
                        <span>غیرفعال‌سازی </span>
                    </template>
                    <template x-if="modals.status.gateway?.status === 'inactive'">
                        <span>فعال‌سازی </span>
                    </template>
                    درگاه
                    <span x-text="modals.status.gateway?.name"></span>
                </div>
                <div class="text-sm text-gray-600 font-light mb-6">
                    شما در حال
                    <template x-if="modals.status.gateway?.status === 'active'">
                        <span>غیرفعال‌سازی </span>
                    </template>
                    <template x-if="modals.status.gateway?.status === 'inactive'">
                        <span>فعال‌سازی </span>
                    </template>
                    درگاه
                    <span x-text="modals.status.gateway?.name" class="font-semibold"></span>
                    هستید.
                    <br>
                    آیا از این کار اطمینان دارید؟
                </div>
                <div class="flex items-center justify-center gap-3">
                    <button
                            @click="modals.status.active = false"
                            class="w-1/2 border border-gray-300 text-gray-700 font-semibold rounded-lg hover:shadow py-2"
                    >
                        انصراف
                    </button>
                    <button @click="changeStatusGateway()" class="w-1/2 border bg-primary-600 border-primary-600 text-white font-semibold rounded-lg hover:shadow  py-2">
                        تایید
                    </button>
                </div>
            </div>
        </div>

        <!-- delete modal -->
        <div
                x-transition
                x-cloak
                class="fixed top-0 left-0 z-10 flex items-center justify-center w-full h-full overflow-auto custom-scrollbar p-4"
                x-show="modals.delete.active"
        >
            <!-- overlay -->
            <div
                    @click="modals.delete.active = false"
                    class="fixed z-10 top-0 left-0 w-full h-full bg-black bg-opacity-50 cursor-pointer"
            ></div>

            <!-- body -->
            <div class="bg-white w-[480px] max-w-full z-20  rounded-xl p-5 my-auto">
                <div class="mb-3">
                    <div class="size-12 flex items-center justify-center bg-error-50 rounded-full">
                        <div class="size-9 flex items-center justify-center bg-error-100 rounded-full">
                            <img src="<?php echo GATELAND_URL . 'dev_assets'; ?>/image/icons/trash-red.svg">
                        </div>
                    </div>
                </div>
                <div class="font-semibold text-lg mb-1">
                    حذف درگاه
                    <span x-text="modals.delete.gateway?.name"></span>
                </div>
                <div class="text-sm text-gray-600 font-light mb-6">
                    در حال حذف درگاه
                    <span x-text="modals.delete.gateway?.name" class="font-semibold"></span>
                    هستید.
                    <br>
                    آیا از این کار اطمینان دارید؟
                </div>
                <div class="mb-5 hidden">
                    <label class="block text-sm text-gray-700 mb-1">
                        نام درگاه را وارد کنید.
                    </label>
                    <input type="text" class="border text-sm  border-gray-300 text-gray-900 w-full rounded-lg !py-1.5 px-3.5" placeholder="شناسه را وارد کنید">
                    <div class="text-xs text-error-500 pt-1 empty:pt-0">
                        متن خطا!
                    </div>
                </div>
                <div class="flex items-center justify-center gap-3">
                    <button
                            @click="modals.delete.active = false"
                            class="w-1/2 border border-gray-300 text-gray-700 font-semibold rounded-lg hover:shadow py-2"
                    >
                        انصراف
                    </button>
                    <button @click="deleteGateway()" class="w-1/2 border bg-error-600 border-error-600 text-white font-semibold rounded-lg hover:shadow  py-2">
                        حذف درگاه
                    </button>
                </div>
            </div>
        </div>

    </section>

</section>