@extends('layouts.app')
@section('title', 'Middleware | Users')
@section('content')
    <div class="container-fluid mt-2">
        @include('app.settings.index')
        <div class="col-lg-12">
            <div class="card ">
                <div class="card-body">
                    <div class="p-0">
                        <table id="datatable" class="table table-bordered nowrap"
                            style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th>Sl No</th>
                                    <th>User Name</th>
                                    <th>Company</th>
                                    <th>Role</th>
                                    <th>Email</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($usersData as $users)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{!! ucwords($users->first_name . ' ' . $users->last_name) !!}</td>
                                        <td>{!! isset($users->companies->company_name) ? $users->companies->company_name : '' !!}</td>
                                        <td>{{ isset($users->usertypes->user_types) ? $users->usertypes->user_types : '' }}
                                        </td>
                                        <td>{{ $users->email }}</td>
                                        @role('Super Admin')
                                            <td class="text-center">
                                                <div class="custom-control custom-switch">
                                                    <input type="checkbox" class="custom-control-input"
                                                        id="customSwitch{{ $users->id }}" value="{{ $users->id }}"
                                                        onclick="userStatus(this.value)"
                                                        @if ($users->is_active == 1) checked @endif>
                                                    <label class="custom-control-label" for="customSwitch{{ $users->id }}">
                                                        @if ($users->is_active == 1)
                                                            Active
                                                        @else
                                                            Inactive
                                                        @endif
                                                    </label>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <a href="#"><span class="edit_user ml-2" data-id="{{ $users->id }}">
                                                        <img class="menuicon tbl_editbtn"
                                                            src="{{ asset('assets/images/edit.svg') }}">&nbsp;
                                                    </span></a>
                                                @if ($users->user_type_id == 3 || $users->user_type_id == 4)
                                                    <span class="assignService ml-2"
                                                        onclick="assignService({{ $users->id }})"
                                                        data-id="{{ $users->id }}">
                                                        <i class="fas fa-user-plus" style="cursor: pointer"></i>&nbsp;
                                                    </span>
                                                @endif
                                            </td>
                                        @endrole
                                        @role('Admin')
                                            @if (Session::get('uid') == $users->id)
                                                <td></td>
                                                <td class="text-center">
                                                    <span class="edit_user ml-2" data-id="{{ $users->id }}">
                                                        <img class="menuicon tbl_editbtn"
                                                            src="{{ asset('assets/images/edit.svg') }}">&nbsp;
                                                    </span>
                                                </td>
                                            @else
                                                @if ($users->user_type_id == 3 || $users->user_type_id == 4)
                                                    <td class="text-center">
                                                        <div class="custom-control custom-switch">
                                                            <input type="checkbox" class="custom-control-input"
                                                                id="customSwitch{{ $users->id }}"
                                                                value="{{ $users->id }}" onclick="userStatus(this.value)"
                                                                @if ($users->is_active == 1) checked @endif>
                                                            <label class="custom-control-label"
                                                                for="customSwitch{{ $users->id }}">
                                                                @if ($users->is_active == 1)
                                                                    Active
                                                                @else
                                                                    Inactive
                                                                @endif
                                                            </label>
                                                        </div>
                                                    </td>
                                                    <td class="text-center">
                                                        <span class="edit_user ml-2" data-id="{{ $users->id }}">
                                                            <img class="menuicon tbl_editbtn"
                                                                src="{{ asset('assets/images/edit.svg') }}">&nbsp;
                                                        </span>
                                                        <span class="assignService ml-2"
                                                            onclick="assignService({{ $users->id }})"
                                                            data-id="{{ $users->id }}">
                                                            <i class="fas fa-user-plus" style="cursor: pointer"></i>&nbsp;
                                                        </span>
                                                    </td>
                                                @else
                                                    <td></td>
                                                    <td></td>
                                                @endif
                                            @endif
                                        @endrole
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- AddingUsers --}}
    <div class="modal fade" id="myModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add user</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post" id="usersForm" name="usersForm" data-parsley-validate>
                    @csrf
                    <input name="user_id" value="" id="ed_user_id" type="hidden" />
                    <div class="modal-body">
                        <div class="row">
                            @if (Session::get('user_type_id') == 4)
                                <input type="hidden" name="user_type_id" id="user_type_id" value="5">
                            @else
                                <div class="col-lg-4">
                                    <label for="example-email-input" class="col-form-label"> User Role <span
                                            class="text-danger"> * </span></label>
                                    <Select required class="form-control select_role" name="user_type_id" id="user_type_id">
                                        <option selected disabled value="">Select Role</option>
                                        @forelse($userTypes as $userType)
                                            <option value="{{ $userType->id }}"> {{ $userType->user_types }}</option>
                                        @empty
                                        @endforelse
                                    </Select>
                                </div>
                            @endif
                            <div class="col-lg-4">
                                <label for="example-firstname-input" class="col-form-label">First Name <span
                                        class="text-danger"> * </span></label>
                                <input required name="first_name" value="" id="first_name" type="text"
                                    pattern="[A-Za-z]+" class="form-control" placeholder="Enter First Name" />
                            </div>
                            <div class="col-lg-4">
                                <label for="example-firstname-input" class="col-form-label">Last Name</label>
                                <input autocomplete="off" value="" name="last_name" id="last_name" type="text"
                                    pattern="[A-Za-z]+" class="form-control" placeholder="Enter Last Name" />
                            </div>
                            @if (Session::get('user_type_id') == 4)
                                <div class="col-lg-4">
                                    <label for="example-email-input" class="col-form-label">Email <span
                                            class="text-danger"> * </span></label>
                                    <input autocomplete="off" required value="" name="email" id="email"
                                        type="email" class="form-control" placeholder="Enter Email"
                                        data-parsley-type="email" data-parsley-trigger="keyup"
                                        placeholder="Enter a valid e-mail" />
                                </div>
                            @endif
                        </div>
                        <div class="row mt-1">
                            @if (Session::get('user_type_id') == 4)
                            @else
                                <div class="col-lg-4">
                                    <label for="example-email-input" class="col-form-label">Email <span
                                            class="text-danger"> * </span></label>
                                    <input autocomplete="off" required value="" name="email" id="email"
                                        type="email" class="form-control" placeholder="Enter Email"
                                        data-parsley-type="email" data-parsley-trigger="keyup"
                                        placeholder="Enter a valid e-mail" />
                                </div>
                            @endif
                            <div class="col-lg-4">
                                <label for="example-email-input" class="col-form-label"> Password </label>
                                <div class="input-icons">
                                    <i class="fa fa-fw fa-eye icon1 toggle-password"></i>
                                    <input id="password" name="password" type="password" class="form-control"
                                        autocomplete="off" placeholder="Enter Password" data-parsley-minlength="8"
                                        data-parsley-errors-container=".errorspannewpassinput1"
                                        data-parsley-required-message="Please enter your new password."
                                        data-parsley-uppercase="1" data-parsley-lowercase="1" data-parsley-number="1"
                                        data-parsley-special="1">
                                </div>
                                <span class="errorspannewpassinput1"></span>
                            </div>
                            <div class="col-lg-2">
                                <br>
                                <div class="mt-3">
                                    <input type="checkbox" class="mx-1" value="1" id="is_active"
                                        name="is_active" />
                                    <label for="" class="">Is Active ?</label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            @role('Super Admin') {{-- Super Admin --}}
                                <div class="col-lg-4" id="company_select">
                                    <label for="example-email-input" class="col-form-label"> Company <span
                                            class="text-danger"> * </span></label>
                                    <Select required class="form-control select_role company_id" name="company_id"
                                        id="company_id">
                                        <option selected disabled value="">Select Company</option>
                                        @forelse($companyList as $company)
                                            <option value="{{ $company->id }}"> {{ $company->company_name }}</option>
                                        @empty
                                        @endforelse
                                    </Select>
                                </div>
                            @endrole
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" onclick="usersVal();">Create</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="userEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit user</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post" id="updateuserfrm" name="updateuserfrm" data-parsley-validate>
                    @csrf
                    <input name="user_id" value="" id="user_id_ed" type="hidden" />
                    <div class="modal-body">
                        <div class="row">
                            @if (Session::get('user_type_id') == 4)
                                <input type="hidden" name="user_type_id" id="user_type_id_ed" value="5">
                            @else
                                <div class="col-lg-4">
                                    <label for="example-email-input" class="col-form-label"> User Role <span
                                            class="text-danger"> * </span></label>
                                    <Select required class="form-control select_role" name="user_type_id"
                                        id="user_type_id_ed">
                                        <option selected disabled value="">Select Role</option>
                                        @forelse($userTypes as $userType)
                                            <option value="{{ $userType->id }}"> {{ $userType->user_types }}</option>
                                        @empty
                                        @endforelse
                                    </Select>
                                </div>
                            @endif
                            <div class="col-lg-4">
                                <label for="example-firstname-input" class="col-form-label">First Name <span
                                        class="text-danger"> * </span></label>
                                <input required name="first_name" value="" id="first_name_ed" type="text"
                                    class="form-control" pattern="[A-Za-z]+" placeholder="Enter First Name" />
                            </div>
                            <div class="col-lg-4">
                                <label for="example-firstname-input" class="col-form-label">Last Name</label>
                                <input autocomplete="off" value="" name="last_name" id="last_name_ed"
                                    type="text" pattern="[A-Za-z]+" class="form-control"
                                    placeholder="Enter Last Name" />
                            </div>
                            @if (Session::get('user_type_id') == 4)
                                <div class="col-lg-4">
                                    <label for="example-email-input" class="col-form-label">Email <span
                                            class="text-danger"> * </span></label>
                                    <input autocomplete="off" required value="" name="email" id="email_ed"
                                        type="email" class="form-control" placeholder="Enter Email"
                                        data-parsley-type="email" data-parsley-trigger="keyup"
                                        placeholder="Enter a valid e-mail" />
                                </div>
                            @endif
                        </div>
                        <div class="row mt-1">
                            @if (Session::get('user_type_id') == 4)
                            @else
                                <div class="col-lg-4">
                                    <label for="example-email-input" class="col-form-label">Email <span
                                            class="text-danger"> * </span></label>
                                    <input autocomplete="off" required value="" name="email" id="email_ed"
                                        type="email" class="form-control" placeholder="Enter Email"
                                        data-parsley-type="email" data-parsley-trigger="keyup"
                                        placeholder="Enter a valid e-mail" />
                                </div>
                            @endif

                            {{-- <div class="col-lg-4">
                                <label for="example-email-input" class="col-form-label"> Password </label>

                                <input id="password_ed" name="password" type="password" class="form-control"
                                    autocomplete="off" placeholder="Enter Password" data-parsley-minlength="8"
                                    data-parsley-errors-container=".errorspannewpassinput1"
                                    data-parsley-required-message="Please enter your new password."
                                    data-parsley-uppercase="1" data-parsley-lowercase="1" data-parsley-number="1"
                                    data-parsley-special="1">
                                <span class="errorspannewpassinput1"></span>
                            </div> --}}
                            <div class="col-lg-4">
                                <br>
                                <div class="mt-3">
                                    <input type="checkbox" class="mx-1" value="1" id="is_active_ed"
                                        name="is_active" />
                                    <label for="" class="">Is Active ?</label>
                                </div>
                            </div>
                            @role('Super Admin') {{-- Super Admin --}}
                                <div class="col-lg-4" id="company_select_ed">
                                    <label for="example-email-input" class="col-form-label"> Company <span
                                            class="text-danger"> * </span></label>
                                    <Select required class="form-control select_role company_id" name="company_id"
                                        id="company_id_ed">
                                        <option selected disabled value="">Select Company</option>
                                        @forelse($companyList as $company)
                                            <option value="{{ $company->id }}"> {{ $company->company_name }}</option>
                                        @empty
                                        @endforelse
                                    </Select>
                                </div>
                            @endrole
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Assign Service Modal --}}
    <div class="modal fade vh-75" id="assignServiceModal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    {{-- <h5 class="modal-title" id="exampleModalLabel">Assign Service</h5> --}}
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row d-flex assinged_row">
                        <div class="col-5">
                            <table id="available_table" class="table table-bordered nowrap"
                                style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead>
                                    <tr class="bg-info">
                                        <th style="width: 5%" class="text-center">
                                            <input type="checkbox" value="" id="selectall_available"
                                                name="selectall_available" class="pb-0" />
                                        </th>
                                        <th>Available Services</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Your available services data rows go here -->
                                </tbody>
                            </table>
                        </div>
                        <div class="col-2 d-flex flex-column align-items-center justify-content-center">
                            <button id="addButton" style="width: 50%" class="btn btn-sm btn-info">Add</button>
                            <button id="removeButton" style="width: 50%"
                                class="btn btn-sm btn-warning mt-2 mb-2">Remove</button>
                            <button id="updateButton" style="width: 50%"
                                class="btn btn-sm btn-primary mt-4">Update</button>
                            <input type="hidden" name="user_id" id="user_id_service">
                        </div>
                        <div class="col-5">
                            <table id="assigned_table" class="table table-bordered nowrap"
                                style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead>
                                    <tr class="bg-info">
                                        <th style="width: 5%" class="text-center">
                                            <input type="checkbox" value="" id="selectall_assigned"
                                                name="selectall_assigned" class="pb-0" />
                                        </th>
                                        <th><strong>Assigned Services</strong></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Your assigned services data rows go here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <style>
        .input-icons i {
            position: absolute;
        }

        .icon1 {
            padding: 10px;
            min-width: 0px;
            right: 20px;
        }
    </style>

    {{-- Js --}}
    <script type="text/javascript">
        $(function() {
            @if (Session::has('success'))
                new PNotify({
                    title: 'Success',
                    delay: 500,
                    text: "{{ Session::get('success') }}",
                    type: 'success'
                });
            @endif
            @if ($errors->any())
                var err = "";
                @foreach ($errors->all() as $error)

                    new PNotify({
                        title: 'Error',
                        text: "{{ $error }}",
                        delay: 800,
                        type: 'error'
                    });
                @endforeach
            @endif
        });

        function userStatus(value) {
            window.location.href = '/userStatus/' + value;
        }
        $(document).ready(function() {
            var $tabid = 'tab3';
            $(".odtabs").not("#tab3").addClass('btn-outline-secondary');
            $("#tab3").addClass('btn-secondary');

            $('.modal').on('hidden.bs.modal', function() {
                $(this).find('form')[0].reset();
                $(this).find('form').parsley().reset();
            });
            $("form").parsley();
            var table = $('#datatable').DataTable({
                responsive: true,
                dom: 'l<"toolbar">Bfrtip',
                buttons: [
                    'excel'
                ],
                initComplete: function() {
                    $("div.toolbar").html(
                        '<button id="addUsers" type="button" class="ml-2 btn btn-primary" data-toggle="modal" data-target="#myModal"><img class="menuicon" src="{{ asset('assets/images/add.svg') }}">&nbsp;Add User</button><br />'
                    );
                }
            });

            const password = document.querySelector("#password");
            $(".toggle-password").click(function() {
                $(this).toggleClass("fa-eye fa-eye-slash");
                const type = password.getAttribute("type") === "password" ? "text" : "password";
                password.setAttribute("type", type);
            });
        });

        function getUsers() {
            window.location.href = "/users";
        }

        function usersVal() {
            if ($("#usersForm").parsley()) {

                if ($("#usersForm").parsley().validate()) {
                    event.preventDefault();
                    if ($("#usersForm").parsley().isValid()) {
                        $.ajax({
                            type: "POST",
                            cache: false,
                            async: false,
                            url: "{{ url('/usersInsert') }}",
                            data: new FormData($("#usersForm")[0]),
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                if (response.msg == "Users Already Exists!") {

                                    new PNotify({
                                        title: 'Error',
                                        text: response.msg,
                                        type: 'error'
                                    });
                                    return false;
                                } else if (response.msg == "Only Image Allowed!") {

                                    new PNotify({
                                        title: 'Error',
                                        text: response.msg,
                                        type: 'error'
                                    });
                                    return false;
                                } else if (response.msg == "Users Added Successfully!") {

                                    new PNotify({
                                        title: 'Success',
                                        text: response.msg,
                                        type: 'success'
                                    });
                                    setTimeout(function() {
                                        location.reload();
                                    }, 1000);
                                }
                            },
                            error: function(response) {

                                var err = "";
                                $.each(response.responseJSON.errors, function(field_name, error) {
                                    err = err + error;
                                });
                                new PNotify({
                                    title: 'Error',
                                    text: err,
                                    type: 'error',
                                    delay: 1000
                                });
                            }
                        });
                    }
                }
            }
        }

        function usersStatus(value) {
            window.location.href = '/usersStatus/' + value;
        }

        $('#updateuserfrm').on('submit', function(event) {
            event.preventDefault();
            $('#department_ed').prop('disabled', false);
            if ($('#updateuserfrm').parsley().isValid()) {
                var url = '{{ route('updateUsers') }}';
                var data = $("#updateuserfrm").serialize();
                $.ajax({
                    type: "post",
                    url: url,
                    data: data,
                    success: function(response) {
                        new PNotify({
                            title: 'Success',
                            text: response.msg,
                            type: 'success'
                        });
                        setTimeout(function() {
                            location.reload();
                        }, 800);
                    },
                    error: function(response) {
                        var err = "";
                        $.each(response.responseJSON.errors, function(field_name, error) {
                            err = err + '<br>' + error;
                        });
                        new PNotify({
                            title: 'Error',
                            text: err,
                            type: 'error',
                            delay: 2000
                        });
                    }
                });
            }
        });

        // Edit users
        $('#datatable').on('click', '.edit_user', function() {
            var id = $(this).data('id');
            var url = '{{ route('edit_user') }}';
            $.ajax({
                type: "post",
                url: url,
                data: {
                    id: id,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    var res = response;

                    $("#user_id_ed").val(res['id']);
                    $("#first_name_ed").val(res['first_name']);
                    $("#last_name_ed").val(res['last_name']);
                    $("#email_ed").val(res['email']);
                    $("#contact_no_ed").val(res['contact_no']);
                    $("#password_ed").val(res['password']);
                    $("#user_type_id_ed").val(res['user_type_id']);
                    $("#company_id_ed").val(res['company_id']);

                    if (res['is_active'] == 1) {
                        $("#is_active_ed").attr('checked', 'checked');
                    } else {
                        $("#is_active_ed").removeAttr('checked', 'checked');
                    }

                    $("#userEditModal").modal('show');
                }
            });
        });

        var service_data = [];

        function assignService(userID) {

            $.ajax({
                url: '{{ route('assignmentData') }}',
                type: 'POST',
                data: {
                    id: userID,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    $('#user_id_service').val(userID);
                    service_data = response;
                    var available_table = $('#available_table').DataTable({
                        "destroy": true,
                        "paging": false,
                        "searching": false,
                        "ordering": false,
                        "info": false,
                        "scrollY": "400px",
                        "scrollCollapse": true,
                        data: response.unassignedService,
                        columns: [{
                                data: null,
                                render: function(data, type, row) {
                                    return '<input style="text-align: center;" type="checkbox" class="text-center" name="checkboxColumn" value="' +
                                        row.id + '">';
                                }
                            },
                            {
                                data: "service_name"
                            },
                        ],
                    });
                    var assigned_table = $('#assigned_table').DataTable({
                        "destroy": true,
                        "paging": false,
                        "searching": false,
                        "ordering": false,
                        "info": false,
                        "scrollY": "400px",
                        "scrollCollapse": true,
                        data: response.assignedService,
                        columns: [{
                                data: null,
                                render: function(data, type, row) {
                                    return '<input style="text-align: center;" type="checkbox" class="text-center" name="checkboxColumn" value="' +
                                        row.id + '">';
                                }
                            },
                            {
                                data: "service_name"
                            },
                        ],
                    });
                    available_table.draw();
                    assigned_table.draw();
                }
            });

            setTimeout(function() {
                $('#assignServiceModal').modal('show');
            }, 500);
        }


        var selectedRows = [];

        function updateDataTable(targetDataTable) {
            var res = service_data.allService;
            selectedRows.forEach(function(selectedId) {
                var selectedRowData = res.find(function(row) {
                    return row.id == selectedId;
                });
                if (selectedRowData) {
                    row = [
                        '<input style="text-align: center;" type="checkbox" class="text-center" name="checkboxColumn" value="' +
                        selectedRowData.id + '">',
                        selectedRowData.service_name,
                    ];
                    var addedRow = targetDataTable.row.add(row).node();
                    $(addedRow).attr('data-id', selectedId);
                    targetDataTable.draw();
                }
            });
            selectedRows = [];
        }

        $("#selectall_available").on('change', function() {
            if ($("#available_table input[type=checkbox]").hasClass("checkclass")) {
                $("#available_table input[type=checkbox]").prop("checked", false).removeClass('checkclass');
            } else {
                $("#available_table input[type=checkbox]").prop("checked", true).addClass('checkclass');
            }
        });

        $("#selectall_assigned").on('change', function() {
            if ($("#assigned_table input[type=checkbox]").hasClass("checkclass")) {
                $("#assigned_table input[type=checkbox]").prop("checked", false).removeClass('checkclass');
            } else {
                $("#assigned_table input[type=checkbox]").prop("checked", true).addClass('checkclass');
            }
        });


        $("#addButton").click(function() {
            var checkedBoxes = $("#available_table input[type=checkbox]:checked");
            selectedRows = [];
            checkedBoxes.each(function() {
                var selectedId = $(this).val();
                selectedRows.push(selectedId);
                var dataTable = $('#available_table').DataTable();
                var row = dataTable.row($(this).closest('tr'));
                row.remove().draw();
            });
            updateDataTable($('#assigned_table').DataTable({
                "destroy": true,
                "paging": false,
                "searching": false,
                "ordering": false,
                "info": false,
                "scrollY": "400px",
                "scrollCollapse": true,
            }));
            var available_table = $('#available_table').DataTable();
            var assigned_table = $('#assigned_table').DataTable();
            available_table.order([0, 'asc']).draw();
            assigned_table.order([0, 'asc']).draw();
        });

        $("#removeButton").click(function() {
            var checkedBoxes = $("#assigned_table input[type=checkbox]:checked");
            var rmvserviceIds = [];
            selectedRows = [];

            checkedBoxes.each(function() {
                var selectedId = $(this).val();
                var user_id = $('#user_id_service').val();
                if (selectedId) {
                    rmvserviceIds.push({
                        service_id: selectedId,
                        user_id: user_id
                    });
                    selectedRows.push(selectedId);
                }

                var dataTable = $('#assigned_table').DataTable();
                var row = dataTable.row($(this).closest('tr'));
                row.remove().draw();
            });


            var csrfToken = "{{ csrf_token() }}";

            $.ajax({
                url: "/removeassignService",
                type: "POST",
                data: {
                    assignments: rmvserviceIds,
                    _token: csrfToken
                },
                dataType: "json",
                success: function(response) {
                    if (response.msg == "Service Unassinged") {
                        new PNotify({
                            text: response.msg,
                            type: 'info'
                        });
                        setTimeout(function() {
                            location.reload();
                        }, 500);
                    }
                },
                error: function(xhr, status, error) {
                    // Handle any errors
                    console.error(error);
                }
            });

            updateDataTable($('#available_table').DataTable({
                "destroy": true,
                "paging": false,
                "searching": false,
                "ordering": false,
                "info": false,
                "scrollY": "400px",
                "scrollCollapse": true,
            }));

            var available_table = $('#available_table').DataTable();
            var assigned_table = $('#assigned_table').DataTable();
            available_table.order([0, 'asc']).draw();
            assigned_table.order([0, 'asc']).draw();
        });

        $("#updateButton").click(function() {
            var assignedRows = $("#assigned_table tbody tr");
            var serviceIds = [];

            assignedRows.each(function() {
                var id = $(this).find("input[type=checkbox]").val();
                var user_id = $('#user_id_service').val();
                if (user_id) {
                    serviceIds.push({
                        service_id: id,
                        user_id: user_id
                    });
                }
            });

            var csrfToken = "{{ csrf_token() }}";

            $.ajax({
                url: "/assignService",
                type: "POST",
                data: {
                    assignments: serviceIds,
                    _token: csrfToken
                },
                dataType: "json",
                success: function(response) {
                    if (response.msg == "Services Assigned Successfully") {
                        new PNotify({
                            title: 'Success',
                            text: response.msg,
                            type: 'success',
                            delay: 500
                        });
                        setTimeout(function() {
                            location.reload();
                        }, 500);
                    }
                },
                error: function(xhr, status, error) {
                    // Handle any errors
                    console.error(error);
                }
            });
        });
    </script>
@endsection