@extends('admin.layouts.app')
@section('title', 'User Edit')
@section('content')
<div class="row">
    <div class="col-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">
                    <div class="d-flex ml-auto">
                        User Edit
                        <a href="{{ route('admin.users.list') }}" class="btn btn-primary ml-auto" >Back </a>
                    </div>
                </h4>
                <form class="forms-sample" id="userForm" action="{{  route('admin.users.update', $user->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="name">Name</label>
                                <div >
                                    <input type="text" class="form-control" name="name" value="{{$user->name}}" id="name" placeholder="Enter name">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="email">Email</label>
                                <div >
                                    <input type="text" class="form-control" name="email" readonly value="{{$user->email}}" id="email" placeholder="Enter email">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="phone">Phone</label>
                                <div >
                                    <input type="text" class="form-control" name="phone" value="{{$user->phone}}" id="phone" placeholder="Enter Phone">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="form-group" >
                                <label for="image">Image</label>
                                <input type="file" class="form-control" name="image" id="image" accept="image/*" >
                            </div>
                        </div>

                            <div class="col-md-12">
                                <div class="form-group row">
                                    @if(isset($user) && $user->getFirstMediaUrl($image_enum))
                                        <div class="logo-image">
                                            <img src="{{ $user->getFirstMediaUrl($image_enum) }}" alt="" id="showPreview" >
                                        </div>
                                    @else
                                        <div class="logo-image">
                                            <img src="" alt="" id="showPreview" >
                                        </div>
                                    @endif
                                </div>
                            </div>

                    </div>
                    <button type="submit" class="btn btn-primary mr-2" id="submit">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#showPreview').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#image").change(function() {
        readURL(this);
    });
    $('#userForm').validate({
        rules: {
            name: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true
            },
        },  
        messages: {
            name: {
                required: "Please enter name"
            },
            email: {
                required: "Please enter email",
                email: "Please enter valid email"
            },
            phone: {
                required: "Please enter phone"
            },
        },
        errorClass: 'text-danger',
    })
</script>
@endsection