@extends('layouts.admin.master')

@section('title')
    User List
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="card dashboard-custom-card">
                    <div class="card-body">
                        <div class="custom-card-header d-flex justify-content-between align-items-center">
                            <div>
                                <h4 class="h4 mb-1">Member List</h4>
                                <p class="text-muted">Manage all user from here.</p>
                            </div>
                            <div>
                                <button id="listViewBtn" class="btn btn-primary btn-sm me-2 active">List View</button>
                                <button id="gridViewBtn" class="btn btn-primary btn-sm">Grid View</button>
                                {{-- @can('create_member') --}}
                                {{-- <a href="{{ route('admin.assoc-members.profile') }}" class="add-btn ms-2"> --}}
                                {{--     <i class="fa fa-plus-circle"></i> ADD NEW --}}
                                {{-- </a> --}}
                                {{-- @endcan --}}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- List View (DataTable) -->
                <div class="card dashboard-custom-card card-custom view" id="list-view">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table datatable custom-table dt-responsive nowrap" style="width:100%">
                                <thead>
                                <tr>
                                    <th class="fs-5">SL#</th>
                                    <th class="fs-5">Name</th>
                                    <th class="fs-5">Email</th>
                                    <th class="fs-5">Mobile</th>
                                    <th class="fs-5">Member Category</th>
                                    <th class="fs-5">Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Grid View -->
                <div class="card dashboard-custom-card card-custom view" id="grid-view" style="display: none;">
                    <div class="card-body">
                        <!-- Search Bar -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <input type="text" id="gridSearch" class="form-control"
                                       placeholder="Search by name, email, mobile.">
                            </div>
                        </div>
                        <!-- Grid Content -->
                        <div class="row" id="grid-container"></div>
                        <!-- Pagination -->
                        <div class="row mt-3">
                            <div class="col">
                                <nav aria-label="Grid Pagination">
                                    <ul class="pagination justify-content-center" id="grid-pagination"></ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('utils.edit-member-modal')
    @include('utils.delete-confirm-modal')
@endsection

@push('css')
    <style>
        .st-cmp-settings {
            display: none;
        }
        .btn.active {
            background-color: #007bff !important;
            color: white !important;
            border-color: #007bff !important;
        }
        .btn {
            transition: background-color 0.3s ease !important;
            transition: color 0.3s ease !important;
        }
        .card {
            padding: 0px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease;
            transition: box-shadow 0.2s ease;
            background-color: #fff;
            overflow: hidden;
        }
        .card-body {
            padding: 20px;
        }
        .card-body p {
            margin-bottom: 0.75rem;
            color: #555;
            font-size: 0.95rem;
        }
        .card-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 1.25rem;
            text-transform: capitalize;
        }
        .btn-action img {
            width: 30px;
            height: 30px;
        }
        #gridSearch {
            max-width: 300px;
            border-radius: 20px;
            border: 1px solid #ccc;
            padding: 8px 15px;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
            transition: border-color 0.3s ease;
        }
        #gridSearch:focus {
            border-color: #007bff;
            outline: none;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
        }
        .pagination .page-link {
            border-radius: 5px;
            color: #007bff;
            margin: 0 2px;
            transition: background-color 0.3s ease;
        }
        .pagination .page-item.active .page-link {
            background-color: #007bff;
            border-color: #007bff;
            color: white;
        }
        .pagination .page-item.disabled .page-link {
            color: #aaa;
        }
        .pagination .page-link:hover:not(.disabled) {
            background-color: #f0f0f0;
        }
        .text-muted{
            font-size: 14px;
        }
        @media (max-width: 768px) {
            .card-body {
                padding: 15px;
            }
            .card-title {
                font-size: 1.1rem;
            }
            .card-body p {
                font-size: 0.9rem;
            }
            #gridSearch {
                max-width: 100%;
            }
        }
    </style>
@endpush

