@extends('lay.dnekcab.retsam')

@section('title')
  {{ $page_title }}
@endsection

@section('page-content')
<div class="page-content">
    <div class="container-fluid">
        <!-- Info boxes -->
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <div class="card data-table">
                    <div class="card-header" style="padding: 0.625rem  0rem !important">
                        <label class="card-title"><i class="fa fa-list"></i> {{ __('user.list') }}</label>
                        <button type="button" class="btn btn-primary btn-sm pull-{{ app()->getLocale() == 'en' ? 'right' : 'left' }}" data-bs-toggle="modal" data-bs-target="#user-modal">
                            <i class="fa fa-user-plus"></i> {{ __('user.add') }}
                        </button>
                    </div>

                    <div>
                        {{-- Search --}}
                        <x-search-filter 
                            :rows="1" 
                            :inputs-per-row="2" 
                            :col-md-classes="[
                                ['col-md-11','col-md-1']
                            ]" 
                            :input-config="[
                                [
                                    ['type' => 'text'], 
                                    ['type' => 'select', 'options' => $paginationArray]
                                ]
                            ]"
                            :names="[
                                [
                                'term_searh_name',
                                'pagination_searh_name',
                                ]
                            ]"
                            :ids="[
                                [
                                'term_searh_id',
                                'pagination_searh_id',
                                ]
                            ]"
                            :placeholders="[
                                [
                                __('employee.name'),
                                key($paginationArray) ? key($paginationArray) : __('global.pagination')
                                ]
                            ]"
                            form-action="{{ route('AllUser') }}"
                            report-type="both" 
                            :lang="$lang"
                        />
                                        
                        <!-- end Search -->
                    </div>

                    @if($allUsers->isNotEmpty())
                        <div class="card-body p-0 pt-3" id="data_content">
                            @include('dnekcab.nimda.user.userList')
                        </div>
                    @else
                        <x-record-not-found />
                    @endif
                    <!-- /.card-body -->
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade custom-modal" id="user-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
         
            <div class="card card-dark mb-1">
                <div class="card-header pt-3">
                    <h3 class="card-title pull-{{ app()->getLocale() == 'en' ? 'left' : 'right' }}"><i class="fa fa-user-plus"></i> {{ __('user.add') }}</h3>
                    <button type="button" class="close pull-{{ app()->getLocale() == 'en' ? 'right' : 'left' }}" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fa fa-times-circle"></i>
                    </button>
                </div>
                <div>
                    <table class="table table-bordered" id="user-add-form">
                        <tr>
                            <td colspan="2">
                                <label>{{ __('user.select_user') }} <span class="required">*</span></label>
                                <div id="user-list">
                                    <select id="employee_id" name="r_employee_id" class="form-control">
                                        <option value="0">{{ __('global.select') }}</option>
                                        @if($empNoUser)
                                            @foreach($empNoUser as $noUser)
                                                <option value="{{ encryption($noUser->id) }}">{{ $noUser->name}}, {{ $noUser->father_name}} [{{ $noUser->last_name}}] | {{ $noUser->id_number }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>{{ __('user.name') }} <span class="required">*</span></label>
                                <input type="email" id="name" name="r_name" class="form-control">
                            </td>
                            <td>
                                <label>{{ __('user.email') }} <span class="required">*</span></label>
                                <input type="email" id="email" name="r_email" class="form-control">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>{{ __('user.role') }} <span class="required">*</span></label>
                                <select class="form-control" id="role" name="r_role" style="width: 100%;">
                                    <option value="0">{{ __('global.select') }}</option>
                                    @foreach($allRole AS $role)
                                        <option value="{{$role->name}}">{{$role->name}}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <label>{{ __('user.password') }} <span class="required">*</span></label> (123456)
                                <input type="password" value="123456" class="form-control" id="password" name="r_password">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <button type="button" class="btn btn-dark" onclick="addUser()">{{ __('global.save') }}</button>
                                <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal" aria-label="Close">{{ __('global.cancel') }}</button>
                                <div class="error-section mt-1"></div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
          
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

{{-- delete confirm modal --}}
<div class="modal fade custom-modal" id="confirm-modal" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-labelledby="confirm-role-modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 400px">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirm-role-modalLabel">
                    <i class="fa fa-check" style="margin-top: -1px"></i> {{ __('global.confirmTitle'); }}
                </h5>
                <button type="button" class="btn-close confrim-m{{ app()->getLocale() == 'en' ? 'l' : 'r' }}" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="confrim-content-text"></div>
                <div style="padding: 0px 10px 5px 18px;">
                    <button class="btn btn-primary btn-sm change-status-btn">
                        {{ __('global.confirm') }}
                    </button>
                    <button class="btn btn-danger btn-sm cancel-btn" data-bs-dismiss="modal" aria-label="Close">
                        {{ __('global.cancel') }}
                    </button>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
</div>
{{-- delete confirm modal --}}
@endsection

@section('js')
    <!-- jquery step -->
    <script src="{{asset('assets/libs/jquery-steps/build/jquery.steps.min.js')}}"></script>

    <!-- form wizard init -->
    <script src="{{asset('assets/dnekcab/js/pages/form-wizard.init.js')}}"></script>
    <script type="text/javascript">
    var rowid = 0;

    $(document).ready(function(){
        $(document).on("change", "#employee_id", function(){
            var id = $(this).val();
            $.ajax({
                url: "{{ route('fetchEmployee') }}",
                method: "GET",
                data: {
                    id: id,
                },
                success: function(response) {
                    // Handle the success response
                    if(response){
                        $('#name').val(response.name);
                        $('#email').val(response.email);

                        $('#user-modal').modal('show');
                        
                    } else {
                        toastr.options =
                        {
                        "closeButton" : true,
                        "progressBar" : true
                        }
                        toastr.error(response);
                    }
                },
                error: function(xhr, status, error) {
                    // Handle the error response
                    console.error('Form submission failed');
                    console.error(error);
                }
            });
        });
    });
    // edit faculty
    function showEditForm(id)
    {
        $("#tr-"+id+" span").hide();
        $("#tr-"+id+" input").show();
        $("#tr-"+id+" .show-edit-btn").hide();
        $("#tr-"+id+" .submit-edit-btn").show();
        $("#tr-"+id+" .hide-edit-btn").show();
        $("#tr-"+id+" td").css("padding-top", "4px");
        $("#tr-"+id+" td").css("padding-bottom", "4px");
    }
    //hide edit faculty form
    function hideEditForm(id)
    {
        $("#tr-"+id+" span").show();
        $("#tr-"+id+" input").hide();
        $("#tr-"+id+" .show-edit-btn").show();
        $("#tr-"+id+" .submit-edit-btn").hide();
        $("#tr-"+id+" .hide-edit-btn").hide();
        $("#tr-"+id+" td").css("padding-top", "");
        $("#tr-"+id+" td").css("padding-bottom", "");
        $("#tr-"+id+" .spinner-btn").hide();
    }
    //submit edit faculty form
    function submitEditForm(id)
    {
        $("#tr-"+id+" .submit-edit-btn").hide();
        $("#tr-"+id+" .hide-edit-btn").hide();
        $("#tr-"+id+" .spinner-btn").show();
        let fName = $("#tr-"+id+" #name").val();
        let admission = $("#tr-"+id+" #admission").val();
        let sms_count = $("#tr-"+id+" #sms_count").val();
        let url = "edit-faculty";
        $.ajax({
            url: url,
            type: 'POST',
            data: {
                "_token": "{{ csrf_token() }}",
                "name": fName,
                "admission_fee": admission,
                "sms_count": sms_count,
                "id": id,
            },
            success: function (response) {
                hideEditForm(id);
                if(response){
                    $("#tr-"+id+" #v-name-"+id).html(fName);
                    $("#tr-"+id+" #v-admission-"+id).html(admission);
                    $("#tr-"+id+" #v-sms_count-"+id).html(sms_count);
                    toastr.success('Faculty Successfully Edit.');
                }else{
                    toastr.error('Error In Updating Faculty.');
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    // Add red border to the input fields with errors
                    $("#tr-"+id+" .submit-edit-btn").show();
                    $("#tr-"+id+" .hide-edit-btn").show();
                    $("#tr-"+id+" .spinner-btn").hide();
                    if (errors.sms_count) {
                        $("#tr-"+id+" #sms_count").focus();
                        $("#tr-"+id+" #sms_count").css('border', "1px solid #F00");
                    }
                    if (errors.admission_fee) {
                        $("#tr-"+id+" #admission").focus();
                        $("#tr-"+id+" #admission").css('border', "1px solid #F00");
                    }
                    if (errors.name) {
                        $("#tr-"+id+" #name").focus();
                        $("#tr-"+id+" #name").css('border', "1px solid #F00");
                    }
                }
            }
        });
    }

    function addUser()
    {
        if (!validateForm("user-add-form")) {
            return;
        }
        var formData = new FormData();
        formData.append('employee_id', $('#employee_id').val());
        formData.append('name', $('#name').val());
        formData.append('email', $('#email').val());
        formData.append('role', $('#role').val());
        formData.append('password', $('#password').val());

        formData.append('_token', "{{ csrf_token() }}");

        $.ajax({
            url: '{{ route("user.store") }}',
            type: 'POST',
            data: formData,
            contentType: false,
            cache: false,
            processData: false,
            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
            },
            success: function(response) {
                if(response.status == 'success'){
                    $('#user-modal').modal("hide");
                    toastr.options = {
                        "closeButton" : true,
                        "progressBar" : true
                    }
                    toastr.success(response.message);
                    setTimeout(function() {
                        location.reload();
                    }, 2000); // 2 seconds in milliseconds (1000 milliseconds = 1 second)
                } else {
                    console.log(response);
                    toastr.options = {
                        "closeButton" : true,
                        "progressBar" : true
                    }
                    toastr.error(response.message);
                }
            
            },
            error: function(xhr, status, error) {
                $('.error-section').html("");alert('error');
                // Handle error response
                var errors = xhr.responseJSON.errors;
                if (errors) {
                    $.each(errors, function(key, value) {
                        // Assuming you have an element with id 'error-container'
                        $('.error-section').append('<div class="alert alert-danger" style="padding:5px;">' + value + '</div>');
                    });
                }
                toastr.error(error);
            }
        });
    }
    
    // open confirm modal
    function confirmModal(uid, status, trid)
    {
        rowid = trid;
        var confirmTitle = "{{ __('global.confirmTitle') }}";
        if(status == "active"){
            var confirmContent = "{{ __('user.enable_user') }}";
            $("#uid-"+trid).addClass("table-danger");
        }else{
            var confirmContent = "{{ __('user.disable_user') }}";
            $("#uid-"+trid).addClass("table-success");
        }
        $("#confirm-content-text").html(confirmContent);
        $(".change-status-btn").attr("onclick", "enableDisableStatus('"+uid+"', '"+status+"', '"+trid+"')");
        $('#confirm-modal').modal('show');
    }

    function enableDisableStatus(uid, status, trid)
    {
        $.ajax({
            url: '{{ route("user.changestatus") }}',
            type: 'POST',
            data: {
                "_token": "{{ csrf_token() }}",
                "uid": uid,
                "status": status,
            },
            success: function (response) {
                $("#uid-"+trid).removeClass("table-danger");
                $("#uid-"+trid).removeClass("table-success");
                if(status == "active"){
                    $("#uid-"+trid+" #status-btn").html("Active <i class='fa fa-check-circle'></i>");
                    $("#uid-"+trid+" #status-btn").addClass("custom-success");
                    $("#uid-"+trid+" #status-btn").removeClass("custom-danger");

                    $("#uid-"+trid+" #status-btn").attr("onclick", "confirmModal('"+uid+"', 'inactive', '"+trid+"')");
                }else{
                    $("#uid-"+trid+" #status-btn").html("Inactive <i class='fa fa-times-circle'></i>");
                    $("#uid-"+trid+" #status-btn").addClass("custom-danger");
                    $("#uid-"+trid+" #status-btn").removeClass("custom-success");
                    
                    $("#uid-"+trid+" #status-btn").attr("onclick", "confirmModal('"+uid+"', 'active', '"+trid+"')");
                }
                toastr.success(response.success);
                $('.cancel-btn').click();
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    toastr.error(response.errors);
                }
            }
        });
    }

    $(".cancel-btn").click(function (){
        $("#uid-"+rowid).removeClass("table-danger");
        $("#uid-"+rowid).removeClass("table-success");
    });

    // this function is used to list all user by type. 1=employee. 2=teacher. 3=student
    function getUsers(id, selectID, selectName, resultID, url)
    {
        $("#role").val('0');
        $("#role").trigger('change.select2');
        $("#name").val('');
        $("#email").val('');

        $.ajax({
            url: url,
            type: 'GET',
            headers: { 'X-CSRF-TOKEN': _TOKEN },
            data: {
                "id": id,
                "selectID": selectID,
                "selectName": selectName,
            },
            success: function (response) {
                $('#' + resultID).html(response);
                $('.select2').select2();
            },
            error: function (xhr, status, error) {
                console.error(error);
            }
        });
    }

    // get user info
    function getUserInfo(userid)
    {
        var type = $("#type").val();
        $.ajax({
            url: '{{ route("getUserInfo") }}',
            type: 'POST',
            data:{
                "_token": "{{ csrf_token() }}",
                userid: userid,
                type: type
            },
            success: function(response) {
                $("#name").val(response.name);
                $("#email").val(response.email);
                if(type == 3){
                    $("#role").val('Student');
                    $("#role").trigger('change.select2');
                    $('#role').prop('disabled', true);
                }else if(type == 2){
                    $("#role").val('Teacher');
                    $("#role").trigger('change.select2');
                    $('#role').prop('disabled', true);
                }else{
                    $('#role').prop('disabled', false);
                    $('#role option[value="Student"]').prop('disabled', true);
                    $('#role option[value="Teacher"]').prop('disabled', true);
                }
            },
            error: function(xhr, status, error) {
                toastr.error(error);
            }
        });
    }
    </script>
@endsection