@extends('layouts.merchant')

@section('ext_css')
    <style type="text/css">
        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }
    </style>
@endsection

@section('content')
    @if(session('success'))
        <div class="alert alert-success alert-dismissable">
            <button class="close" data-dismiss="alert"><i class="pci-cross pci-circle"></i></button>
            <strong>Success !</strong>
            {!! Session::get('success') !!}
        </div>
    @elseif(session('failure'))
        <div class="alert alert-danger alert-dismissable">
            <button class="close" data-dismiss="alert"><i class="pci-cross pci-circle"></i></button>
            <strong>Failed !</strong> {{ Session::get('failure') }}
        </div>
    @endif
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Users Management

            </h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12 text-right">
                    @if($can_add)
                        <a href="{{ route('merchant.users.create') }}" class="btn btn-success">ADD NEW <i class="fa fa-plus"></i></a>
                    @else
                        <button class="btn btn-success" disabled>ADD NEW <i class="fa fa-plus"></i></button>
                    @endif
                    <a href="{{ route('merchant.users.export') }}" class="btn btn-primary">EXPORT</a>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <form id="searchForm" class="form-horizontal form-padding" role="search" action="#" method="get" style="padding: 0;">
                        <input type="hidden" name="page" id="page">
                        <div class="form-group">
                            <div class="col-md-2">
                                <input type="text" name="search_key" class="form-control" placeholder="Search " id="search_key" autocomplete="off" value="{{request()->search_key}}">
                            </div>

                            <div class="col-md-1">
                                <select class="form-control" name="per_page" id="per_page">
                                    <option value="20" @if(request()->per_page == 20) selected @endif>20</option>
                                    <option value="40" @if(request()->per_page == 40) selected @endif>40</option>
                                    <option value="60" @if(request()->per_page == 60) selected @endif>60</option>
                                    <option value="80" @if(request()->per_page == 80) selected @endif>80</option>
                                    <option value="100" @if(request()->per_page == 100) selected @endif>100</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <button type="submit" name="search" value="Search" class="btn btn-block btn-primary">
                                    FILTER &nbsp;&nbsp;&nbsp;<i class="pe-7s-filter"></i>
                                </button>
                            </div>
                            @if(request()->search || request()->per_page > 20 || request()->page)
                                <div class="col-md-2">
                                    <button type="button" name="search" value="Search" class="btn btn-block btn-primary clear-filters">
                                        CLEAR &nbsp;&nbsp;&nbsp;<i class="pe-7s-close-circle"></i>
                                    </button>
                                </div>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
            <br>
            <div class="table-responsive">
                <table class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>S.N</th>
                        <th>Type</th>
                        <th>Full Name</th>
                        <th>Username</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Status</th>
                        <th>Operation</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($users as $user)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ strtoupper($user->type) }}</td>
                            <td>{{ $user->full_name }}</td>
                            <td>{{ $user->username }}</td>
                            <td>{{ $user->email }}</td>
                            <td>{{ $user->contact }}</td>
                            <td>

                                @if($user->status)
                                    <span class="label label-success">Active</span>
                                    @if($user->id !== auth()->guard('merchants')->user()->id)
                                        @if(auth()->guard('merchants')->user()->type != 'user' || $user->type == 'user')
                                            <a href="{{ route('merchant.users.status',$user->id) }}" class="text-danger">
                                                <strong>Change</strong>
                                            </a>
                                        @endif
                                    @endif
                                @else
                                    <span class="label label-warning">In-Active</span>
                                    @if($user->id !== auth()->guard('merchants')->user()->id)
                                        @if(auth()->guard('merchants')->user()->type != 'user' || $user->type == 'user')
                                            <a href="{{ route('merchant.users.status',$user->id) }}" class="text-danger">
                                                <strong>Change</strong>
                                            </a>
                                        @endif
                                    @endif
                                @endif
                            </td>
                            <td>
                                @if(auth()->guard('merchants')->user())
                                    @if($user->id !== auth()->guard('merchants')->user()->id)
                                        @if(auth()->guard('merchants')->user()->type != 'user' || $user->type == 'user')
                                            <a href="{{ route('merchant.users.edit',[$user->id]) }}" class="btn btn-info" title="Edit">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                            <button data-toggle="modal" data-target="#password-modal"
                                                    class="btn btn-success password" title="Change Password"
                                                    data-url="{{ route('merchant.users.reset-password',$user->id) }}">
                                                <i class="fa fa-lock"></i>
                                            </button>
                                            <button data-toggle="modal" data-target="#delete-modal"
                                                    data-url="{{ route('merchant.users.destroy',$user->id) }}"
                                                    class="btn btn-danger delete" title="Delete">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        @endif
                                    @endif
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center">No data available in the table ...</td>
                        </tr>
                    @endforelse
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="8">
                            @include('pagination', ['paginator' => $users])
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

    <div class="modal" id="delete-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <strong>If you delete this item you won't be able to undo in the future, do you want to
                        continue?</strong>
                </div>
                <div class="modal-footer">
                    <form action="" id="delete-form" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-danger" id="modal-submit">Yes</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="password-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="" id="pass-form" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h4>Reset Password</h4>
                    </div>
                    <div class="modal-body">
                        <div class="error-message-jsx"></div>
                        <div class="form-group">
                            <label for="">New Password</label>
                            <input type="password" name="new_password" id="new_password" class="form-control" placeholder="*******">
                        </div>
                        <div class="form-group">
                            <label for="">Confirm Password</label>
                            <input type="password" name="confirm_password" id="confirm_password" class="form-control" placeholder="*******" required="true">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-success" id="pw-submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop
