@extends('layouts.main')

@section('title', 'User List')

@section('content')
    <style>
        select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: white;
            padding-right: 30px !important;
            border: 1px solid #ccc;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='gray'><path d='M7 10l5 5 5-5z'/></svg>");
            background-position: right 10px center;
            background-repeat: no-repeat;
            background-size: 18px;
        }

        .custom-btn,
        .custome-btn {
            background: linear-gradient(to bottom, #799ddf, #5f8ada);
            color: #fff;
            border-radius: 15px;
            padding: 8px 16px;
            font-size: 14px;
            border: 1px solid;
        }

        .custome-btn:hover {
            background: white !important;
            color: #5f8ada !important;
            border: 1px solid #5f8ada !important;
        }

        .badge-pill {
            padding: 0.6em;
            border-radius: 10rem;
        }

        .badge-soft-dark {
            background-color: #92adff57;
            color: #003fffa8;
        }

        .badge-soft-primary {
            background-color: #ff5f0075;
            color: #FF6002;
        }

        .scrollable-table {
            max-height: 676px;
            overflow-y: auto;
            height: 570px;
        }

        .enquiry-btn,
        .enquiry-btn-index {
            cursor: pointer;
            font-size: 14px;
        }

        .nav {
            border-radius: 999px;
            border: 1px solid #999999;
        }

        .nav-link:hover,
        .nav-item .nav-link.active {
            background: linear-gradient(to bottom, #5f2b8b, #3b0f61) !important;
            color: #fff !important;
        }

        .custom-tab .nav-link {
            border-radius: 999px;
            font-weight: 500;
            padding: 7px 16px;
            color: #000;
            background-color: transparent;
            border: none;
        }

        .custom-tab .nav-link.active {
            background-color: #f0f7ff;
            border: 1px solid #f4effe;
            box-shadow: none;
        }

        .form-control,
        .custom-select {
            border-radius: 7px;
        }

        .form-control-sm {
            height: calc(1.3125rem + 0.2rem + 10px);
        }

        .form-check-input {
            width: 2.5em;
            height: 1.2em;
            cursor: pointer;
        }

        .card {
            border-radius: 15px;
        }

        .card-footer {
            border-radius: 15px;
        }

        @media (min-width: 992px) {
            .aiz-content-wrapper {
                padding-top: 67px;
            }
        }

        .aiz-main-content {
            background: #EDF0F4;
        }

        #datatable tr {
            vertical-align: middle;
        }

        #familyDetailModal tr {
            vertical-align: middle;
        }
    </style>

    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
        <div>
            <h2 class="mb-0 text-2xl font-bold">User Management</h2>
        </div>
        @if(Auth::user()->user_type == 0)
            <div>
                <a href="{{ route('user.create', 0) }}" class="custome-btn" target="_blank">
                    <i class="fa fa-plus mr-1"></i> Add User
                </a>
                <a href="{{ route('pdf.upload.form') }}" class="custome-btn ms-2" target="_blank">
                    <i class="fa fa-plus mr-1"></i> Upload PDF
                </a>
            </div>
        @endif
    </div>

    <div class="card">
        <div class="overflow-x-auto bg-white shadow-md rounded-lg">
            <div class="custom-table-container p-3">
                <table id="datatable" class="table table-striped dataTable no-footer dtr-inline" style="width:100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>ફોટો</th>
                            <th>નામ</th>
                            <th>ફોન</th>
                            <th>જોઈન ડેટ</th>
                            <th>લૉગિન</th>
                            <th>અન્ય</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="familyDetailModal" tabindex="-1" role="dialog" aria-labelledby="familyDetailModalLabel">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="main_member_name">Family Detail</h4>
                    <button type="button" class="custom-modal-class" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <input type="hidden" id="main_user_id" value="0">
                </div>
                <div class="modal-body">
                    <table id="userFamilyMemberTBL" class="table">
                        <thead>
                            <tr>
                                <th>ફોટો</th>
                                <th>નામ</th>
                                <th>ફોન</th>
                                <th>સબંધ</th>
                                <th>જન્મ તારીખ</th>
                                <th>લૉગિન</th>
                                <th>અન્ય</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">
        var userDelete = '{{ route('user.delete') }}';
        var userAjax = '{{ route('user.ajax') }}';
        var userLoginStatusUpdate = '{{ route('user.login.status.update') }}';
        var userFamilyMemeberList = '{{ route('user.family.member.list') }}';

        var csrfToken = $("[name=_token]").val();

        var table = $('#datatable').DataTable({
            "aoColumnDefs": [{
                "bSortable": false,
                "aTargets": [4]
            }],
            "order": [
                [0, 'desc']
            ],
            "processing": true,
            "serverSide": true,
            "pageLength": 10,
            "ajax": {
                "url": userAjax,
                "type": "POST",
                "data": {
                    "_token": csrfToken,
                }
            },
            "aoColumns": [{
                "mData": "id"
            },
            {
                "mData": "image"
            },
            {
                "mData": "name"
            },
            {
                "mData": "phone_no"
            },
            {
                "mData": "joined"
            },
            {
                "mData": "is_login"
            },
            {
                "mData": "action"
            },
            ]
        });

        function reloadTable() {
            table.ajax.reload(null, false);
        }

        function changeEntries(el) {
            let url = new URL(window.location.href);
            url.searchParams.set('entries', el.value);
            window.location.href = url.toString();
        }

        function deleteData(id, type = 'Parent') {
            Swal.fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: !0,
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "No, cancel!",
                confirmButtonClass: "btn btn-success mt-2",
                cancelButtonClass: "btn btn-danger ms-2 mt-2",
                loaderHtml: "<i class='bx bx-hourglass bx-spin font-size-16 align-middle me-2'></i> Loading",
                customClass: {
                    confirmButton: 'btn btn-primary btn-lg',
                    cancelButton: 'btn btn-danger btn-lg',
                    loader: 'custom-loader'
                },
                buttonsStyling: !1,
                preConfirm: function (n) {
                    return new Promise(function (t, e) {
                        Swal.showLoading()
                        $.ajax({
                            type: 'GET',
                            url: userDelete,
                            data: {
                                user_id: id,
                                type: type,
                            },
                            success: function (resultData) {
                                if (resultData['status'] == 1) {
                                    reloadTable();
                                    if(type == 'Child') {
                                        main_user_id = $('#main_user_id').val();
                                        viewFamilyDetail(main_user_id);
                                    }
                                    t()
                                }
                            }
                        });
                    })
                },
            }).then(function (t) {
                if (t.value === true) {
                    Swal.fire({
                        title: "Deleted!",
                        text: "Your record has been deleted.",
                        icon: "success"
                    });
                }
            });
        }

        function toggleLoginStatus(el) {
            const userId = el.dataset.id;
            const isChecked = el.checked ? 1 : 0;
            $.ajax({
                url: userLoginStatusUpdate, // Create this route in Laravel
                method: 'POST',
                data: {
                    "_token": csrfToken,
                    user_id: userId,
                    is_login: isChecked,
                },
                success: function (responseText) {
                    toastr["success"](responseText['msg']);
                },
                error: function () {
                    toastr["error"]('Something went wrong.');
                }
            });
        }

        function addSpaceInmobileNumber(mobileNumber) {
            let number = mobileNumber;
            if (number.length === 10) {
                let formatted = number.slice(0, 5) + ' ' + number.slice(5);
                return formatted;
            } else {
                return mobileNumber;
            }
        }

        function viewFamilyDetail(user_id) {
            $.ajax({
                url: userFamilyMemeberList,
                method: 'GET',
                data: {
                    user_id: user_id,
                },
                success: function (responseText) {
                    $('#main_user_id').val(user_id)
                    var user = responseText['data']['user'];
                    var FamilyMember = responseText['data']['familyMember'];
                    $('#main_member_name').text(user['surname'] + ' ' + user['name'] + ' ' + user['father_name']);
                    $('#userFamilyMemberTBL tbody').html("");
                    FamilyMember.forEach((value, index) => {
                        var checked = value['is_login'] == 1 ? 'checked' : '';
                        var append = '<tr>';
                        if(value['image'] != null) {
                            append += '<td><img src="/storage/' + value['image'] + '" style="width: 50px;" /></td>';
                        } else {
                            append += '<td>-</td>';
                        }
                        append += '<td>' + value['surname'] + ' ' + value['name'] + ' ' + value['father_name'] + '</td>';
                        append += '<td>' + addSpaceInmobileNumber(value['phoneno1']) + '</td>';
                        if(value['relation'] != null) {
                            append += '<td>' + value['relation'] + '</td>';
                        } else {
                            append += '<td>-</td>';
                        }
                        append += '<td>' + value['dob'] + '</td>';
                        append += '<td>';
                        append += '<div class="form-check form-switch d-inline me-2">';
                        append += '<input class="form-check-input m-0" type="checkbox" role="switch" id="isLoginSwitch_' + value['id'] + '" data-id="' + value['id'] + '" ' + checked + ' onchange="toggleLoginStatus(this)">';
                        append += '</div>';
                        append += '</td>';
                        append += '<td><a href="javascript:void(0)" class="btn btn-sm btn-danger text-white me-2" title="Delete" onclick="deleteData(' + value['id'] + ', \'Child\')"><i class="fa fa-trash"></i></a></td>';
                        append += '</tr>';

                        $('#userFamilyMemberTBL tbody').append(append);
                    });
                    $("#familyDetailModal").modal("show");
                },
                error: function () {
                    toastr["error"]('Something went wrong.');
                }
            });
        }
    </script>
@endsection