@extends('dashboard.master')
@section('title', 'User List')
@push('css')
    <link rel="stylesheet" href="{{ asset('backend/DataTables/datatables.min.css') }}">
    <link rel="stylesheet" href="{{ asset('backend/css/toggle.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css"
        integrity="sha512-O03ntXoVqaGUTAeAmvQ2YSzkCvclZEcPQu1eqloPaHfJ5RuNGiS4l+3duaidD801P50J28EHyonCV06CUlTSag=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.0/css/toastr.css" rel="stylesheet" />
@endpush

@section('content')

    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="page-title-wrapper">
                    <div class="page-title-heading">
                        <div class="page-title-icon">
                            <i class="nav-icon fas fa-mosque"></i>
                        </div>
                        <span>
                            <b>User List</b>
                        </span>
                    </div>

                    <div class="page-title-actions">
                        <a title="Back" href="{{ url()->previous() }}" type="button" class="btn btn-sm btn-dark">
                            <i class="fas fa-arrow-left mr-1"></i>
                            Back
                        </a>
                        <a title="Create" href="#" type="button" class="btn btn-sm btn-primary" data-toggle="modal"
                            data-target="#addClass">
                            <i class="fas fa-plus mr-1"></i>
                            Create
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-body">
                        <table id="data_table" class="table table-bordered table-striped data-table table-hover">
                            <thead>
                                <tr>
                                    <th>SN</th>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th>Role</th>
                                    <th>Pass</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>

    {{-- add modal --}}
    <div class="modal fade" id="addClass" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="demoModalLabel">{{ __('Create User') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form class="forms-sample add-class" enctype="multipart/form-data" action="#" method="POST">
                        @csrf

                        <div class="form-group row">
                            <label for="name" class="col-sm-2 col-form-label">Name<span
                                    class="text-red">*</span></label>

                            <div class="col-sm-10">
                                <input type="text" name="name" id="name" value="{{ old('name') }}"
                                    class="form-control @error('name') is-invalid @enderror" placeholder="Enter name"
                                    required>
                            </div>

                        </div>

                        <div class="form-group row">
                            <label for="phone" class="col-sm-2 col-form-label">Phone<span
                                    class="text-red">*</span></label>

                            <div class="col-sm-10">
                                <input type="text" name="phone" id="phone" value="{{ old('phone') }}"
                                    class="form-control @error('phone') is-invalid @enderror" placeholder="Enter phone"
                                    required>
                            </div>

                        </div>

                        <div class="form-group row">
                            <label for="email" class="col-sm-2 col-form-label">Email<span
                                    class="text-red">*</span></label>

                            <div class="col-sm-10">
                                <input type="text" name="email" id="email" value="{{ old('email') }}"
                                    class="form-control @error('email') is-invalid @enderror" placeholder="Enter email"
                                    required>
                            </div>

                        </div>

                        <div class="form-group row">
                            <label for="amount" class="col-sm-2 col-form-label">Type<span
                                    class="text-red">*</span></label>
                            <div class="col-sm-10">
                                <select name="role_id" id="roleId" class="form-control" required>
                                    <option value="">Select One</option>
                                   @foreach ($roles as $role )
                                       <option value="{{ $role->id }}">{{ $role->name }}</option>
                                   @endforeach
                                </select>

                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="password" class="col-sm-2 col-form-label">Password<span
                                    class="text-red">*</span></label>

                            <div class="col-sm-10">
                                <input type="text" name="password" id="password" value="{{ old('password') }}"
                                    class="form-control @error('password') is-invalid @enderror"
                                    placeholder="Enter password" required>
                            </div>

                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">{{ __('Close') }}</button>
                    <button type="button" id="save" class="btn btn-primary">{{ __('Create') }}</button>
                </div>
            </div>
        </div>
    </div>

    {{-- edit modal --}}
    <div class="modal fade" id="editClass" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="demoModalLabel">{{ __('Edit User') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form id="edit-menu" action="#">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="" id="editId">
                        <div class="form-group row">
                            <label for="name" class="col-sm-2 col-form-label">Name<span
                                    class="text-red">*</span></label>

                            <div class="col-sm-10">
                                <input type="text" name="name" id="nameEdit" value="{{ old('name') }}"
                                    class="form-control @error('name') is-invalid @enderror" placeholder="Enter name"
                                    required>
                            </div>

                        </div>

                        <div class="form-group row">
                            <label for="phone" class="col-sm-2 col-form-label">Phone<span
                                    class="text-red">*</span></label>

                            <div class="col-sm-10">
                                <input type="text" name="phone" id="phoneEdit" value="{{ old('phone') }}"
                                    class="form-control @error('phone') is-invalid @enderror" placeholder="Enter phone"
                                    required>
                            </div>

                        </div>

                        <div class="form-group row">
                            <label for="email" class="col-sm-2 col-form-label">Email<span
                                    class="text-red">*</span></label>

                            <div class="col-sm-10">
                                <input type="text" name="email" id="emailEdit" value="{{ old('email') }}"
                                    class="form-control @error('email') is-invalid @enderror" placeholder="Enter email"
                                    required>
                            </div>

                        </div>

                        <div class="form-group row">
                            <label for="amount" class="col-sm-2 col-form-label">Type<span
                                    class="text-red">*</span></label>
                            <div class="col-sm-10">
                                <select name="role_id" id="roleIdEdit" class="form-control" required>
                                    <option value="">Select One</option>
                                   @foreach ($roles as $role )
                                       <option value="{{ $role->id }}">{{ $role->name }}</option>
                                   @endforeach
                                </select>

                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="password" class="col-sm-2 col-form-label">Password<span
                                    class="text-red">*</span></label>

                            <div class="col-sm-10">
                                <input type="text" name="password" id="passwordEdit" value="{{ old('password') }}"
                                    class="form-control @error('password') is-invalid @enderror"
                                    placeholder="Enter password" required>
                            </div>

                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">{{ __('Close') }}</button>
                    <button type="button" id="update" class="btn btn-primary">{{ __('Update') }}</button>
                </div>
            </div>
        </div>
    </div>
    {{-- password modal --}}
    <div class="modal fade" id="passClass" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="demoModalLabel">{{ __('Changed Password') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form id="pass-menu" action="#">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="" id="passId">

                        <label for="email" class="col-sm-2 col-form-label hideCls">Email<span
                                class="text-red">*</span></label>
                        <div class="form-group row hideCls">
                            <div class="col-sm-12">
                                <input type="text" name="email" id="emailChange" value="{{ old('email') }}"
                                    class="form-control @error('email') is-invalid @enderror" placeholder="Enter email"
                                    required>
                            </div>

                        </div>

                        <label for="password" class="col-sm-12 col-form-label">Password<span
                                class="text-red">*</span></label>
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <div class="input-group">
                                    <input type="password" name="password" id="passwordUpdate"
                                        value="{{ old('password') }}"
                                        class="form-control @error('password') is-invalid @enderror"
                                        placeholder="Enter password" required minlength="6">
                                    <div class="input-group-append">
                                        <span class="input-group-text" id="togglePassword"><i
                                                class="fa fa-eye"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <label for="password" class="col-sm-12 col-form-label">Confirm Password<span
                                class="text-red">*</span></label>
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <div class="input-group">
                                    <input type="password" name="password" id="passwordUpdateConfirm"
                                        value="{{ old('password') }}"
                                        class="form-control @error('password') is-invalid @enderror"
                                        placeholder="Enter confirm password" required minlength="6">
                                    <div class="input-group-append">
                                        <span class="input-group-text" id="togglePasswordConfirm"><i
                                                class="fa fa-eye"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <span id="passwordMatchError" class="text-danger" style="display:none;">Passwords do not
                            match!</span>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">{{ __('Close') }}</button>
                    <button type="button" id="passUpdate" class="btn btn-primary">{{ __('Update') }}</button>
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <script src="{{ asset('backend/DataTables/datatables.min.js') }}"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"
            integrity="sha512-Zq9o+E00xhhR/7vJ49mxFNJ0KQw1E1TMWkPTxrWcnpfEFDEXgUiwJHIKit93EW/XxE31HSI5GEOW06G6BF1AtA=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.0/js/toastr.js"></script>
        <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
        <script>
            // add menu
            $(document).ready(function($) {
                $('#save').on('click', function(event) {
                    event.preventDefault();
                    var url = "{{ route('user.store') }}";
                    var name = $('#name').val();
                    var phone = $('#phone').val();
                    var email = $('#email').val();
                    var roleId = $('#roleId').val();
                    var password = $('#password').val();

                    $.ajax({
                        url: url,
                        type: "get",
                        data: {
                            name: name,
                            phone: phone,
                            email: email,
                            role_id: roleId,
                            password: password,
                        },
                        success: function(data) {
                            if (data.success === true) {
                                location.reload();
                                toastr.success(data.message);
                                $('#add-class').trigger('clear');
                                $('#add-class')[0].reset();
                            } else {
                                toastr.error(data.message);
                                $('#add-class').trigger('clear');
                                $('#add-class')[0].reset();
                                $('#addClass').modal('show');
                            }
                        },

                    });
                    $.noConflict();
                    $('#addClass').modal('hide');
                });
            });

            //edit menu
            $('#data_table').on('click', '#edit[href]', function(e) {
                e.preventDefault();
                var url = $(this).attr('href');

                $.ajax({
                    type: "GET",
                    url: url,
                    success: function(resp) {
                        $('#nameEdit').val(resp.name);
                        $('#emailEdit').val(resp.email);
                        $('#phoneEdit').val(resp.phone);
                        $('#roleIdEdit').val(resp.role_id);
                        $('#passwordEdit').val(resp.show_pass);
                        $('#editId').val(resp.id);
                    }
                });
            });

            $('#update').on('click', function(event) {
                event.preventDefault();
                var id = $('#editId').val();
                var name = $('#nameEdit').val();
                var phone = $('#phoneEdit').val();
                var email = $('#emailEdit').val();
                var roleId = $('#roleIdEdit').val();
                var password = $('#passwordEdit').val();
                var url = '{{ route('user.update', ':id') }}';

                $.ajax({
                    url: url.replace(':id', id),
                    'type': 'GET',
                    'data': {
                        name: name,
                        phone: phone,
                        email: email,
                        role_id: roleId,
                        password: password,
                    },
                    success: function(data) {
                        if (data.success === true) {
                            toastr.success(data.message);
                            $('#data_table').DataTable().ajax.reload();
                            $('#editClass').modal('hide');
                        } else {
                            toastr.error(data.message);
                            $('#editClass').modal('show');
                        }
                    }
                });

            });

            $('#data_table').on('click', '#pass[href]', function(e) {
                e.preventDefault();
                var url = $(this).attr('href');

                $.ajax({
                    type: "GET",
                    url: url,
                    success: function(resp) {
                        $('#emailChange').val(resp.email);
                        $('#passId').val(resp.id);
                        if (resp.type == 1) {
                            $('.hideCls').show();
                        } else {
                            $('.hideCls').hide();
                        }
                    }
                });
            });

            $('#passUpdate').on('click', function(event) {
                event.preventDefault();
                var id = $('#passId').val();
                var password = $('#passwordUpdate').val();
                var email = $('#emailChange').val();
                var confirmPassword = $('#passwordUpdateConfirm').val();

                if (password.length < 6 || confirmPassword.length < 6) {
                    toastr.error('Password must be at least 6 characters');
                    return;
                }

                if (password !== confirmPassword) {
                    $('#passwordMatchError').show();
                    return;
                } else {
                    $('#passwordMatchError').hide();
                }

                var url = '{{ route('user.password.update', ':id') }}';

                $.ajax({
                    url: url.replace(':id', id),
                    type: 'POST',
                    data: {
                        email: email,
                        password: password,
                        password_confirmation: confirmPassword,
                        _token: '{{ csrf_token() }}',
                    },
                    success: function(data) {
                        if (data.success === true) {
                            toastr.success(data.message);
                            $('#data_table').DataTable().ajax.reload();
                            $('#passClass').modal('hide');
                        } else {
                            toastr.error(data.message);
                            $('#passClass').modal('show');
                        }
                    }
                });
            });

            $('#togglePassword').on('click', function() {
                var passwordField = $('#passwordUpdate');
                var type = passwordField.attr('type') === 'password' ? 'text' : 'password';
                passwordField.attr('type', type);
                $(this).find('i').toggleClass('bx-hide bx-show');
            });

            $('#togglePasswordConfirm').on('click', function() {
                var confirmPasswordField = $('#passwordUpdateConfirm');
                var type = confirmPasswordField.attr('type') === 'password' ? 'text' : 'password';
                confirmPasswordField.attr('type', type);
                $(this).find('i').toggleClass('bx-hide bx-show');
            });


            $(document).ready(function() {
                var dTable = $('#data_table').DataTable({
                    order: [],
                    lengthMenu: [
                        [10, 25, 50, 100, -1],
                        [10, 25, 50, 100, "All"]
                    ],
                    processing: true,
                    responsive: false,
                    serverSide: true,
                    scrollX: true,
                    autoWidth: false,
                    scroller: {
                        loadingIndicator: false
                    },
                    language: {
                        processing: '<i class="ace-icon fa fa-spinner fa-spin orange bigger-500" style="font-size:60px;text-align:center;"></i>'
                    },
                    pagingType: "full_numbers",
                    ajax: {
                        url: "{{ route('user') }}",
                        type: "get"
                    },

                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex',
                            searchable: true,
                            orderable: true
                        },
                        {
                            data: 'name',
                            name: 'name'
                        },
                        {
                            data: 'phone',
                            name: 'phone'
                        },
                        {
                            data: 'email',
                            name: 'email'
                        },
                        {
                            data: 'role',
                            name: 'role'
                        },
                        {
                            data: 'show_pass',
                            name: 'show_pass'
                        },
                        {
                            data: 'action',
                            searchable: false,
                            orderable: false
                        }
                    ],
                    dom: "<'row'<'col-sm-2'l><'col-sm-7 text-center'B><'col-sm-3'f>>tipr",
                    buttons: [{
                            extend: 'copy',
                            className: 'btn-sm btn-info',
                            title: 'User List',
                            header: true,
                            footer: true,
                        },
                        {
                            extend: 'excel',
                            className: 'btn-sm btn-success',
                            title: 'User List',
                            header: true,
                            footer: true,
                            exportOptions: {
                                columns: [0, 1, 2, 3, 4, 5],
                                stripHtml: true
                            },

                        },

                        {
                            extend: 'print',
                            className: 'btn-sm btn-danger',
                            title: 'User List',
                            pageSize: 'A2',
                            header: true,
                            footer: true,
                            orientation: 'landscape',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
                        {
                            extend: 'colvis',
                            className: 'btn-sm btn-warning',
                            text: 'Column Visibility',
                            title: 'Column Visibility',
                            columns: ':not(:first-child)'
                        }
                    ],
                });
            });

            $('#data_table').on('click', '.btn-delete[data-remote]', function(e) {
                e.preventDefault();

                $.ajaxSetup({
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    }
                });

                const url = $(this).data('remote');
                swal({
                    title: `Are you sure?`,
                    text: "Want to delete this record?",
                    buttons: true,
                    dangerMode: true,
                }).then((willDelete) => {
                    if (willDelete) {
                        $.ajax({
                            url: url,
                            type: 'get',
                            dataType: 'json',
                            data: {
                                submit: true,
                                _method: 'delete',
                                _token: "{{ csrf_token() }}"
                            }
                        }).always(function(data) {
                            $('#data_table').DataTable().ajax.reload();
                            if (data.success === true) {
                                toastr.success(data.message, {
                                    positionClass: 'toast-bottom-full-width',
                                });
                            } else {
                                toastr.error(data.message, {
                                    positionClass: 'toast-bottom-full-width',
                                });
                            }
                        });
                    }
                });
            });

            //  toastr.options.timeOut = 300;
            @if (Session::has('success'))
                toastr.options = {
                    "closeButton": true,
                    "progressBar": true,
                    "timeOut": 2000
                };

                toastr.success("{{ session('success') }}");
            @endif

            @if (Session::has('error'))
                toastr.options = {
                    "closeButton": true,
                    "progressBar": true
                };
                toastr.error("{{ session('error') }}");
            @endif
        </script>
    @endpush
@endsection