@extends('layouts/contentLayoutMaster')

@section('title', 'User')

@section('vendor-style')
<link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
@endsection

@section('page-style')
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#Add-New-User">Add New User</button>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-1">
                <select name="per_page" id="per-page" class="form-control" onchange="getUserList('{{ $token }}', 1, this.value, '{{ $user }}')">
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="250">250</option>
                    <option value="500">500</option>
                </select>
            </div>
            <div class="col-md-3">
                <input type="text" id="user" class="form-control" onkeyup="getUserList('{{ $token }}', 1, 25, '{{ $user }}')" placeholder="Search User">
            </div>
            <div class="col-md-3">
                <input type="date" id="start_date" class="form-control" placeholder="Start Date">
            </div>
            <div class="col-md-3">
                <input type="date" id="end_date" class="form-control" placeholder="End Date">
            </div>
            <div class="col-md-2">
                <button class="btn btn-primary" onclick="getUserList('{{ $token }}', 1, 25, '{{ $user }}')">Filter</button>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Sr No.</th>
                            <th>Type</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Contact Number</th>
                            @if (str_contains($user, 'BRANCH_'))
                            <th>Branch</th>
                            @endif
                            <th>Role</th>
                            <th>Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="userlist"></tbody>
                </table>
            </div>
            <div id="pagination-links"></div>
        </div>
        <div id="totalofrecord"></div>
    </div>
</div>

<!-- Add New User Modal -->
<div class="modal fade text-start" id="Add-New-User" tabindex="-1" aria-labelledby="myModalLabel17" aria-hidden="true">
    <!-- Modal Content Here -->
</div>

<!-- Edit User Modal -->
<div class="modal fade text-start" id="edit-user-detail" tabindex="-1" aria-labelledby="myModalLabel17" aria-hidden="true">
    <!-- Modal Content Here -->
</div>
@endsection

@section('vendor-script')
<script src="{{ asset(mix('vendors/js/extensions/toastr.min.js')) }}"></script>
@endsection

@section('page-script')
<script>
    document.addEventListener("DOMContentLoaded", function () {
        let startDate = document.getElementById("start_date");
        let endDate = document.getElementById("end_date");

        // Set today's date as default
        let today = new Date().toISOString().split('T')[0];
        startDate.value = today;
        endDate.value = today;

        // Trigger getUserList on date change
        startDate.addEventListener("change", function () {
            getUserList('{{ $token }}', 1, 25, '{{ $user }}');
        });

        endDate.addEventListener("change", function () {
            getUserList('{{ $token }}', 1, 25, '{{ $user }}');
        });
    });

    function getUserList(token, page_no, per_page, user) {
        try {
            var name = $('#user').val();
            var start_date = $('#start_date').val();
            var end_date = $('#end_date').val();

            $.ajax({
                url: "/api/user/getRoleWiseUser",
                type: "get",
                dataType: "json",
                headers: {
                    Authorization: "Bearer " + token,
                },
                data: {
                    page: page_no,
                    per_page: per_page,
                    role: user,
                    name: name,
                    start_date: start_date,
                    end_date: end_date
                },
                success: function (response) {
                    console.log("API Response:", response);

                    $("#pagination-links").empty();
                    $('#userlist').empty();
                    var i = 0;

                    response.data.forEach(response_data => {
                        i++;
                        var list = '<tr id="' + response_data.id + '">';
                        list += '<td>' + i + '</td>';
                        list += '<td>' + response_data.metal_type + '</td>';
                        list += '<td>' + response_data.name + (response_data.short_code ? ' - ' + response_data.short_code : '') + '</td>';
                        list += '<td>' + response_data.email + '</td>';
                        list += '<td>' + response_data.contact_number + '</td>';
                        if (response_data.city) {
                            list += '<td>' + response_data.city + '</td>';
                        }
                        list += '<td>' + response_data.role + '</td>';
                        let createdDate = response_data.created_at.split(' ')[0]; // YYYY-MM-DD
                        let formattedDate = createdDate.split('-').reverse().join('-'); // DD-MM-YYYY
                        list += '<td>' + formattedDate + '</td>';
                        list += '<td><button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#edit-user-detail" id="edit_' + response_data.id + '" onclick="userDetail(\'' + token + '\',' + response_data.id + ')">Edit</button></td>';
                        list += '</tr>';

                        $('#userlist').append(list);
                    });

                    response.links.forEach(element => {
                        let url_page_no = 1;
                        if (element.url != null) {
                            url_page_no = element.url.split('?')[1].split('=')[1];
                        }
                        $("#pagination-links").append('<button onclick="getUserList(\'' + token + '\', ' + url_page_no + ', ' + per_page + ', \'' + user + '\')" class="btn btn-dark">' + element.label + '</button>');
                    });

                    $('#totalofrecord').text('Total No. of Records = ' + response.total);
                },
            });
        } catch (e) {
            console.log(e);
        }
    }

    function userDetail(token, id) {
try {
$.ajax({
url: "/api/gold-management/user/userDetail",
type: "get",
dataType: 'json',
headers: {
'Authorization': 'Bearer ' + token
},
data: {
'id': id
},
success: function(response) {
//console.log(response);
//if(response.status === 'true'){
$('#edit-user-detail #id').val(response.id);
$('#edit-user-detail #name').val(response.name);
$('#edit-user-detail #short_code').val(response.short_code);
$('#edit-user-detail #email').val(response.email);
$('#edit-user-detail #password').val(response.password);
$('#edit-user-detail #contact_number').val(response.contact_number);
/*}else{

}*/
}
});
} catch (e) {
console.log(e);
}
    }

    function editUsers(token) {
try {
//console.log('reached here');
var formData = new FormData(document.getElementById("edit-user"));
$.ajax({
url: "/api/gold-management/user/edit",
type: "post",
dataType: 'json',
headers: {
'Authorization': 'Bearer ' + token
},
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function(response) {
console.log(response);
//alert(response);
if (response.status == true) {
$('#edit-user-detail').modal('hide');
setTimeout(function() {
toastr["success"](
"",
response.msg, {
closeButton: false,
tapToDismiss: false,
rtl: "rtl",
}
);
}, 2000);
$('#edit-user')[0].reset();

location.reload();
} else {
setTimeout(function() {
toastr["success"](
"",
response.msg, {
closeButton: false,
tapToDismiss: false,
rtl: "rtl",
}
);
}, 2000);
}

},
fail: function(response) {
console.log('in failure');
},
});
} catch (e) {
console.log(e);
}

}

    function deleteUser(token, id) {
        try {
            alert('Are You Sure Want To Delete this User');
            $.ajax({
                url: "/api/gold-management/user/deleteUser",
                type: "get",
                dataType: 'json',
                headers: {
                    'Authorization': 'Bearer ' + token
                },
                data: {
                    'id': id
                },
                success: function (response) {
                    if (response.status == true) {
                        location.reload();
                    } else {
                        setTimeout(function () {
                            toastr["error"](
                                "",
                                response.msg, {
                                closeButton: false,
                                tapToDismiss: false,
                                rtl: "rtl",
                            }
                            );
                        }, 2000);
                    }
                },
                fail: function (response) {
                    console.log('in failure');
                },
            });
        } catch (e) {
            console.log(e);
        }

    }
</script>
@endsection