@extends('Admin.include.app')
@section('content')
    <style>
        .input-group .fas {
            color: black;
        }
    </style>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">

                    <div class="card card-primary card-outline">
                        <div class="card-body box-profile">
                            <div class="text-center">
                                <img class="profile-user-img img-fluid img-circle"
                                    src="{{ !empty($data->profile_photo_path) ? asset('/images/user/' . $data->profile_photo_path) : asset('/dist/img/user2-160x160.jpg') }}"
                                    alt="{{ $data->name }}">
                            </div>
                            <h3 class="profile-username text-center">{{ $data->name }}</h3>
                            <p class="text-muted text-center">{{ $data->roles[0]->name }}</p>
                            <ul class="list-group list-group-unbordered mb-3">
                                <li class="list-group-item">
                                    <b>Mobile:</b> <a class="float-right">{{ $data->mobile }}</a>
                                </li>
                                <li class="list-group-item">
                                    <b>Email:</b> <a class="float-right">{{ $data->email }}</a>
                                </li>

                            </ul>
                        </div>

                    </div>

                </div>

                <div class="col-md-9">
                    <div class="card card-primary card-outline">
                        <div class="card-body">
                            <div class="tab-pane active" id="settings">
                                <form class="form-horizontal" method="POST" id="addForm"
                                    action="{{ route('admin.profile.store') }}" enctype="multipart/form-data">
                                    @csrf
                                    <div class="form-group row">
                                        <label for="profile_photo_path"
                                            class="col-sm-2 col-form-label text-uppercase font-weight-bold">Profile:
                                        </label>
                                        <div class="input-group col-sm-10">
                                            <input name="profile_photo_path" type="file" id="profile_photo_path"
                                                class="form-control @error('profile_photo_path') is-invalid @enderror"
                                                value="{{ old('profile_photo_path') }}">
                                        </div>
                                        @error('profile_photo_path')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    <div class="form-group row">
                                        <label for="name"
                                            class="col-sm-2 col-form-label text-uppercase font-weight-bold">Name:*</label>
                                        <div class="input-group col-sm-10">
                                            <input name="name" type="text" id="name"
                                                class="form-control @error('name') is-invalid @enderror"
                                                value="{{ !empty($data->name) ? $data->name : old('name') }}" required
                                                placeholder="Name" autocomplete="name" autofocus>
                                        </div>
                                        @error('name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    <div class="form-group row">
                                        <label for="email"
                                            class="col-sm-2 col-form-label text-uppercase font-weight-bold">Email:*</label>
                                        <div class="input-group col-sm-10">
                                            <input name="email" type="email" id="email"
                                                class="form-control @error('email') is-invalid @enderror"
                                                value="{{ !empty($data->email) ? $data->email : old('email') }}" required
                                                placeholder="Email" autocomplete="email" autofocus>
                                        </div>
                                        @error('email')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    <div class="form-group row">
                                        <label for="mobile"
                                            class="col-sm-2 col-form-label text-uppercase font-weight-bold">Mobile:*</label>
                                        <div class="input-group col-sm-10">
                                            <input name="mobile" type="text" maxlength="10" id="mobile"
                                                class="form-control @error('mobile') is-invalid @enderror"
                                                value="{{ !empty($data->mobile) ? $data->mobile : old('mobile') }}"
                                                {{ $data->roles[0]->id == 1 ? '' : 'required' }} placeholder="Mobile"
                                                autocomplete="mobile" autofocus
                                                oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');">
                                        </div>
                                        @error('mobile')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    <div class="form-group row">
                                        <label for="password"
                                            class="col-sm-2 col-form-label text-uppercase font-weight-bold">Password (Change
                                            Password or leave it blank)</label>
                                        <div class="input-group col-sm-10">
                                            <input name="password" type="text" id="password"
                                                class="form-control @error('password') is-invalid @enderror"
                                                value="{{ old('password') }}" placeholder="Password"
                                                autocomplete="password" autofocus>
                                        </div>
                                        @error('password')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    <div class="form-group row">
                                        <label for="password_confirmation"
                                            class="col-sm-2 col-form-label text-uppercase font-weight-bold">Confirm
                                            Password</label>
                                        <div class="input-group col-sm-10">
                                            <input name="password_confirmation" type="text" id="password"
                                                class="form-control @error('password') is-invalid @enderror"
                                                value="{{ old('password_confirmation') }}" placeholder="confirm password"
                                                autocomplete="password_confirmation" autofocus>
                                        </div>
                                        @error('password')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>

                                    <div class="form-group row">
                                        <div class="offset-sm-2 col-sm-10">
                                            <button type="submit" class="btn btn-danger">Submit</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
@endsection
@section('script')
    <script>
        $(function() {
            $(document).ready(function() {
                $.validator.methods.isJSON = function(value, element) {
                    if (typeof(value) !== 'string') {
                        return false;
                    }
                    try {
                        JSON.parse(value);
                        return true;
                    } catch (e) {
                        return false;
                    }
                }
                $("#addForm").validate({
                    rules: {
                        profile_photo_path: {
                            required: false,
                            accept: "image/jpg,image/jpeg,image/png"
                        },
                        name: {
                            required: true,
                        },
                        email: {
                            required: true,
                            email: true,
                        },
                        mobile: {
                            required: true,
                        },
                        password: {
                            required: false,
                            minlength: 8,
                        },
                        password_confirmation: {
                            required: false,
                            equalTo: "#password"
                        },
                    },
                    messages: {
                        name: {
                            required: "Please enter a name"
                        },
                    },
                    errorElement: "em",
                    errorPlacement: function(error, element) {
                        // Add the `help-block` class to the error element
                        error.addClass("help-block");

                        if (element.prop("type") === "checkbox") {
                            error.insertAfter(element.parent("label"));
                        } else {
                            error.insertAfter(element);
                        }
                    },
                    highlight: function(element, errorClass, validClass) {
                        $(element).parents(".col-sm-5").addClass("has-error").removeClass(
                            "has-success");
                    },
                    unhighlight: function(element, errorClass, validClass) {
                        $(element).parents(".col-sm-5").addClass("has-success").removeClass(
                            "has-error");
                    }
                });
            });
        });
    </script>
@endsection
