<x-admin-layout>
@section('title', $page . ' | ' . get_setting('site_name'))
<div class="mt-4 grid grid-cols-12 gap-4 sm:mt-5 sm:gap-5 lg:mt-6 lg:gap-6">
    <div class="col-span-12">
        <div class="card px-4 pb-4 sm:px-5">
            <div class="space-y-4 py-3">
                <h2 class="text-2xl font-semibold text-slate-600 dark:text-navy-100 mt-4 mb-4">
                    {{ $page }}
                </h2>
            </div>
            @if(session('success'))
              <div class="alert flex items-center overflow-hidden rounded-lg border border-success text-success">
                <div class="px-4 py-3 sm:px-5">
                    <strong>{{ session('success') }}</strong>
                </div>
              </div>
            @endif
            @if(session('error'))
              <div class="alert flex items-center overflow-hidden rounded-lg border border-error text-error">
                <div class="px-4 py-3 sm:px-5">
                    <strong>{{ session('error') }}</strong>
                </div>
              </div>
            @endif
        <form action="/admin/settings/update?route=contest" method="POST" class="mt-4">
          @csrf
          <div class="space-y-4">
            <div> 
              <label class="block text-sm font-medium py-3">Activity Count Required from each referred users (Referral Contest):</label>
              <input id="min_activity_count" name="min_activity_count" type="number" step="1" value="{{ get_setting('min_activity_count') }}" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
            </div>
            <button type="submit" class="btn space-x-2 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">Save</button>
          </div>
        </form>

            <div class="overflow-x-auto mt-5">
                <table class="is-hoverable w-full text-left">
                    <thead>
                        <tr>
                            <th class="bg-slate-200 px-4 py-3 text-slate-800 dark:bg-navy-800 dark:text-navy-100">#</th>
                            <th class="bg-slate-200 px-4 py-3 text-slate-800 dark:bg-navy-800 dark:text-navy-100">Name</th>
                            <th class="bg-slate-200 px-4 py-3 text-slate-800 dark:bg-navy-800 dark:text-navy-100">Rewards</th>
                            <th class="bg-slate-200 px-4 py-3 text-slate-800 dark:bg-navy-800 dark:text-navy-100">Type</th>
                            <th class="bg-slate-200 px-4 py-3 text-slate-800 dark:bg-navy-800 dark:text-navy-100">Status</th>
                            <th class="bg-slate-200 px-4 py-3 text-slate-800 dark:bg-navy-800 dark:text-navy-100">Action</th>
                        </tr>
                    </thead>
                    <tbody id="contest-list">
                        <tr>
                            <td colspan="6" class="text-center py-4">Loading...</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>
    </div>
</div>

@push('scripts')
<script>
    $(document).ready(function () {
        loadContest();

        function loadContest() {
            $.ajax({
                url: "/admin/contest/load",
                type: "GET",
                dataType: "json",
                success: function (data) {
                    let rows = "";
                    data.forEach((item, index) => {
                        rows += `
                            <tr data-id="${item.id}">
                                <td class="whitespace-nowrap px-4 py-3 sm:px-5">${index + 1}</td>
                                <td><input type="text" value="${item.name}" class="editable form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" data-field="name" readonly></td>
                                <td><input type="text" value="${item.rewards}" class="editable form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" data-field="rewards"></td>
                                <td>
                                    <select class="editable form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent" data-field="type">
                                        <option value="daily" ${item.type === "daily" ? "selected" : ""}>Daily</option>
                                        <option value="weekly" ${item.type === "weekly" ? "selected" : ""}>Weekly</option>
                                        <option value="monthly" ${item.type === "monthly" ? "selected" : ""}>Monthly</option>
                                    </select>
                                </td>
                                <td>
                                    <select class="editable form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent" data-field="status">
                                        <option value="1" ${item.is_active == 1 ? "selected" : ""}>Active</option>
                                        <option value="0" ${item.is_active == 0 ? "selected" : ""}>Inactive</option>
                                    </select>
                                </td>
                                <td class="flex items-center">
                                    <button class="mt-1 edit-btn btn min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">Update</button>
                                </td>
                            </tr>
                        `;
                    });
                    $("#contest-list").html(rows);
                },
                error: function (xhr) {
                    alert("Error fetching data!");
                }
            });
        }

        $(document).on("click", ".edit-btn", function () {
            let theme = localStorage.getItem("_x_darkMode_on") === "true" ? "dark" : "light";
            let row = $(this).closest("tr");
            let id = row.data("id");
            let data = { _token: "{{ csrf_token() }}" };
        
            // Ambil nilai input
            row.find(".editable").each(function () {
                let field = $(this).data("field");
                let value = $(this).val();
                data[field] = value;
            });
        
            $.ajax({
                url: "/admin/contest/update/" + id,
                type: "PUT",
                data: data,
                success: function () {
                    loadContest();
                        let swalOptions = {
                            icon: "success",
                            title: "Success!",
                            html: `<p>Updated!</p>`,
                            toast: true,
                            position: "bottom-end",
                            showConfirmButton: false,
                            customClass: {
                                popup: "toast-popup",
                                title: "toast-title",
                                content: "toast-content"
                            },
                            showCloseButton: true,
                            closeButtonHtml: "<i class='fas fa-times'></i>"
                        };
                        
                        if (theme === "dark") {
                            swalOptions.background = "#1E293B";
                            swalOptions.color = "#F8FAFC";
                            swalOptions.confirmButtonColor = "#4F46E5";
                        }

                        Swal.fire(swalOptions);
                },
                error: function () {
                    alert("Error updating data");
                }
            });
        });
    });
</script>
@endpush
</x-admin-layout>
