@extends('layouts.cs.main')

@section('home', 'active')

@section('main-content')
    <style>
        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(270px, 2fr));
            grid-gap: 10px;
        }

        @media (max-width: 767px) {
            .card-container {
                grid-template-columns: repeat(2, 1fr);
            }

            .card-image {
                max-height: 100px !important;
            }
        }
    </style>

    <div class="container container-fluid container-def p-3 mt-3">
        <div class="alert alert-primary alert-dismissible fade show" role="alert">
            <strong>Welcome, {{ Auth::user()->fname }}!</strong> 
            You are currently logged in {{ ucwords(strtolower($currentStore->description)) }}.
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="card-container">
            @foreach ($members as $member)
                <div class="card select-member" data-code="{{ $member->code }}" data-id="{{ $member->id }}">
                    <div class="card-body text-center">
                        <img class="img-fluid card-image" src="/assets/members/{{ $member->code }}.png" alt=""
                            style="max-width: 200px">
                        <div class="font-weight-bold mt-2">{{ $member->code }}</div>
                        <div class="text-muted">{{ $member->description }}</div>
                    </div>
                    <div class="card-footer"></div>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="select_member_modal" tabindex="-1" aria-labelledby="" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="form-group">
                        <input type="email" class="form-control" id="search_members_name" placeholder="Search Member">
                        <small id="search_result" class="form-text text-muted"></small>
                    </div>

                    <table class="table table-sm table-hover" id="member_names_table" style="width: 100%;height: 100%">
                        <thead style="display: none">
                            <tr>
                                <th></th>
                                <th></th>
                                <th>Name</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="modal-footer justify-content-start" style="background: #F7F7F7">
                    <button type="button" class="btn btn-light border  pl-4 pr-4 pt-3 pb-3" data-dismiss="modal">Close</button>
                    {{-- <button type="button" class="btn btn-primary">Save changes</button> --}}
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        let membersNameTable;
        let totalCount;
        let filterCount;
        let groupId;

        const selectMember = {
            init: function() {
                selectMember.events();
            },
            events: function() {
                $(".select-member").on('click', function(e) {
                    let selectedMemberId = $(this).attr('data-id');
                    // return alert(selectedMemberId)

                    const toggleMembersNameModal = function() {
                        $("#search_result").text(``)
                        $("#select_member_modal").modal('toggle');
                    }

                    selectMember.displayMembersName(selectedMemberId, toggleMembersNameModal);
                })

                $('#search_members_name').on('keyup', function() {
                    let inputMembersName = $(this).val();

                    membersNameTable.search(inputMembersName).draw();

                    var filterCount = membersNameTable.rows({
                        search: 'applied'
                    }).count();

                    filterCount = Math.min(filterCount, 5);

                    $("#search_result").text(`Showing ${filterCount} out of ${totalCount} Members`)
                });
            },
            displayMembersName: function(selectedMemberId, callback) {
                if (membersNameTable) {
                    membersNameTable.destroy();
                }

                membersNameTable = $('#member_names_table').DataTable({
                    ajax: `/cs/get-members-name?group_id=${selectedMemberId}`,
                    order: [
                        [0, 'asc']
                    ],
                    dom: 't',
                    pageLength: 5,
                    columns: [{
                            data: 'firstname',
                            name: 'firstname',
                            visible: false
                        },
                        {
                            data: 'lastname',
                            name: 'lastname',
                            visible: false
                        },
                        {
                            data: 'id',
                            name: 'id',
                            render: function(data, type, row) {
                                return `<div class="p-2">
                                        <span class="d-block">${row.firstname} ${row.middlename} ${row.lastname}</span>
                                        <small class="text-muted">${row.description}</small>
                                    </div>`;
                            },
                        }
                    ],
                    initComplete: function(settings, json) {
                        $("#datatable").wrap(
                            "<div style='overflow:auto; width:100%;position:relative;'></div>");
                        totalCount = membersNameTable.rows().count();
                    },
                    createdRow: function(row, data, dataIndex) {
                        $(row).on('click', function() {
                            let rowData = membersNameTable.row(this).data();
                            selectMember.createTransaction(rowData.id, rowData.member_type_id, selectedMemberId);
                            // alert('Clicked row data: ' + JSON.stringify(rowData));
                        });
                    },
                });

                if (typeof callback === 'function') {
                    callback();
                }
            },
            createTransaction: function(memberId, memberTypeId, $groupId) {
                //this module will allow to create transactions
                window.location.href =
                    `/cs/member-transaction-reference?member_id=${memberId}&member_type_id=${memberTypeId}&group_id=${$groupId}`;
            }
        }

        selectMember.init();
    </script>
@endsection