@extends('layouts.sa.main')

@section('users', 'active')

@section('main-content')
    <style>
        /* Responsive Button Container */
        @media (max-width: 576px) {
            .btn-container {
                flex-direction: column;
                align-items: flex-start;
            }

            .btn-container button {
                width: 100%;
                margin-bottom: 5px;
                margin-top: 10px;
            }
        }

        /* Table Styling */
        #datatable {
            border-collapse: separate;
            border-spacing: 0 10px;
        }

        #datatable.dataTable tbody tr {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .dataTables_wrapper .dataTables_paginate {
            float: left;
            text-align: left;
            margin-top: 15px !important;
        }

        /* Search Input Styling */
        #searchRecord {
            border-radius: 20px;
            background: #f1f3f5;
            padding: 20px;
            border: 1px solid #ced4da;
        }

        /* Button Styling */
        #handleRecordModal {
            padding: .5rem 1.5rem .5rem 1.5rem;
            display: flex;
            align-items: center;
            /* border-radius: 30px; */
        }

        #handleRecordModal ion-icon {
            margin-right: 8px;
        }

        /* Header Styling */
        .content-header h1 {
            font-size: 2rem;
            font-weight: 600;
            color: #333;
        }
    </style>

    <div class="content-wrapper mb-3">
        <div class="content-header p-3">
            <div class="container-fluid mt-2">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 mt-2">Users</h1>
                    </div>
                    <div class="col-sm-6 d-flex justify-content-end align-items-center btn-container">
                        <button class="btn btn-dark border text-white handleRecordModal" id="handleRecordModal">
                            <ion-icon name="add-outline"></ion-icon>
                            New Record
                        </button>

                    </div>
                </div>

                <input type="text" class="form-control w-100 mt-4 p-4" id="searchRecord"
                    placeholder="Search Filter, ex. Name, Email, Status, id, Role">

                <div class="mt-3">
                    <table class="table text-nowrap table-borderless" id="datatable" style="width: 100%">
                        <thead class="text-sm text-muted">
                            <tr>
                                <th scope="col">
                                    <ion-icon name="key-outline"></ion-icon> id
                                </th>
                                <th scope="col">First Name</th>
                                <th scope="col">Middle Name</th>
                                <th scope="col">Last Name</th>
                                <th scope="col">Email</th>
                                <th scope="col">Role</th>
                                <th scope="col">Status</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="createRecordModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header d-flex align-items-center pl-4 pr-4">
                    <h5 class="modal-title" id="">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-4">
                    <form id="form">
                        @csrf
                        <input type="text" class="form-control" name="id" hidden>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <span class="mb-1 d-block" for="">First Name</span>
                                <input type="text" class="form-control" name="fname">
                                <div class="invalid-feedback" id="fnameFeedback"></div>
                            </div>
                            <div class="form-group col-md-6">
                                <span class="mb-1 d-block" for="">Middle Name</span>
                                <input type="text" class="form-control" name="mname">
                                <div class="invalid-feedback" id="mnameFeedback"></div>
                            </div>
                            <div class="form-group col-md-6">
                                <span class="mb-1 d-block" for="">Last Name</span>
                                <input type="text" class="form-control" name="lname">
                                <div class="invalid-feedback" id="lnameFeedback"></div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <span class="mb-1 d-block" for="">ID Number</span>
                                <input type="text" class="form-control" name="emp_id">
                                <div class="invalid-feedback" id="emp_idFeedback"></div>
                            </div>
                            <div class="form-group col-md-6">
                                <span class="mb-1 d-block" for="">Email</span>
                                <input type="email" class="form-control" name="email">
                                <div class="invalid-feedback" id="emailFeedback"></div>
                            </div>
                            <div class="form-group col-md-6">
                                <span class="mb-1 d-block" for="">Account Access</span>
                                <select class="custom-select my-1 mr-sm-2" id="selectRole" name="role">
                                </select>
                                <div class="invalid-feedback" id="roleFeedback"></div>
                            </div>
                            <div class="form-group col-md-6">
                                <span class="mb-1 d-block" for="">Account Access</span>
                                <select class="custom-select my-1 mr-sm-2" name="is_active">
                                    <option value="1">Active</option>
                                    <option value="2">Locked</option>
                                </select>
                                <div class="invalid-feedback" id="is_activeFeedback"></div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer pl-4 pr-4 justify-content-between">
                    <button type="button" class="btn btn-light border" id="handleDeleteRecord">Delete</button>
                    <div>
                        <button type="button" class="btn btn-light border" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-dark" form="form">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        let tableView;
        let isFormPrepared = 0;

        const maintenance = {
            init: function() {
                maintenance.getData();
                maintenance.events();
            },
            events: function() {
                $('#searchRecord').on('change keyup', function() {
                    let searchValue = $('#searchRecord').val();
                    console.log(searchValue);
                    tableView.search(searchValue).draw();
                });

                $("#createRecordModal").on('hidden.bs.modal', function() {
                    $("#form")[0].reset();
                    $("#form input").removeClass('is-invalid');
                });

                $("#form").on('submit', function(e) {
                    e.preventDefault();

                    const formData = new FormData(this);
                    maintenance.submitData(formData);
                });

                $(document).on('click', '.handleRecordModal', function() {
                    maintenance.loadCollection(
                        requestCollection.rolesInDropDown(),
                        loadCollection.rolesInDropDown);

                    let collectionId = $(this).attr('data-id');

                    if (collectionId !== undefined) {
                        maintenance.loadCollection(
                            requestCollection.userDataInModal(collectionId),
                            loadCollection.userDataInModal);

                        $("#handleDeleteRecord").attr('disabled', false);
                        $("#createRecordModal .modal-title").text("Update Record");
                    } else {
                        $("#handleDeleteRecord").attr('disabled', true);
                        $("#createRecordModal .modal-title").text("New Record");
                    }

                    setTimeout(function() {
                        $("#createRecordModal").modal('toggle');
                    }, 500);
                });

                $(document).on('click', '#handleDeleteRecord', function() {
                    let id = $(`#form input[name="id"`).val();
                    maintenance.destroyRecord(id);
                });
            },
            getData: function(filter = "") {
                if (tableView) {
                    tableView.destroy();
                }

                tableView = $('#datatable').DataTable({
                    ajax: `/sa/data/users`,
                    order: [
                        [0, 'asc']
                    ],
                    dom: 'tp',
                    columns: [{
                            data: 'emp_id',
                            name: 'emp_id',
                        },
                        {
                            data: 'fname',
                            name: 'fname',
                        },
                        {
                            data: 'mname',
                            name: 'mname',
                        },
                        {
                            data: 'lname',
                            name: 'lname',
                        },
                        {
                            data: 'email',
                            name: 'email',
                        },
                        {
                            data: 'role_desc',
                            name: 'role_desc',
                        },
                        {
                            data: 'status_desc',
                            name: 'status_desc',
                            render: function(data, type, row) {
                                if (data === "Active") {
                                    status = `<div class="text-center d-flex align-items-center">
                                            <ion-icon class="text-success mr-1" name="checkmark-circle-outline"></ion-icon>
                                            ${data}
                                        </div>`
                                } else {
                                    status = `<div class="text-center d-flex align-items-center">
                                            <ion-icon class="text-dark mr-1" name="alert-circle-outline"></ion-icon>
                                            ${data}
                                        </div>`
                                }
                                return status;
                            },
                        },
                        {
                            data: 'id',
                            name: 'id',
                            orderable: false,
                            render: function(data, type, row) {
                                return `<div class="text-center">
                                        <ion-icon class="text-center handleRecordModal" name="chevron-forward-outline" data-id="${data}"></ion-icon>
                                    </div>`;
                            },
                        }
                    ],
                    initComplete: function(settings, json) {
                        $(".table").wrap(
                            "<div style='overflow:auto; width:100%;position:relative;'></div>");
                    },
                    rowCallback: function(row, data, index) {
                        // Add styling to each row
                        $(row).css({
                            'background-color': '#FFFFFF', // Example color
                            'padding': '20px', // Example padding
                            'border-radius': '10px',
                            'box-shadow': '0 1px 4px rgba(0, 0, 0, 0.1)'
                        });
                    },
                    drawCallback: function(settings) {
                        // $('#datatable tbody tr').not(':last').css('margin-bottom', '10px');
                    }
                });
            },
            loadCollection: function(collection = "", callback) {
                $.ajax({
                        url: collection,
                        method: 'GET',
                        processData: false, // Ensure jQuery doesn't process the data
                        contentType: false, // Ensure jQuery doesn't set the content type
                    })
                    .then(function(response) {
                        callback(response)
                    })
                    .fail(function(xhr, status, error) {
                        alert('Ajax error:', error)
                    });
            },
            submitData(formData) {
                $("#form input").removeClass('is-invalid');

                let action = formData.get('id') !== "" ?
                    methodCollection.upsert(`/sa/data/update-user/${formData.get('id')}`, formData, 'PUT') :
                    methodCollection.upsert('/sa/data/insert-user', formData, 'POST');
            },
            destroyRecord(id) {
                if (confirm(`Do you want to delete this record?`)) {
                    let formData = new FormData();
                    methodCollection.destroy(`/sa/data/delete-user/${id}`);
                }
            }
        }

        const requestCollection = {
            rolesInDropDown: function() {
                return `/sa/data/roles`;
            },
            userDataInModal: function(collectionId) {
                return `/sa/data/users?id=${collectionId}`;
            }
        }

        const loadCollection = {
            rolesInDropDown: function(response) {
                let dropdown = $("#selectRole").empty();
                response.forEach(function(item) {
                    var option = $("<option></option>").text(item.description).val(item.id);
                    dropdown.append(option);
                });
            },
            userDataInModal: function(response) {
                $('#form input, #form select').each(function() {
                    const name = $(this).attr('name');
                    if (name !== '_token') {
                        $(this).val(response[name]);
                    }
                });
            }
        }

        const methodCollection = {
            upsert: function(url, formData, method) {
                formData.append('_method', method);
                // Make the AJAX request
                $.ajax({
                        url: url,
                        method: 'POST', // Use method instead of type for specifying the HTTP method
                        data: formData,
                        processData: false, // Prevent jQuery from automatically processing the data
                        contentType: false,
                    })
                    .then(function(response) {
                        $("#datatable").DataTable().ajax.reload();
                        $(".modal").modal('toggle')
                    })
                    .fail(function(xhr, status, error) {
                        let response = JSON.parse(xhr.responseText);
                        $.each(response.errors, function(key, value) {
                            $(`input[name="${key}"]`).addClass('is-invalid');
                            $(`#${key}Feedback`).text(value)
                        });
                    });
            },
            destroy: function(url) {
                $.ajax({
                        url: url,
                        type: 'DELETE', // Use method instead of type for specifying the HTTP method
                        dataType: 'json',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    })
                    .then(function(response) {
                        $("#datatable").DataTable().ajax.reload();
                        $(".modal").modal('toggle')
                    })
                    .fail(function(xhr, status, error) {
                        //catch when failed
                    });
            }
        }

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