@section('ext_js')
    <script>
        $(document).on('click', '.delete', function () {
            var actionUrl = $(this).attr('data-url');

            $('#delete-form').attr('action', actionUrl);

            $('#modal-submit').click(function (e) {
                $(this).attr('disabled', true);
                $(this).html('<i class="fa fa-spinner fa-spin" style=""></i> Please Wait...');
                $('#delete-form').submit();
            })
        });
        $(document).on('click', '.password', function () {
            var actionUrl = $(this).attr('data-url');

            $('#pass-form').attr('action', actionUrl);

            $('.error-message-jsx').html('')
        });

        $('#pw-submit').click(function (e) {
            e.preventDefault();
            $('.error-message-jsx').html('')
            if ($('#new_password').val() == $('#confirm_password').val()) {
                var password = $('#new_password').val();
                var upperCase = new RegExp('[A-Z]');
                var lowerCase = new RegExp('[a-z]');
                var numbers   = new RegExp('[0-9]');
                var symbol    = new RegExp('[_!#%]');
                var validPass = true;
                if (password.length < 9 || password.length > 16) {
                    $('.error-message-jsx').html(`
                        <div class="alert alert-danger alert-dismissable">
                            <button class="close" data-dismiss="alert"><i class="pci-cross pci-circle"></i></button>
                            <strong>Failed !</strong> Your password must have a minimum length of 9 characters and maximum of 16 characters, and must contain at least one lowercase(a-z) alphabetic character,at leaset one uppercase(A-Z) alphabetic character, at least one numeric character(0-9) and at least one special character (!_#%).
                        </div>
                    `);
                    return false;
                }
                if(!password.match(upperCase)) {
                    validPass = false;
                }
                if(!password.match(lowerCase)) {
                    validPass = false;
                }
                if(!password.match(symbol)) {
                    validPass = false;
                }
                if(!password.match(numbers)) {
                    validPass = false;
                }
                if (validPass) {
                    $(this).attr('disabled', true);
                    $(this).html('<i class="fa fa-spinner fa-spin" style=""></i> Please Wait...');
                    $('#pass-form').submit();
                } else{
                    $('.error-message-jsx').html(`
                        <div class="alert alert-danger alert-dismissable">
                            <button class="close" data-dismiss="alert"><i class="pci-cross pci-circle"></i></button>
                            <strong>Failed !</strong> Your password must have a minimum length of 9 characters and maximum of 16 characters, and must contain at least one lowercase(a-z) alphabetic character,at leaset one uppercase(A-Z) alphabetic character, at least one numeric character(0-9) and at least one special character (!_#%).
                        </div>
                    `);
                }
            } else {
                $('.error-message-jsx').html(`
                    <div class="alert alert-danger alert-dismissable">
                        <button class="close" data-dismiss="alert"><i class="pci-cross pci-circle"></i></button>
                        <strong>Failed !</strong> Confirm password doesnot match new password
                    </div>
                `);
            }
        })

        var search = document.getElementById("search_key");
        search.addEventListener("keypress", function(e){
            if(e.which === 13) {
                $('#searchForm').submit()
            }
        });

        var page = document.getElementById("page");
        page.addEventListener("keypress", function(e){
            if(e.which === 13) {
                $('#searchForm').submit()
            }
        });

        $(document).on('change', '#per_page', function(e) {
            e.preventDefault()
            $('#searchForm').submit()
        });

        $(document).on('click','.clear-filters',function(e) {
            e.preventDefault();
            $('#search_key').val('');
            $('#page').val(1);
            $('#per_page').val(20);
            $('#searchForm').submit()
        });

        var delay = (function () {
            var timer = 0;
            return function (callback, ms) {
                clearTimeout(timer);
                timer = setTimeout(callback, ms);
            };
        })()

        let $filter = $('#filter-page');
        $filter.on('keydown', function () {
            delay(function () {            
                $('#page').val($('#filter-page').val());
                $('#searchForm').submit()   
            }, 1000);
        });

    </script>
@endsection