@extends('layouts.view')
@section('title',trans('lang.usersmanag'))
@section('content')

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="page-title-box">
                    <div class="float-right">

                    </div>
                    <h4 class="page-title">{{trans('lang.usersmanag')}}</h4>
                </div><!--end page-title-box-->
            </div><!--end col-->
        </div><!--end row-->
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                @if ($message = Session::get('success'))
                        <div class="alert alert-success">
                            <p>{{ $message }}</p>
                        </div>
                    @elseif($message = Session::get('error'))
                        <div class="alert alert-danger">
                            <p>{{$message}}</p>
                        </div>
                    @endif
                    <div id="viewtable">
                        <h4 class="mt-0 header-title">{{trans('lang.usersmanag')}} </h4>
                        <p>
                            @if(auth()->user()->can('user-create'))
                            <td><a id="create_record" style=" margin-bottom:20px; color: #fff;"
                                   class="btn btn-primary px-5 py-2" href="{{route('users.create')}}">{{trans('lang.addemp')}}</a></td>
                            @endif
                            </p>
                             <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead>
                                <tr>
                                    <th>{{trans('lang.id')}}</th>
                                    <th>{{trans('lang.empname')}}</th>
                                    <th>{{trans('lang.emp_id')}}</th>
                                    <th>{{trans('lang.compname')}}</th>
                                    <th>{{trans('lang.branchname')}}</th>
                                    <th>{{trans('lang.department')}}</th>
                                    <th>{{trans('lang.manager')}}</th>
                                    <th>{{trans('lang.position')}}</th>
                                    <th>{{trans('lang.join_date')}}</th>
                                    <th>{{trans('lang.iqama_id')}}</th>
                                    <th>{{trans('lang.active')}}</th>
                                    <th>{{trans('lang.total_years')}}</th>
                                    <th>{{trans('role.role')}}</th>
                                    @can('user-edit')
                                        <th>{{trans('lang.edit')}}</th>
                                    @endcan
                                    @can('user-delete')
                                        <th>{{trans('lang.delete')}}</th>
                                    @endcan
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($users as $user)
                                    <tr>
                                        <td>{{$user->id}}</td>
                                        <td>{{$user->name}}</td>
                                        <td>{{$user->emp_id}}</td>
                                        <td>{{isset($user->Company) ? $user->Company->getNameAttribute(): 'None'}}</td>
                                        <td>{{isset($user->branch) ? $user->branch->getNameAttribute(): 'None'}}</td>
                                        <td>{{isset($user->department) ? $user->department->getNameAttribute():'None'}}</td>
                                        <td>{{isset($user->Manager) ? $user->Manager->name:'None'}}</td>
                                        <td>{{isset($user->main_position)?$user->main_position->name:'No Position'}}</td>
                                        <td>{{$user->join_date}}</td>
                                        <td>{{$user->iqama_id}}</td>
                                        <td>
                                            @if($user->active==1)
                                                    <label class="badge badge-success">{{ trans('lang.active') }}</label>
                                            @else
                                                <label class="badge badge-danger">{{ trans('lang.in_active') }}</label>
                                            @endif
                                        </td>
                                        <td>{{$user->Total_Years_months_days()}}</td>
                                        <td>
                                        @if(count($user->getRoleNames()))
                                            @foreach($user->getRoleNames() as $v)
                                                <label class="badge badge-success">{{ $v }}</label>
                                            @endforeach
                                        @else
                                                <label class="badge badge-warning">{{trans('role.noRole')}}</label>
                                        @endif
                                        </td>

                                        @can('user-edit')
                                            <td>
                                            <a class="btn btn-primary btn-sm" href="{{route('users.edit',$user->id)}}">{{trans('lang.edit')}}</a>
                                            <a href="#" class="changePassword btn btn-primary btn-sm" data-id="{{$user->id}}"
                                               data-name="{{$user->name}}" data-password="{{$user->password}}">{{trans('lang.password')}}</a>
                                                <a data-toggle="modal" href="#ViewApproversModal" class="ViewApprovers btn btn-warning btn-sm" data-id="{{$user->id}}"
                                                   data-name="{{$user->name}}" data-user_id="{{$user->id}}">{{trans('lang.ViewApprovers')}}</a></td>
                                        @endcan
                                        @can('user-delete')
                                            <td>
                                                <button class="btn btn-danger deleteButton" data-id="{{ $user->id }}">
                                                    Delete
                                                </button>
                                            </td>
                                        @endcan

                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                    </div>
                    <div id="confirmModal" class="modal fade" role="dialog">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h2 class="modal-title"></h2>
                                </div>
                                <div class="modal-body">
                                    <h4 align="center" style="margin:0;">{{ trans('lang.doyouwantdel') }}</h4>
                                </div>
                                <div class="modal-footer">
                                    <form id="deleteForm" method="POST" action="{{ route('users.destroy') }}">
                                        @csrf
                                        <input type="hidden" name="user_id" id="delete_user_id">
                                        <button type="submit" id="ok_button" class="btn btn-danger">
                                            {{ trans('lang.ok') }}
                                        </button>
                                    </form>
                                    <button type="button" class="btn btn-default"
                                            data-dismiss="modal">{{ trans('lang.cancel') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="ViewApproversModal" class="modal fade" role="dialog">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header"> <h4 class="modal-title"> {{trans('lang.ViewApprovers')}}</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                                <div class="modal-body">
                                    <h4 id="job_name" class="page-title" style="text-align: center"></h4>
                                    <div id="viewapproverstable" class="form-group row" style="padding-top: 5px"></div>


                                </div>
                                <div class="modal-footer">
                                    <a href="#" id="edit_job" class="btn btn-primary"></a>
                                    <button type="button" class="btn btn-success" data-dismiss="modal">{{ trans('lang.cancel') }}</button>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{--Password Modal--}}
        <div class="modal fade" id="PasswordModal" tabindex="-1" role="dialog"
             aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="PasswordHeader"></h4>
                        <button type="button" class="close" data-dismiss="modal"
                                aria-hidden="true">×
                        </button>
                    </div>
                    <form id="passwordForm" method="post">
                        <div class="modal-body">
                            <div class="modal-body">
                                {{ csrf_field() }}
                                <input id="password_admin_id" type="hidden" name="admin_id">
                                <label for="">{{trans('lang.password')}}</label>
                                <input type="password" name="password" id="passwordInput" class="form-control">

                                <div class="form-group row">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" onclick="showHide()" class="custom-control-input" id="horizontalCheckbox" data-parsley-multiple="groups" data-parsley-mincheck="2">
                                            <label class="custom-control-label" for="horizontalCheckbox">{{trans('lang.show') . ' '.trans('lang.password')}}</label>
                                        </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="submit"
                                        class="btn btn-primary waves-effect waves-light">
                                    {{trans('lang.edit')}}
                                </button>
                                <button type="button"
                                        class="btn btn-danger waves-effect text-left"
                                        data-dismiss="modal">{{trans('lang.cancel')}}
                                </button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
        <!-- end col -->
    </div>
@endsection
    @section('scripts')
        <script src="{{ asset('plugins/jquery-steps/jquery.steps.min.js') }}"></script>
        <script src="{{ asset('assets/pages/jquery.form-wizard.init.js') }}"></script>
        <script src="{{ asset('assets/js/app.js') }}"></script>

        <script>
            $(document).ready(function () {
               // alert('dd');

                $('.delete-button').click(function () {
                    let userId = $(this).data('user_id');
                    $('#delete_user_id').val(userId);
                    $('#confirmModal').modal('show');
                });
                $(document).on('click', '.deleteButton', function () {
                    var user_id = $(this).data('id');
                    $('#ok_button').data('user_id', user_id); // Set user_id to the OK button
                    $('#confirmModal').modal('show');
                });
                $(document).on('click', '.changePassword', function () {
                    $('#password_admin_id').val($(this).data('id'));
                    $('#PasswordHeader').text($(this).data('name'));
                    $('#passwordInput').val($(this).data('password'));
                    $('#passwordForm').attr('action', "users/changePassword/" + $(this).data('id'));
                    $('#PasswordModal').modal('show');
                });

                $('#ok_button').click(function () {
                    var userId = $(this).data('user_id'); // get user_id set earlier

                    $.ajax({
                        url: "{{ route('users.destroy') }}",
                        type: "POST",
                        dataType: "json",
                        data: {
                            user_id: userId,
                            _token: "{{ csrf_token() }}",
                        },
                        beforeSend: function () {
                            $('#ok_button').text('{{ trans('lang.deleting') }}...');
                        },
                        success: function (data) {
                            setTimeout(function () {
                                $('#confirmModal').modal('hide');
                                $('#ok_button').text('{{ trans('lang.ok') }}');
                                $('#datatable-buttons').DataTable().ajax.reload();
                            }, 2000);
                        },
                        error: function (xhr, status, error) {
                            console.log(xhr.responseText);
                            Swal.fire('Error', 'Something went wrong.', 'error');
                        }
                    });
                });
                $('#viewapproverstable').empty();
                $('#job_name').empty();
                $('#edit_job').attr('href', '#');
                $(document).on('click', '.ViewApprovers', function () {
                    $('#viewapproverstable').empty();
                    $('#job_name').empty();
                    $('#edit_job').attr('href', '#').text('');

                    let userId = $(this).data('user_id');

                    $.ajax({
                        type: 'GET',
                        url: "{{ route('get_user_approvers') }}",
                        data: { user_id: userId },
                        dataType: 'json',
                        success: function (response) {
                            if (response.data.theusers && Array.isArray(response.data.theusers)) {
                                $.each(response.data.theusers, function (index, item) {
                                    let html = `
                        <div class="col-md-6">
                            <h5 class="card-title mt-0" style="font-weight: bold;">${item.approver_name} :</h5>
                        </div>
                        <div class="col-md-6">
                            <p class="card-text text-muted">${item.user_name}</p>
                        </div>
                    `;
                                    $('#viewapproverstable').append(html);
                                });

                                if (response.data.theusers.length > 0) {
                                    $('#job_name').html(
                                        `<div class="page-title">
                            {{ trans('lang.job_approval_name') }} : ${response.data.theusers[0].job_name}
                        </div><hr style="border-bottom: #cecece dashed 1px;">`
                                    );
                                }

                                $('#edit_job').attr('href', response.data.link).text(response.data.button);
                            } else {
                                $('#viewapproverstable').empty();
                                $('#job_name').html(
                                    `<div class="page-title">
                             ${response.data.theusers}
                        </div>`
                                );
                                $('#edit_job').attr('href', response.data.link).text(response.data.button);
                            }
                        },
                        error: function (xhr) {
                            console.error("AJAX error:", xhr.status, xhr.responseText);
                            alert('Failed to fetch approvers. Status: ' + xhr.status);
                        }
                    });
                });

            });

            function showHide() {
                var x = document.getElementById("passwordInput");
                if (x.type === "password") {
                    x.type = "text";
                } else {
                    x.type = "password";
                }
            }
        </script>
    @endsection