@extends('layouts.layout')

@section('content')
    <div id="main">
        <header class="mb-3">
            <a href="#" class="burger-btn d-block d-xl-none">
                <i class="bi bi-justify fs-3"></i>
            </a>
        </header>


        <div class="page-heading">

            <div class="page-title">
                <div class="row">
                    <div class="col-12 col-md-6 order-md-1 order-last">
                        <h3>User</h3>
                        <p class="text-subtitle text-muted">For user to check they list</p>
                    </div>
                    <div class="col-12 col-md-6 order-md-2 order-first">
                        <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ url('/') }}">Dashboard</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Components -> User</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
            <section id="basic-horizontal-layouts">
                <div class="row match-height">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">User Form</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <form class="form form-horizontal" id="updateUserForm" enctype="multipart/form-data"
                                        method="POST">
                                        @csrf
                                        <div class="form-body">
                                            <div class="row">

                                                <div class="col-md-4">
                                                    <label>First Name</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="first_name" class="form-control"
                                                        placeholder="First Name" name="first_name">
                                                </div>

                                                <div class="col-md-4">
                                                    <label>Last Name</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="last_name" class="form-control"
                                                        placeholder="Last Name" name="last_name">
                                                </div>

                                                <div class="col-md-4">
                                                    <label>Email</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="email" id="email" class="form-control"
                                                        placeholder="Email" name="email" readonly>
                                                </div>

                                                <div class="col-md-4">
                                                    <label>Mobile</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="tel_num" class="form-control"
                                                        placeholder="Mobile" name="tel_num">
                                                </div>

                                                <div class="col-md-4">
                                                    <label>Gender</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    {{-- <input type="text" id="gender" class="form-control"
                                                        placeholder="Gender" name="gender"> --}}
                                                    <select name="gender" id="gender" class="form-select" required>
                                                        <option value="">Select Gender</option>
                                                        <option value="male">Male</option>
                                                        <option value="female">Female</option>
                                                        <option value="other">Other</option>
                                                    </select>
                                                </div>

                                                <div class="col-md-4">
                                                    <label>Known From</label>
                                                </div>
                                                <div class="col-md-8 form-group">

                                                    <select name="known_from" id="known_from" class="form-select">
                                                        <option value="">Select Known From</option>
                                                        <option value="friend">Friend</option>
                                                        <option value="bank">Bank</option>
                                                        <option value="social_media">Social Media</option>
                                                        <option value="advertisement">Advertisement</option>
                                                        <option value="other">Other</option>
                                                    </select>
                                                </div>

                                                <div class="col-md-4">
                                                    <label>Control User</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="control_user" name="control_user"
                                                        placeholder="Control user" class="form-control" readonly>
                                                </div>

                                                <div class="col-md-4">
                                                    <label>Image</label>
                                                </div>
                                                <div class="col-md-4 form-group">
                                                    <input type="file" class="image-preview-filepond form-control"
                                                        name="image" id="image"
                                                        accept="image/png, image/jpeg, image/jpg" >
                                                </div>

                                                <div class="col-sm-12 d-flex justify-content-end">
                                                    <button type="submit" class="btn btn-primary me-1 mb-1">Submit</button>
                                                    <button type="reset"
                                                        class="btn btn-light-secondary me-1 mb-1">Reset</button>
                                                </div>
                                                
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </section>





            <section class="section">
                <div class="row" id="table-striped">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">User List</h4>
                            </div>
                            <div class="card-content">

                                <div id="tableSpinner" class="text-center py-5">
                                    <div class="spinner-border text-primary" style="width:3rem;height:3rem;"></div>
                                    <p class="mt-2">Loading table...</p>
                                </div>

                                <!-- table striped -->
                                                                                                                                                    
                                <div id="tableContent" style="display:none;">
                                    <div class="table-responsive">
                                        <table class="table table-striped mb-0">
                                            <thead>
                                                <tr>
                                                    <th>ID</th>
                                                    <th>IMAGE</th>
                                                    <th>FIRST NAME</th>
                                                    <th>LAST NAME</th>
                                                    <th>GENDER</th>
                                                    <th>EMAIL</th>
                                                    <th>KNOWN FROM</th>
                                                    <th>NUMBER PHONE</th>
                                                    <th>CONTROL USER</th>
                                                    <th>CREATED AT</th>
                                                    <th>IS BLOCKED</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody id="tableBody">
                                                <!-- dynamic data -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <nav aria-label="Page navigation example">
                    <ul class="pagination pagination-primary justify-content-end">
                        <!-- <li class="page-item"><a class="page-link" href="#"><span aria-hidden="true"><i
                                                                                                                                                                        class="bi bi-chevron-left"></i></span></a></li>
                                                                                                                                                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                                                                                                                                                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                                                                                                                                                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                                                                                                                                                        <li class="page-item"><a class="page-link" href="#"><span aria-hidden="true"><i
                                                                                                                                                                        class="bi bi-chevron-right"></i></span></a></li> -->
                    </ul>
                </nav>
            </section>

        </div>
        @include('layouts.footer')
    </div>



    <!-- filepond validation -->
    <script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>

    <!-- image editor -->
    <script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.js">
    </script>
    <script src="https://unpkg.com/filepond-plugin-image-crop/dist/filepond-plugin-image-crop.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-filter/dist/filepond-plugin-image-filter.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>

    <!-- toastify -->
    <script src="assets/vendors/toastify/toastify.js"></script>

    <!-- filepond -->
    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


    <script>
        const KFA_URL = "{{ env('KFA_URL') }}";
        FilePond.registerPlugin(
            // validates the size of the file...
            FilePondPluginFileValidateSize,
            // validates the file type...
            FilePondPluginFileValidateType,

            // calculates & dds cropping info based on the input image dimensions and the set crop ratio...
            FilePondPluginImageCrop,
            // preview the image file type...
            FilePondPluginImagePreview,
            // filter the image file
            FilePondPluginImageFilter,
            // corrects mobile image orientation...
            FilePondPluginImageExifOrientation,
            // calculates & adds resize information...
            FilePondPluginImageResize,
        );



        // Filepond: Image Preview
        const pond = FilePond.create(document.querySelector('.image-preview-filepond'), {
            allowImagePreview: true,
            allowImageFilter: false,
            allowImageExifOrientation: false,
            allowImageCrop: false,
            acceptedFileTypes: ['image/png', 'image/jpg', 'image/jpeg'],
            fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
                // Do custom type detection here and return with promise
                resolve(type);
            })
        });













        document.addEventListener("DOMContentLoaded", function() {

            const apiPage = "{{ env('KFA_URL') }}/getalluser"; // pagination API
            const apiAll = "{{ env('KFA_URL') }}/userAll"; // full data API

            let extraData = []; // store userAll data

            async function loadTable(url = apiPage) {
                const spinner = document.getElementById('tableSpinner');
                const tableContent = document.getElementById('tableContent');
                const tableBody = document.getElementById('tableBody');

                spinner.style.display = 'block';
                tableContent.style.display = 'none';

                try {
                    // Fetch both APIs in parallel
                    const [resPage, resAll] = await Promise.all([
                        fetch(url).then(r => r.json()),
                        fetch(apiAll).then(r => r.json())
                    ]);

                    extraData = resAll || [];

                    let users = resPage.data || [];
                    let html = '';

                    if (users.length > 0) {
                        users.forEach((item, index) => {
                            // Match extra info
                            let extra = extraData.find(u => u.control_user === item.control_user) || {};

                            html += `
                                    <tr style="height:70px;">
                                        <td>${item.userId}</td>
                                        <td style="display:flex; justify-content:center; align-items:center;">
                                            <img src="${extra.url}" alt="No Image"
                                                 style="height:70px; object-fit:cover;">
                                        </td>
                                        <td>${item.first_name ?? '-'}</td>
                                        <td>${item.last_name ?? '-'}</td>
                                        <td>${item.gender ?? '-'}</td>
                                        <td>${item.email ?? '-'}</td>
                                        <td>${item.known_from ?? '-'}</td>
                                        <td>${item.tel_num ?? '-'}</td>
                                        <td>${item.control_user ?? '-'}</td>
                                        <td>${item.approved_at ?? '-'}</td>
                                        <td>
                                            ${item.is_blocked === "1"
                                                ? '<span class="badge bg-danger">Blocked</span>'
                                                : '<span class="badge bg-success">Active</span>'
                                            }
                                        </td>
                                        <td>

                                            <div class="dropdown ">

                                                <div class="text-center rounded dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
                                                    <svg class="bi" width="1em" height="1em" fill="currentColor" style="cursor:pointer;" >
                                                        <use xlink:href="assets/vendors/bootstrap-icons/bootstrap-icons.svg#three-dots-vertical" />
                                                    </svg>
                                                </div>
                                                <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
                                                    
                                                    <a class="dropdown-item" href="#" onclick="detailUser(${item.userId})"><i class="bi bi-eye"></i>  View Details</a>
                                                    <a class="dropdown-item"
                                                        href=""
                                                        onclick="toggleBlockUser(event, ${item.control_user}, ${item.is_blocked})">
                                                            <i class="bi bi-x-circle"></i> 
                                                            ${item.is_blocked == 1 ? 'Unblock' : 'Block'}
                                                    </a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item"
                                                        href="#"
                                                        onclick="deleteUser(event, ${item.control_user})">
                                                            <i class="bi bi-trash"></i> Delete User
                                                    </a>
                                                </div>
                                            </div>
                                        </td>

                                    </tr>
                                `;
                        });
                    } else {
                        html = `<tr><td colspan="12" class="text-center">No data</td></tr>`;
                    }

                    tableBody.innerHTML = html;

                    spinner.style.display = 'none';
                    tableContent.style.display = 'block';

                    renderPagination(resPage);

                } catch (error) {
                    console.error(error);
                    spinner.querySelector('p').innerText = 'Failed to load data';
                }
            }

            function renderPagination(res) {
                const pagination = document.querySelector('.pagination');
                pagination.innerHTML = '';

                // Previous
                pagination.innerHTML += `
                        <li class="page-item ${!res.prev_page_url ? 'disabled' : ''}">
                            <a class="page-link" href="#" data-url="${res.prev_page_url}">
                                <i class="bi bi-chevron-left"></i>
                            </a>
                        </li>
                    `;

                // Pages
                for (let i = 1; i <= res.last_page; i++) {
                    pagination.innerHTML += `
                            <li class="page-item ${i === res.current_page ? 'active' : ''}">
                                <a class="page-link" href="#" data-url="${apiPage}?page=${i}">${i}</a>
                            </li>
                        `;
                }

                // Next
                pagination.innerHTML += `
                        <li class="page-item ${!res.next_page_url ? 'disabled' : ''}">
                            <a class="page-link" href="#" data-url="${res.next_page_url}">
                                <i class="bi bi-chevron-right"></i>
                            </a>
                        </li>
                    `;

                pagination.querySelectorAll('a.page-link').forEach(link => {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();
                        const url = this.dataset.url;
                        if (url) loadTable(url);
                    });
                });
            }

            // Example toggle block/unblock
            window.toggleBlock = function(controlUser, button) {
                let isBlocked = button.textContent.includes("Block");

                // Call API to block/unblock here
                // For now, just toggle UI
                button.innerHTML = `<i class="bi bi-x-circle"></i> ${isBlocked ? 'Unblock' : 'Block'}`;
                button.classList.toggle('btn-success');
                button.classList.toggle('btn-danger');

                let badge = button.closest('tr').querySelector('td:nth-child(11) span');

                if (badge) {
                    badge.innerText = isBlocked ? 'Blocked' : 'Active';
                    badge.classList.toggle('bg-danger');
                    badge.classList.toggle('bg-success');

                }
            }

            // First load
            loadTable();
        });






        function detailUser(userId) {
            fetch(`user/${userId}`)
                .then(response => response.json())
                .then(user => {

                    document.getElementById('first_name').value = user.first_name || '';
                    document.getElementById('last_name').value = user.last_name || '';
                    document.getElementById('email').value = user.email || '';
                    document.getElementById('tel_num').value = user.tel_num || '';

                    // ✅ Gender
                    const genderSelect = document.getElementById('gender');
                    if (genderSelect && user.gender) {
                        genderSelect.value = user.gender.toString().trim().toLowerCase();
                    }

                    // ✅ Known From
                    const knownFromSelect = document.getElementById('known_from');
                    if (knownFromSelect && user.known_from) {
                        knownFromSelect.value = user.known_from.toString().trim().toLowerCase();
                    }

                    document.getElementById('control_user').value = user.control_user || '';

                    if (user.url) {
                        pond.removeFiles();
                        pond.addFile(user.url);
                    }

                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }




        function toggleBlockUser(event, controlId, isBlocked) {
            event.preventDefault();

            const btn = event.currentTarget;
            const row = btn.closest('tr');
            const badge = row.querySelector('td:nth-child(11) span');

            let actionText = isBlocked == 1 ? "unblock" : "block";

            Swal.fire({
                title: "Are you sure?",
                text: `Do you want to ${actionText} this user?`,
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: isBlocked == 1 ? "#28a745" : "#d33",
                cancelButtonColor: "#6c757d",
                confirmButtonText: `Yes, ${actionText} it!`
            }).then((result) => {

                if (!result.isConfirmed) return;

                const url = isBlocked == 1 ?
                    `unblock_user/${controlId}` :
                    `block_user/${controlId}`;

                // ✅ lock button
                btn.style.pointerEvents = "none";
                btn.style.opacity = "0.6";

                fetch(url, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document
                                .querySelector('meta[name="csrf-token"]')
                                .getAttribute('content')
                        }
                    })
                    .then(res => res.json())
                    .then(data => {

                        if (data.success) {

                            // ✅ manual toggle
                            let newState = isBlocked == 1 ? 0 : 1;

                            // ✅ update button text
                            btn.innerHTML = `
                    <i class="bi bi-x-circle"></i> 
                    ${newState == 1 ? 'Unblock' : 'Block'}
                `;

                            // ✅ update next click state
                            btn.onclick = (e) => toggleBlockUser(e, controlId, newState);

                            // ✅ smooth badge update
                            if (badge) {
                                badge.style.transition = "all 0.3s ease";
                                badge.innerText = newState == 1 ? 'Blocked' : 'Active';

                                badge.classList.remove('bg-success', 'bg-danger');
                                badge.classList.add(newState == 1 ? 'bg-danger' : 'bg-success');
                            }

                        } else {
                            showError(data.message);
                        }

                    })
                    .catch(() => {
                        showError('Server error occurred');
                    })
                    .finally(() => {
                        btn.style.pointerEvents = "auto";
                        btn.style.opacity = "1";
                    });

            });
        }


        function deleteUser(event, controlId) {
            event.preventDefault();

            const btn = event.currentTarget;
            const row = btn.closest('tr');

            Swal.fire({
                title: "Are you sure?",
                text: "This user will be permanently deleted!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#6c757d",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {

                if (!result.isConfirmed) return;

                const url = `/delete_user/${controlId}`;

                // ✅ lock button
                btn.style.pointerEvents = "none";
                btn.style.opacity = "0.6";

                fetch(url, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document
                                .querySelector('meta[name="csrf-token"]')
                                .getAttribute('content')
                        }
                    })
                    .then(res => res.json())
                    .then(data => {

                        if (data.success) {

                            // ✅ smooth remove animation
                            if (row) {
                                row.style.transition = "all 0.3s ease";
                                row.style.opacity = "0";
                                row.style.transform = "translateX(-20px)";

                                setTimeout(() => row.remove(), 300);
                            }

                        } else {
                            showError(data.message);
                        }

                    })
                    .catch(() => {
                        showError('Server error occurred');
                    })
                    .finally(() => {
                        btn.style.pointerEvents = "auto";
                        btn.style.opacity = "1";
                    });

            });
        }




        // document.getElementById('updateUserForm').addEventListener('submit', async function(event) {
        //     event.preventDefault();

        //     const form = event.target;
        //     const controlUser = document.getElementById('control_user').value;

        //     const payload = {
        //         first_name: first_name.value.trim(),
        //         last_name: last_name.value.trim(),
        //         username: first_name.value.trim() + ' ' + last_name.value.trim(),
        //         gender: gender.value,
        //         tel_num: tel_num.value,
        //         known_from: known_from.value
        //     };

        //     const submitBtn = form.querySelector('button[type="submit"]');

        //     // 🔥 Smooth loading state
        //     submitBtn.disabled = true;
        //     submitBtn.innerHTML = `<span class="spinner-border spinner-border-sm"></span> Updating...`;

        //     try {
        //         const res = await fetch(`/update_user/${controlUser}`, {
        //             method: 'POST',
        //             headers: {
        //                 'Content-Type': 'application/json',
        //                 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
        //                     'content')
        //             },
        //             body: JSON.stringify(payload)
        //         });

        //         const data = await res.json();

        //         // restore button
        //         submitBtn.disabled = false;
        //         submitBtn.innerHTML = 'Submit';

        //         if (data.success) {

        //             // ✅ Smooth success popup
        //             Swal.fire({
        //                 icon: 'success',
        //                 title: 'Updated!',
        //                 text: 'User updated successfully',
        //                 timer: 1500,
        //                 showConfirmButton: false
        //             });

        //             // ✅ Smooth highlight effect
        //             form.classList.add('border-success');
        //             setTimeout(() => form.classList.remove('border-success'), 1500);

        //         } else {
        //             throw new Error(data.message);
        //         }

        //     } catch (err) {

        //         submitBtn.disabled = false;
        //         submitBtn.innerHTML = 'Submit';

        //         Swal.fire({
        //             icon: 'error',
        //             title: 'Oops...',
        //             text: err.message || 'Something went wrong'
        //         });
        //     }
        // });




        document.getElementById('updateUserForm').addEventListener('submit', async function(event) {
            event.preventDefault();

            const form = event.target;
            const controlUser = document.getElementById('control_user').value;

            const payload = {
                first_name: document.getElementById('first_name').value.trim(),
                last_name: document.getElementById('last_name').value.trim(),
                username: document.getElementById('first_name').value.trim() + ' ' + document.getElementById('last_name').value.trim(),
                gender: document.getElementById('gender').value,
                tel_num: document.getElementById('tel_num').value,
                known_from: document.getElementById('known_from').value
            };

            const submitBtn = form.querySelector('button[type="submit"]');
            submitBtn.disabled = true;
            submitBtn.innerHTML = `<span class="spinner-border spinner-border-sm"></span> Updating...`;

            try {
                // 1️⃣ Update user info
                const res = await fetch(`update_user/${controlUser}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content')
                    },
                    body: JSON.stringify(payload)
                });
                const data = await res.json();
                if (!res.ok || !data.success) throw new Error(data.message || 'Failed to update user info');

                // 2️⃣ Update image if FilePond has a file
                const pond = FilePond.find(document.querySelector('.image-preview-filepond'));
                if (pond && pond.getFiles().length > 0) {
                    const file = pond.getFiles()[0].file;

                    const imageForm = new FormData();
                    imageForm.append('image', file); // MUST match Laravel validation name 'image'

                    const imageRes = await fetch(`update_image/${controlUser}`, {
                        method: 'POST',
                        body: imageForm, // do NOT set Content-Type manually
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                .getAttribute('content')
                            
                        }
                    });

                    const imageData = await imageRes.json();
                    if (!imageRes.ok || !imageData.success) throw new Error(imageData.message ||
                        'Failed to update image');
                }

                Swal.fire({
                    icon: 'success',
                    title: 'Updated!',
                    text: 'User info and image updated successfully',
                    timer: 1500,
                    showConfirmButton: false
                });

                form.classList.add('border-success');
                setTimeout(() => form.classList.remove('border-success'), 1500);

            } catch (err) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: err.message || 'Something went wrong'
                });
            } finally {
                submitBtn.disabled = false;
                submitBtn.innerHTML = 'Submit';
            }
        });
    </script>
@endsection