@extends('layouts.authenticated')
@section('title','Users')
@section('users','active')

@section('content')
    <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
    <div class="panel panel-info">
        <div class="panel-heading">
            Users
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-5 col-md-7 col-sm-6">
                    <div class="input-group">
                        <a {{--href="{{ url('users') }}/create"--}} class="btn btn-info btn-add" data-toggle="modal"
                           data-target="#modal-add" data-toggle="tooltip" title="Add Record">
                            <i class="fa fa-user"></i>+ Add User
                        </a>
                    </div>
                </div>
            </div>
            <div id="output" style="margin-top:.5cm">
                {{--<input type="hidden" name="_token" value="{{ csrf_token() }}">--}}
                <table class="table table-striped table-hover" id="user-table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Username</th>
                        <th>Email</th>
                        <th>User Role</th>
                        <th>Store Code</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div id="modal-delete" 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>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete the selected Users?</p>
                    <input type="hidden" value="" id="delete-user-id">
                </div>
                <div class="modal-footer">
                    {{-- <form action="{{ url('users') }}" method="post">--}}
                    <input type="hidden" name="_method" value="delete"/>
                    <button type="submit" class="btn btn-success btn-deactivate">Deactivate</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Cancel
                    </button>
                    {{--  </form>--}}
                </div>
            </div>
        </div>
    </div>
    <div id="modal-add" 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>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <form id="form-add">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <div class="form-group col-sm-12">
                                <label for="Username">Username</label>
                                <input type="text" data-class="username" data-label="Username" name="username"
                                       id="username-create"
                                       class="form-control input-create username"
                                       placeholder="Username" required="" value="{{ old('username') }}">
                            </div>
                            <div class="form-group col-sm-12">
                                <label for="Email Address">Email Adress</label>
                                <input type="text" data-class="email" data-label="Email" name="email"
                                       class="form-control input-create email"
                                       placeholder="Email Address" required="" value="{{ old('emailaddress') }}">
                            </div>
                            {{--  <div class="form-group col-sm-12">
                                  <label for="Location">Location</label>
                                  <input type="text" data-label="Location" name="location"
                                         class="form-control input-create input-location"
                                         placeholder="Location" required="" value="{{ old('location') }}">
                              </div>--}}
                            <div class="form-group col-sm-12">
                                <label for="Location">Location</label>
                                <select class="select2 form-control input-create input-location location"
                                        name="location[]"
                                        data-class="location" data-label="Location"
                                        multiple="multiple" data-placeholder=" Location"
                                        style="width: 100%" disabled>
                                    @foreach($data['location'] as $key => $brand)
                                        <optgroup label="{{$key}}">
                                            @foreach($brand as $location)
                                                <option
                                                    value="{{$location->store_code}}">{{$location->store_code.' - '.$location->store_desc}}</option>
                                            @endforeach
                                        </optgroup>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-sm-12">
                                <label for="User type">User type:</label>
                                <select name="role" data-class="role" data-label="Role"
                                        class="form-control input-create drp-usertype role">
                                    <option value='' hidden>Select roles</option>
                                    @foreach($data['roles'] as $role)
                                        <option value={{$role->id}}>{{$role->description}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-sm-12">
                                <label for="Location">Password</label>
                                <input type="password" data-class="password" data-label="Password" name="password"
                                       class="form-control input-create password"
                                       placeholder="Password" required="">
                            </div>
                            <div class="form-group col-sm-12">
                                <label for="Location">Confirm Password</label>
                                <input type="password" data-class="confirm-password" data-label="Password Confirm"
                                       name="password_confirmation"
                                       class="form-control input-create confirm-password"
                                       placeholder="Confirm Password" required="">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-confirm">Confirm</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
    <div id="modal-edit" 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>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <form id="form-edit">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <input name="_method" type="hidden" value="PATCH">
                            <input name="id" type="hidden" id="user-id">
                            <div class="form-group col-sm-12">
                                <label for="Username">Username</label>
                                <input type="text" data-class="edit-username" data-label="Username" name="username"
                                       id="username"
                                       class="form-control input-update edit-username"
                                       placeholder="Username" required="" value="{{ old('username') }}">
                            </div>
                            <div class="form-group col-sm-12">
                                <label for="Email Address">Email Adress</label>
                                <input type="text" data-class="edit-email" data-label="Email" name="email" id="email"
                                       class="form-control input-update edit-email"
                                       placeholder="Email Address" required="" value="{{ old('emailaddress') }}">
                            </div>
                            {{-- <div class="form-group col-sm-12">
                                 <label for="Location">Location</label>
                                 <input type="text" data-label="Location" name="location" id="location"
                                        class="form-control input-update input-location"
                                        placeholder="Location" required="" value="{{ old('location') }}">
                             </div>--}}
                            <div class="form-group col-sm-12">
                                <label for="Location">Location</label>
                                <select class="select2 form-control input-update input-location edit-location"
                                        name="location[]"
                                        data-class="edit-location" data-label="Location"
                                        multiple="multiple" data-placeholder=" Location"
                                        style="width: 100%" disabled>
                                    @foreach($data['location'] as $key => $brand)
                                        <optgroup label="{{$key}}">
                                            @foreach($brand as $location)
                                                <option
                                                    value="{{$location->store_code}}" {{$location->brand_is_active ? ($location->is_active ? '' : 'disabled') : 'disabled'}}>{{$location->store_code.' - '.$location->store_desc}}</option>
                                            @endforeach
                                        </optgroup>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-sm-12">
                                <label for="User type">User type:</label>
                                <select id="role" data-class="edit-role" data-label="Role" name="role"
                                        class="form-control input-update drp-usertype-update edit-role">
                                    @foreach($data['roles'] as $role)
                                        <option value="{{$role->id}}">{{$role->description}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-sm-12">
                                <label for="status">Status:</label>
                                <select class="form-control" name="status" id="status">
                                    <option value='1'>Activate</option>
                                    <option value='0'>Deactivate</option>
                                </select>
                            </div>
                            <div class="form-group col-sm-12">
                                <label for="Location">Password <label class="text-muted">(optional)</label></label>
                                <input type="password" data-class="edit-password" data-label="Password" name="password"
                                       class="form-control update-password edit-password"
                                       placeholder="Password">
                            </div>
                            <div class="form-group col-sm-12">
                                <label for="Location">Confirm Password <label
                                        class="text-muted">(optional)</label></label>
                                <input type="password" data-class="edit-confirm-password" data-label="Password Confirm"
                                       name="password_confirmation"
                                       class="form-control update-confirm-password edit-confirm-password"
                                       placeholder="Confirm Password">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-update">Update</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('customjs')
    <script type="text/javascript">
        $(document).ready(function () {
            $('.select2').select2({
                tags: true,
                closeOnSelect: false,
                containerCssClass: "input-location location edit-location",
            })

            load()
            userType()

            function userType() {
                $('.drp-usertype, .drp-usertype-update').change(function (e) {
                    if ($(this).val() == 1 || $(this).val() == 2) {
                        $('.input-location').attr('disabled', true).val('').trigger('change')
                    } else {
                        $('.input-location').attr('disabled', false).val('').trigger('change')
                    }
                })
            }

            function load() {
                var table = $('#user-table').dataTable({
                    destroy: true,
                    scrollY: "500px",
                    scrollCollapse: true,
                    ajax: "get-users",
                    columns: [
                        {data: "id"},
                        {data: "username"},
                        {data: "email"},
                        {data: "description"},
                        {data: "location_code"},
                        {
                            data: "is_active",
                            render: function (data, type, row) {
                                var status;
                                if (data == 1) {
                                    status = 'Active'
                                } else {
                                    status = 'Deactivate'
                                }
                                return '<td>' + status + '</td>';
                            }
                        },
                        {
                            data: "id",
                            render: function (data, type, row) {
                                return '<a class="btn btn-primary btn-sm btn-edit" data-toggle="modal" data-username="' + row['username'] + '" data-toggle="tooltip" title="Update Record"><i class="fa fa-pencil"></i></a> '
                                    /* '<a class="btn btn-danger btn-sm btn-delete" data-toggle="modal" data-target="#modal-delete" value="' + row['id'] + '" data-toggle="tooltip" title="Delete Record" /><i class="fa fa-trash"></i></a>'*/;
                            }
                        },
                    ],
                    order: [[0, 'asc']]
                });
            }

            $(document).on('click', '.btn-delete', function (e) {
                $('#delete-user-id').val($(this).attr('value'));
            })

            $(document).on('click', '.btn-edit', function (e) {
                $('.input-update').css('border', '')
                $('.edit-location, .edit-confirm-password, .edit-password').val('').css('border', '')
                var currentRow = $(this).closest("tr");
                var id = currentRow.find("td:eq(0)").text();
                var username = currentRow.find("td:eq(1)").text();
                var email = currentRow.find("td:eq(2)").text();
                var role = currentRow.find("td:eq(3)").text();
                var location = currentRow.find("td:eq(4)").text();
                var status = currentRow.find("td:eq(5)").text();
                $('#user-id').val(id)
                $('#username').val(username)
                $('#email').val(email)
                $('#location').val(location)
                $("#status option").each(function () {
                    this.selected = (this.text == status);
                });
                $("#role option").each(function () {
                    this.selected = (this.text == role);
                });

                $(".input-update.input-location").val(location.split(',')).trigger('change')

                if (role == 'Administrator' || role == 'Support') {
                    $('.input-update.input-location').attr('disabled', true)
                } else {
                    $('.input-update.input-location').attr('disabled', false)
                }

                $('#modal-edit').modal('show')
            })

            $('.btn-add').click(function (e) {
                $('.input-create').val('').css('border', '')
                $('.location').val(null).css('border', '').prop('disabled', true).trigger('change')
            })

            $('.btn-deactivate').click(function (e) {
                $.ajax({
                    url: 'users/' + $('#delete-user-id').val(),
                    type: 'POST',
                    data: {
                        '_token': $('#_token').val(),
                        '_method': 'delete'
                    },
                    dataType: 'html',
                    beforeSend: function () {
                    },
                    success: function () {
                        Command: toastr["warning"]("Deactivated!")
                        load()
                    },
                    complete: function () {
                        $('#modal-delete').modal('hide')
                    }
                });
            })

            $(document).on('click', '.btn-confirm', function (e) {
                var password, confirm_password, error = false, required = []
                confirm_password = $('.input-create.confirm-password').val()
                password = $('.input-create.password').val()

                $('.input-create').each(function (e) {
                    if ($(this).val() == '' || $(this).val() == null) {
                        if ($('.drp-usertype').val() == 1 || $('.drp-usertype').val() == 2) {
                            if ($(this).attr('name') != 'location[]') {
                                console.log($(this).attr('name'))
                                //$(this).css('border', '1px solid red')
                                $('.' + $(this).data('class')).css('border', '1px solid red')
                                error = true;
                                required.push($(this).data('label') + " is required");
                            } else {
                                //$(this).css('border', '')
                                $('.' + $(this).data('class')).css('border', '')
                            }
                        } else {
                            //  $(this).css('border', '1px solid red')
                            $('.' + $(this).data('class')).css('border', '1px solid red')
                            error = true;
                            required.push($(this).data('label') + " is required");
                        }
                    } else {
                        if ($('.drp-usertype').val() == 1 || $('.drp-usertype').val() == 2) {
                            // $(this).css('border', '')
                            $('.' + $(this).data('class')).css('border', '')
                        } else {
                            // $(this).css('border', '')
                            $('.' + $(this).data('class')).css('border', '')
                        }
                    }
                })

                if (!error) {
                    if (password != confirm_password) {
                        error = true;
                        required.push('Password and Confirm Password not match');
                        $('.input-create').each(function (e) {
                            if ($(this).attr('name') == 'password' || $(this).attr('name') == 'password_confirmation') {
                                $('.' + $(this).data('class')).css('border', '1px solid red')
                            }
                        })
                    } else {
                        $('.input-create').each(function (e) {
                            if ($(this).attr('name') == 'password' || $(this).attr('name') == 'password_confirmation') {
                                $('.' + $(this).data('class')).css('border', '')
                            }
                        })
                    }
                }

                if (error) {
                    Command: toastr["error"](required.join("<br>"), "Failed!")
                } else {
                    $.ajax({
                        url: 'users',
                        type: 'POST',
                        data: $('#form-add').serialize(),
                        beforeSend: function () {

                        },
                        success: function (response) {
                            if (response == 'success') {
                                Command: toastr["success"]("Success!")
                                $('#user-table').DataTable().ajax.reload();
                                $('#modal-add').modal('hide')
                                $('#username-create').css('border', '')
                            } else {
                                $('#username-create').css('border', '1px solid red')
                                Command: toastr["error"]("Username already exist!")
                            }
                        }
                    });
                }
            })

            $('.btn-update').click(function (e) {
                var password, confirm_password, error = false, required = []
                confirm_password = $('.update-confirm-password')
                password = $('.update-password')

                $('.input-update').each(function (e) {
                    if ($(this).val() == '' || $(this).val() == null) {
                        if ($('.drp-usertype-update').val() == 1 || $('.drp-usertype-update').val() == 2) {
                            if ($(this).attr('name') != 'location[]') {
                                $('.' + $(this).data('class')).css('border', '1px solid red')
                                error = true;
                                required.push($(this).data('label') + " is required");
                            } else {
                                $('.' + $(this).data('class')).css('border', '')
                            }
                        } else {
                            $('.' + $(this).data('class')).css('border', '1px solid red')
                            error = true;
                            required.push($(this).data('label') + " is required");
                        }
                    } else {
                        if ($('.drp-usertype-update').val() == 1 || $('.drp-usertype-update').val() == 2) {
                            $('.' + $(this).data('class')).css('border', '')
                        } else {
                            $('.' + $(this).data('class')).css('border', '')
                        }
                    }
                })

                if (!error) {
                    if (password.val() != confirm_password.val()) {
                        error = true;
                        required.push('Password and Confirm Password not match');
                        password.css('border', '1px solid red')
                        confirm_password.css('border', '1px solid red')
                    } else {
                        password.css('border', '')
                        confirm_password.css('border', '')
                    }
                }

                if (error) {
                    Command: toastr["error"](required.join("<br>"), "Failed!")
                } else {
                    $.ajax({
                        url: 'users/' + $('#user-id').val(),
                        type: 'POST',
                        data: $('#form-edit').serialize(),
                        beforeSend: function () {
                        },
                        success: function (response) {
                            if (response == 'success') {
                                Command: toastr["success"]("Success!")
                                $('#user-table').DataTable().ajax.reload();
                                $('#modal-edit').modal('hide')
                                $('#username').css('border', '')
                            } else {
                                $('#username').css('border', '1px solid red')
                                Command: toastr["error"]("Username already exist!")
                            }
                        },
                        complete: function () {
                        }
                    });
                }
            })
        })
    </script>
@endsection