@extends('layouts.master')
@section('title') Edit Profile @endsection
@section('css')
<link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/libs/summernote/summernote.min.css')}}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" />
@endsection
@section('content')
@component('common-components.breadcrumb')
@slot('title') Edit Profile @endslot
@endcomponent
<style>
.form-control{
	color: #314667 !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
            .success-msg,.error-msg {
                margin: 10px 0;
                padding: 10px;
                border-radius: 3px 3px 3px 3px;
              }
              .error-msg {
                color: #D8000C;
                background-color: #FFBABA;
              }
              .success-msg {
                color: #270;
                background-color: #DFF2BF;
              }


              .field-icon {
         float: right;
         margin-left: -25px;
         margin-top: -25px;
         position: relative;
         margin-right: 10px;
         z-index: 2;
     }


</style>

<div class="row">
    <div class="col-12">
        <div class="card mb-2">
           <div class="card-body">

            @if (Session::get('error'))
            <div class="error-msg alert">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <i class="fa fa-times-circle"></i>
            {{ Session::get('error') }}
            </div>
            @endif

            <!-- For Success Messages -->
            @if (Session::get('success'))
            <div class="success-msg alert">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <i class="fa fa-check"></i>
            {{ Session::get('success') }}
            </div>
            @endif

            <form name="frm1" id="frm1" class="needs-validation" method="post" enctype="multipart/form-data" action="{{route('profile.update_admin_profile')}}" novalidate>
                 @csrf

                 <div class="form-group row mb-4">
                    <label for="projectname" class="col-form-label col-lg-2"> Name <span style="color:red;">*</span></label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" name="name" id="name" placeholder="Enter your name" required value="{{ ($name != "")? $name : "" }}">
                    </div>
                  </div>

                 <div class="form-group row mb-4">
                    <label for="projectname" class="col-form-label col-lg-2"> Email <span style="color:red;">*</span></label>
                    <div class="col-lg-10">
                        <input type="email" class="form-control" name="email" id="email" placeholder="Enter your email" required value="{{ ($email != "")? $email : "" }}" disabled>
                    </div>
                  </div>

                 <div class="form-group row mb-4">
                    <label for="projectname" class="col-form-label col-lg-2">Mobile Number<span style="color:red;">*</span></label>
                    <div class="col-lg-10">
                        <input type="number"  class="form-control"  name="mobile_number" id="mobile_number" placeholder="Enter your mobile number" required value="{{ ($mobile_number != "")? $mobile_number : "" }}">
                    </div>
                  </div>

                  <div class="form-group row mb-4">
                    <label for="projectname" class="col-form-label col-lg-2">Profile Picture</label>
                    <div class="col-lg-10">
                                <div class="custom-file">
                                    <input type="file" name="image" class="image custom-file-input" id="customFile">
                                    <label class="custom-file-label" for="customFile">Choose file</label>
                                </div>
                                <!-- <input type="file" name="image" class="image custom-file-input"> -->
                    <input type="hidden" name="imagename" id="imagename">
                    <input type="hidden" name="oldname" value="{{$profile_image}}">
                    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="modalLabel">Crop Image</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div class="img-container">
                                        <div class="row">
                                            <div class="col-md-8">
                                                <img id="image" src="https://avatars0.githubusercontent.com/u/3456749">
                                            </div>
                                            <div class="col-md-4">
                                                <div class="preview"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                    <button type="button" class="btn btn-primary" id="crop">Crop</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 mt-3">
                        <img src="" alt="" class="updateprofile rounded-circle">
                    </div>
                    <div class="col-md-2 mt-3">
                        <img src="{{ asset('/upload/users/') }}/{{$profile_image}}" alt="" class="updateprofile rounded-circle" id="update_profile_old">
                    </div>

                    </div>

                        </div>
                  <div class="row justify-content-end">
                    <div class="col-lg-10">
                            <button class="btn btn btn-success" type="submit" id="save">Update Profile</button>
                            <a href="../admin/dashboard" class="btn btn-danger">Cancel</a>
                     </div>
                    </div>

                </form>
            </div>
        </div>
    </div> <!-- end col -->
</div>
<!-- end row -->
@endsection
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/additional-methods.min.js" integrity="sha512-6S5LYNn3ZJCIm0f9L6BCerqFlQ4f5MwNKq+EthDXabtaJvg3TuFLhpno9pcm+5Ynm6jdA9xfpQoMz2fcjVMk9g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(function(){
            $("form[name='frm1']").validate({


            rules: {
                email:{
                    required: true,
                },
                mobile_number: {
                required: true,
              },

            },
            // Specify validation error messages
            messages: {
                email: {
                required: "Please provide a email address",
               },
               mobile_number: {
                required: "Please provide a mobile number",

              },
           },
            submitHandler: function(form) {
              form.submit();
            }
          });
        });
</script>

<script>
    var $modal = $('#modal');
    var image = document.getElementById('image');
    var cropper;

    $("body").on("change", ".image", function(e) {
        var files = e.target.files;
        var done = function(url) {
            image.src = url;
            $modal.modal('show');
        };
        var reader;
        var file;
        var url;

        if (files && files.length > 0) {
            file = files[0];

            if (URL) {
                done(URL.createObjectURL(file));
            } else if (FileReader) {
                reader = new FileReader();
                reader.onload = function(e) {
                    done(reader.result);
                };
                reader.readAsDataURL(file);
            }
        }
    });

    $modal.on('shown.bs.modal', function() {
        cropper = new Cropper(image, {
            aspectRatio: 1,
            viewMode: 3,
            preview: '.preview'
        });
    }).on('hidden.bs.modal', function() {
        cropper.destroy();
        cropper = null;
    });

    $("#crop").click(function() {
            var origin = window.location.origin;
        
        canvas = cropper.getCroppedCanvas({
            width: 160,
            height: 160,
        });

        canvas.toBlob(function(blob) {
            url = URL.createObjectURL(blob);
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function() {
                var base64data = reader.result;

                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "{{route('uploadCropImage_user') }}",
                    data: {
                        '_token': "{{ csrf_token() }}",
                        'image': base64data,
                    },
                    success: function(data) {
                        console.log(data);
                        $('.updateprofile').attr('src', origin + '/' + data.image);
                        $('#imagename').val(data.imagename);
                        $("#update_profile_old").css('display', 'none');
                        $modal.modal('hide');
                        alert("Crop image successfully uploaded");
                    }
                });
            }
        });
    })
</script>


@endsection