@push('js')
    <script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=67cfd3c3069b9100198cf9f6&product=inline-share-buttons&source=platform" async="async"></script>
    <script>
        $('#loadUsersBtn').on('click', function () {
            $.ajax({
                url: "/ajax/users",
                method: "GET",
                success: function (users) {

                    $("#usersContainer").html(""); // Clear container

                    users.forEach(function (user) {

                        let bloodGroup = user.personal_information?.blood_group_label ?? '';
                        let facultyName = user.personal_information?.faculty?.name ?? '';
                        let company = user.personal_information?.company ?? '';
                        let job_title = user.personal_information?.job_title ?? '';

                        let avatar = '';
                        if (user.user_photo) {
                            avatar = `<img src="${user.user_photo}" class="img-fluid" style="width:100%;height:100%;object-fit:cover;">`;
                        } else {
                            avatar = `<span class="text-secondary h4 mb-0">${user.name ? user.name.charAt(0).toUpperCase() : 'N'}</span>`;
                        }

                        let html = `
                        <div class="card bg-white p-0 mt-3" style="border:2px solid green;border-radius:25px;">
                            <div class="card-body">
                                <div class="row">

                                    <div class="col-5 pr-0">
                                        <div class="d-flex align-items-center justify-content-center rounded-circle bg-light overflow-hidden"
                                             style="width:100px;height:100px;color:rgba(166,161,161,0.8);box-shadow:0 0 7px 1px;">
                                             ${avatar}
                                        </div>
                                    </div>

                                    <div class="col-7 p-0">
                                        <p class="text-muted mb-1 font-weight-bold" style="font-size:20px!important;">${user.name ?? ''}</p>
                                        <p class="text-muted mb-1" style="font-size:16px!important;"><i class="fas fa-phone-alt"></i> ${user.phone ?? ''}</p>
                                        <p class="text-muted mb-1" style="font-size:16px!important;"><i class="fas fa-envelope"></i> ${user.email ?? ''}</p>
                                        <p class="text-muted mb-1" style="font-size:16px!important;"><i class="far fa-address-card"></i> ${user.studentID ?? ''}</p>
                                    </div>

                                    <div class="col-12 my-1"></div>

                                    <div class="col-5 pr-0">
                                        <p><i class="fas fa-tint text-danger"></i> ${bloodGroup}</p>
                                        <p><i class="fas fa-graduation-cap"></i> ${facultyName}</p>
                                    </div>

                                    <div class="col-7 p-0">
                                        <p><i class="fas fa-building"></i> ${company}</p>
                                        <p><i class="fas fa-suitcase"></i> ${job_title}</p>
                                    </div>

                                    <div class="col-12 mt-2">
                                        <hr>
                                        <div class="row mt-3 py-0">
                                            <div class="col-2">
                                                <a href="#" class="btn btn-sm btn-light" style="border:2px solid #a6a4a4;border-radius:10px;">
                                                    <i class="fab fa-linkedin-in"></i>
                                                </a>
                                            </div>
                                            <div class="col-2">
                                                <a href="#" class="btn btn-sm btn-light" style="border:2px solid #a6a4a4;border-radius:10px;">
                                                    <i class="fab fa-facebook-f"></i>
                                                </a>
                                            </div>
                                            <div class="col-2">
                                                <a href="#" class="btn btn-sm btn-light" style="border:2px solid #a6a4a4;border-radius:10px;">
                                                    <i class="fab fa-twitter"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    `;

                        $("#usersContainer").append(html);
                    });
                }
            });
        });
    </script>


    <script>
        $(document).ready(function () {
            // Handle Edit button click
            $(document).on('click', '.edit-member-btn', function () {
                const userId = $(this).data('user-id');
                $.ajax({
                    url: "{{ request()->getSchemeAndHttpHost() }}/assoc-members/profile/" + userId,
                    method: 'GET',
                    success: function (response) {
                        $('#editMemberModalBody').html(response);
                        $('#editMemberModal').modal('show');
                    },
                    error: function (xhr) {
                        alert('Failed to load member data.');
                    }
                });
            });

            // Handle Show button click (read-only mode, no redirect)
            $(document).on('click', '.show-member-btn', function () {
                const userId = $(this).data('user-id');
                $.ajax({
                    url: "{{ request()->getSchemeAndHttpHost() }}/assoc-members/profile/" + userId + "?mode=show",
                    method: 'GET',
                    success: function (response) {
                        $('#editMemberModalBody').html(response);
                        $('#editMemberModal').modal('show');
                        $('#editMemberModalBody').find('input, select, textarea, button[type="submit"]').prop('disabled', true);
                        $('#editMemberModalBody').find('button[type="submit"]').hide();
                        $('#editMemberModalBody').find('button[type="button"]').hide();
                    },
                    error: function (xhr) {
                        alert('Failed to load member details.');
                    }
                });
            });

            // Refresh page when modal is closed
            $('#editMemberModal').on('hidden.bs.modal', function () {
                location.reload();
            });

            // DataTable
            const dataTable = $('.datatable').DataTable({
                order: [[0, 'desc']],
                processing: true,
                serverSide: true,
                lengthMenu: [[10, 20, 50, 100, 200, 500, -1], [10, 20, 50, 100, 200, 500, "All"]],
                pageLength: 10,
                ajax: {
                    url: "{{ route('association-members.datatable') }}",
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: function (d) {
                        d.view_type = 'list';
                    }
                },
                dom: "<'row'<'col-md-3 d-flex align-items-center'l><'col-md-3 d-flex align-items-center'f><'col-md-6 d-flex justify-content-end'B>>" +
                    "<'row'<'col-md-12'tr>>" +
                    "<'row'<'col-md-6'i><'col-md-6'p>>",
                buttons: [
                    {
                        extend: 'excelHtml5',
                        text: '<img src="/frontend/logo/download-cloud-02.png" alt="Export Excel" width="24" height="24"> Export as Excel',
                        className: 'btn btn-success btn-sm ms-2',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4],
                            modifier: {
                                page: 'all',
                                search: 'applied',
                                order: 'applied'
                            }
                        },
                        action: function (e, dt, button, config) {
                            var self = this;
                            var oldLength = dt.page.len();

                            // Set page length to all
                            dt.page.len(-1).draw();

                            // Wait for draw to complete then export
                            setTimeout(function () {
                                $.fn.dataTable.ext.buttons.excelHtml5.action.call(self, e, dt, button, config);
                                // Restore original page length
                                dt.page.len(oldLength).draw();
                            }, 100);
                        }
                    },
                    {
                        text: '<img src="/frontend/logo/sliders-02.png" alt="Filter" width="24" height="24"> Filter',
                        className: 'btn btn-light btn-sm border'
                    }
                ],
                columns: [
                    {
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    { data: "full_name_english", name: "personal_informations.full_name_english" },
                    { data: "email", name: "email" },
                    { data: "phone", name: "phone" },
                    { data: "member_category", name: "member_category" },
                    {
                        data: "action",
                        name: "action",
                        orderable: false,
                        searchable: false,
                        render: function (data) {
                            return `<div class="text-end">${data}</div>`;
                        }
                    }
                ]
            });

            // Grid View Logic
            let currentPage = 1;
            let perPage = 9;
            let searchQuery = '';

            function loadGridData(page = 1) {
                currentPage = page;
                $.ajax({
                    url: "{{ route('association-members.datatable') }}",
                    type: "POST",
                    data: {
                        view_type: 'grid',
                        page: currentPage,
                        per_page: perPage,
                        search: searchQuery,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function () {
                        $('#grid-container').html('<p class="text-center">Loading...</p>');
                    },
                    success: function (response) {
                        let gridHtml = '';
                        if (response.data && response.data.length > 0) {
                            response.data.forEach(function (user) {
                                gridHtml += `
                                    <div class="col-md-6 col-sm-12 mb-3">
                                        <!--<div class="card bg-white p-0" style="border: 2px solid green; border-radius: 25px;">-->
                                        <div class="card bg-white p-0 d-flex flex-column h-100"
                                             style="border: 2px solid green; border-radius: 25px; height: 100%;">
                                            <div class="card-body d-flex flex-column h-100">
                                                <div class="row">

                                                    <!-- Avatar -->
                                                    <div class="col-5 pr-0">
                                                        <div class="d-flex align-items-center justify-content-center rounded-circle bg-light overflow-hidden"
                                                             style="width: 100px; height: 100px; color: rgba(166,161,161,0.8); box-shadow: 0 0 7px 1px; background: linear-gradient(125deg, #435a85, transparent);">
                                                            ${
                                    user.user_photo
                                        ? `<img src="${user.user_photo}" alt="User Photo" class="img-fluid" style="width: 100%; height: 100%; object-fit: cover;">`
                                        : `<span class="text-secondary h4 mb-0">${(user.name ?? 'N').split(' ').filter(w => w).slice(0, 2).map(w => w[0]).join('').toUpperCase()}</span>`
                                }
                                                        </div>
                                                    </div>

                                                    <!-- User Info -->
                                                    <div class="col-7 p-0">
                                                        ${user.name ? `<p class="text-muted text-truncate mb-1 font-weight-bold" style="font-size: 20px!important;" title="${user.name ?? ''}">${user.name}</p>` : ''}

                                                        ${user.phone ? `
                                                            <p class="text-muted mb-1 text-truncate" style="font-size: 16px!important;" title="${user.phone ?? ''}">
                                                                <i class="fas fa-phone-alt"></i> ${user.phone}
                                                            </p>` : ''}

                                                        ${user.email ? `
                                                            <p class="text-muted mb-1 text-truncate" style="font-size: 16px!important;" title="${user.email ?? ''}">
                                                                <i class="fas fa-envelope"></i> ${user.email}
                                                            </p>` : ''}

                                                        ${user.studentID ? `
                                                            <p class="text-muted mb-1 text-truncate" style="font-size: 16px!important;" title="${user.studentID ?? ''}">
                                                                <i class="far fa-address-card"></i> ${user.studentID}
                                                            </p>` : ''}
                                                    </div>

                                                    <div class="col-12 my-1"></div>

                                                    <!-- Blood Group + Faculty -->
                                                    <div class="col-5 pr-0">
                                                        <p class="text-black" style="font-size: 16px!important;">
                                                            <i class="fas fa-tint text-danger"></i>
                                                            ${user.blood_group_label ?? ''}
                                                        </p>

                                                        <p class="text-black text-truncate" style="font-size: 16px!important;" title="${user.faculty_name ?? ''}">
                                                            <i class="fas fa-graduation-cap"></i>
                                                            ${user.faculty_name ?? ''}
                                                        </p>
                                                    </div>

                                                    <!-- Company + Job Title -->
                                                    <div class="col-7 p-0">
                                                        <p class="text-muted text-truncate text-black" style="font-size: 16px!important;" title="${user.company ?? ''}">
                                                            <i class="fas fa-building"></i>
                                                            ${user.company ?? ''}
                                                        </p>

                                                        <p class="text-muted text-truncate text-black" style="font-size: 16px!important;" title="${user.job_title ?? ''}">
                                                            <i class="fas fa-suitcase"></i>
                                                            ${user.job_title ?? ''}
                                                        </p>
                                                    </div>

                                                    <div class="col-12 mt-2">
                                                        <hr style="border: 1px solid #a6a4a4;">

                                                        <div class="row mt-3 py-0">
                                                            <div class="col-6 row">
                                                                <div class="col-3">
                                                                    <a href="#" class="btn btn-sm btn-light text-success rounded"
                                                                       style="border: 2px solid #a6a4a4; border-radius: 10px;">
                                                                        <i class="fab fa-linkedin-in" style="padding: 5px; font-size: 16px; color: #0f172a"></i>
                                                                    </a>
                                                                </div>

                                                                <div class="col-3">
                                                                    <a href="#" class="btn btn-sm btn-light text-success rounded"
                                                                       style="border: 2px solid #a6a4a4; border-radius: 10px;">
                                                                        <i class="fab fa-facebook-f" style="padding: 5px; font-size: 16px; color: #0f172a"></i>
                                                                    </a>
                                                                </div>

                                                                <div class="col-3">
                                                                    <a href="#" class="btn btn-sm btn-light text-success rounded"
                                                                       style="border: 2px solid #a6a4a4; border-radius: 10px;">
                                                                        <i class="fab fa-twitter" style="padding: 5px; font-size: 16px; color: #0f172a"></i>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                            <div class="col-6 row">
                                                                <div class="col-6">&nbsp;</div>

                                                                <div class="col-3">
                                                                    <button type="button" class="btn btn-sm btn-light text-success rounded show-member-btn" data-user-id="${user.id ?? ''}"
                                                                       style="border: 2px solid #a6a4a4; border-radius: 10px;">
                                                                        <i class="fas fa-eye" style="padding: 5px; font-size: 16px; color: #0f172a"></i>
                                                                    </button>
                                                                </div>

                                                                <div class="col-3">
                                                                    <button type="button"  class="btn btn-sm btn-light text-success rounded edit-member-btn" data-user-id="${user.id ?? ''}"
                                                                       style="border: 2px solid #a6a4a4; border-radius: 10px;">
                                                                        <i class="fas fa-edit" style="padding: 5px; font-size: 16px; color: #0f172a"></i>
                                                                    </button>
                                                                </div>
                                                            </div>


                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    `;



                                /*gridHtml += `
                                <div class="col-md-4 mb-3">
                                    <div class="card border-primary border-3" style="max-height: 300px; overflow-y: auto;">
                                        <div class="card-body">
                                            <div class="d-flex">
                                                <div class="d-flex align-items-center mb-3 w-100">
                                                    <div class="me-3 flex-shrink-0">
                                                        ${user.image ? `<img src="storage/${user.image}" class="rounded-circle" width="100" height="100" alt="${user.name}">` :
                                                                `<div class="rounded-circle bg-light d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                                                                <span class="text-secondary fs-4">${user.name?.charAt(0) || 'U'}</span>
                                                            </div>`}
                                                    </div>
                                                    <div class="flex-grow-1 min-w-0" style="padding-left: 8px">
                                                        <h5 class="text-muted text-truncate">${user.name}</h5>
                                                        <div class="text-muted text-truncate">${user.phone}</div>
                                                        <div class="text-muted text-truncate">${user.email}</div>
                                                        <div class="text-muted text-truncate">${user.blood_group}</div>
                                                        <div class="text-muted text-truncate">${user.designation}</div>
                                                        <div class="text-muted text-truncate">${user.company}</div>
                                                        <div class="text-muted text-truncate">${user.position}</div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="d-flex justify-content-around mt-3">

                                            <div class="d-flex justify-content-between mt-3">
                                            <div class="text-center px-2">
                                                <a href="tel:${user.phone}" class="btn btn-sm rounded-circle btn-light text-success">
                                                    <i class="fas fa-phone"></i>
                                                </a>
                                                <div class="small mt-1 text-success">Call</div>
                                            </div>
                                            <div class="text-center px-2">
                                                <a href="sms:${user.phone}&body=message" class="text-success text-decoration-none">
                                                    <button class="btn btn-sm rounded-circle btn-light text-success">
                                                        <i class="fas fa-comment"></i>
                                                    </button>
                                                    <div class="small mt-1 text-success">Message</div>
                                                </a>
                                            </div>
                                            <div class="text-center px-2">
                                                <a href="mailto:${user.email}" class="text-success text-decoration-none">
                                                    <button class="btn btn-sm rounded-circle btn-light text-success">
                                                        <i class="fas fa-envelope"></i>
                                                    </button>
                                                    <div class="small mt-1 text-success">Email</div>
                                                </a>
                                            </div>
                                            ${user.action}
                                    </div>
                                </div>
                            </div>
                        </div>
                     </div>
                    `;*/
                            });
                        } else {
                            gridHtml = '<p class="text-center">No data available.</p>';
                        }
                        $('#grid-container').html(gridHtml);
                        renderPagination(response);
                    },
                    error: function (xhr) {
                        $('#grid-container').html('<p class="text-center text-danger">Error loading data.</p>');
                    }
                });
            }

            function renderPagination(response) {
                let currentPage = response.current_page;
                let lastPage = response.last_page;
                let paginationHtml = '';

                // Previous Button
                paginationHtml += `
                    <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                        <a class="page-link" href="#" data-page="${currentPage - 1}">
                            &laquo; Previous
                        </a>
                    </li>
                `;

                // First Page Link
                if (currentPage > 3) {
                    paginationHtml += `
                        <li class="page-item">
                            <a class="page-link" href="#" data-page="1">1</a>
                        </li>
                    `;

                    if (currentPage > 4) {
                        paginationHtml += `
                            <li class="page-item disabled">
                                <span class="page-link">...</span>
                            </li>
                        `;
                    }
                }

                // Middle Pages
                let startPage = Math.max(1, currentPage - 2);
                let endPage = Math.min(lastPage, currentPage + 2);

                for (let i = startPage; i <= endPage; i++) {
                    paginationHtml += `
                        <li class="page-item ${currentPage === i ? 'active' : ''}">
                            <a class="page-link" href="#" data-page="${i}">${i}</a>
                        </li>
                    `;
                }

                // Last Page Link
                if (currentPage < lastPage - 2) {
                    if (currentPage < lastPage - 3) {
                        paginationHtml += `
                            <li class="page-item disabled">
                                <span class="page-link">...</span>
                            </li>
                        `;
                    }

                    paginationHtml += `
                        <li class="page-item">
                            <a class="page-link" href="#" data-page="${lastPage}">${lastPage}</a>
                        </li>
                    `;
                }

                // Next Button
                paginationHtml += `
                    <li class="page-item ${currentPage === lastPage ? 'disabled' : ''}">
                        <a class="page-link" href="#" data-page="${currentPage + 1}">
                            Next &raquo;
                        </a>
                    </li>
                `;

                $('#grid-pagination').html(paginationHtml);
            }


            $(document).on('click', '#grid-pagination .page-link', function (e) {
                e.preventDefault();
                const page = $(this).data('page');
                if (page && !$(this).parent().hasClass('disabled')) {
                    loadGridData(page);
                }
            });

            let searchTimeout;
            $('#gridSearch').on('input', function () {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(() => {
                    searchQuery = $(this).val().trim();
                    loadGridData(1);
                }, 500);
            });

            $('#listViewBtn').click(function () {
                $('#list-view').show();
                $('#grid-view').hide();
                $(this).addClass('active');
                $('#gridViewBtn').removeClass('active');
                dataTable.ajax.reload();
            });

            $('#gridViewBtn').click(function () {
                $('#grid-view').show();
                $('#list-view').hide();
                $(this).addClass('active');
                $('#listViewBtn').removeClass('active');
                loadGridData();
            });
        });
    </script>
@endpush