@extends('layouts.front-end.body')

@section('content')
    <div class="wrapper">

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper" style="min-height: 923px;">
            <div class="curve"></div>
            <div class="toast" id="alert_toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-body text-white">
                </div>
            </div>
            <div id="toastsContainerTopRight" class="toasts-top-right fixed"></div>
            <!-- Content Header (Page header)-->
            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <!--<h1 class="m-0">Manage Profile</h1>-->
                        </div>

                    </div>
                    <!--<hr class="border-primary">-->
                </div>
            </div>
            <!-- /.content-header -->

            <section class="content">
                <div class="container-fluid">
                    <style>
                        @media only screen and (max-width: 767px) {
                            .modal-header {
                                border-radius: 0;
                                background-color: #ffffff;
                                color: #fff;
                                height: 0;
                                /* font-size: 30px; */
                            }
                        }
                    </style>


                    <div class="container-fluid">

                        <div id="msg"></div>

                        <form action="" id="manage-user" autocomplete="off">
                            <input type="hidden" name="id" value="1400">
                            <div class="col-md-12" style="text-align:center">
                                <h2 style="color:#a20101">รูปโปรไฟล์ของฉัน</h2>
                                <div class="image_area">

                                    <label for="upload_image">
                                        <img src="{{ asset('/front-end/assets/uploads/client.png') }}" id="uploaded_image" class="img-responsive img-circle">
                                        <div class="overlay">
                                            <div class="text">คลิกเพื่อเปลี่ยนรูปภาพ</div>
                                        </div>
                                        <input type="file" name="avatar" class="image" id="upload_image"
                                            style="display:none">
                                    </label>

                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-12">
                        <div class=" d-flex w-100  mt-5 justify-content-center align-items-center p-2">

                            <button class="col-12 btn btn-default btn-lg  mx-2" onclick="history.back()">ยกเลิก</button>

                        </div>
                    </div>

                    <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 Before Upload</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 src="" id="sample_image">
                                            </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>

                    <style>
                        #uni_modal .modal-footer {
                            display: none
                        }

                        #uni_modal .card {
                            box-shadow: none;
                        }

                        #uni_modal .modal-footer.display {
                            display: flex
                        }
                    </style>
                    <style>
                        img#cimg {
                            max-height: 15vh;
                            /*max-width: 6vw;*/
                        }
                    </style>

                    <script>
                        $(document).ready(function() {

                            /*function readURL(input)
                          {
                                if(input.files && input.files[0])
                                {
                                  var reader = new FileReader();
                          
                                  reader.onload = function(event) {
                                        $('#uploaded_image').attr('src', event.target.result);
                                        $('#uploaded_image').removeClass('img-circle');
                                        $('#upload_image').after('<div align="center" id="crop_button_area"><br /><button type="button" class="btn btn-primary" id="crop">Crop</button></div>')
                                  }
                                  reader.readAsDataURL(input.files[0]); // convert to base64 string
                                }
                            }
                      
                            $("#upload_image").change(function() {
                                readURL(this);
                                var image = document.getElementById("uploaded_image");
                                cropper = new Cropper(image, {
                                  aspectRatio: 1,
                                  viewMode: 3,
                                  preview: '.preview'
                              });
                          });*/


                            var $modal = $('#modal');
                            var image = document.getElementById('sample_image');
                            var cropper;

                            //$("body").on("change", ".image", function(e){
                            $('#upload_image').change(function(event) {
                                var files = event.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(event) {
                                        done(reader.result);
                                    };
                                    reader.readAsDataURL(files[0]);
                                    //}
                                }
                            });

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

                            $("#crop").click(function() {
                                canvas = cropper.getCroppedCanvas({
                                    width: 400,
                                    height: 400,
                                });

                                canvas.toBlob(function(blob) {
                                    //url = URL.createObjectURL(blob);
                                    var reader = new FileReader();
                                    var id = $('input[name=id]').val();
                                    reader.readAsDataURL(blob);
                                    reader.onloadend = function() {
                                        var base64data = reader.result;

                                        $.ajax({
                                            url: "ajax.php?action=update_profile",
                                            method: "POST",
                                            data: {
                                                id: id,
                                                image: base64data
                                            },
                                            success: function(data) {
                                                location.href = "./index.php?page=my";
                                            }
                                        });
                                    }
                                });
                            });

                        });
                    </script>

                </div><!--/. container-fluid -->
            </section>
            <!-- /.content -->
            <div class="modal fade" id="confirm_modal" role="dialog">
                <div class="modal-dialog modal-md" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">ยืนยัน</h5>
                        </div>
                        <div class="modal-body">
                            <div id="delete_content"></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default bg-grad2 text-white" id="confirm"
                                onclick="">ดำเนินการต่อ</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="uni_modal" role="dialog">
                <div class="modal-dialog modal-md" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title"></h5>
                        </div>
                        <div class="modal-body">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" id="submit"
                                onclick="$('#uni_modal form').submit()">บันทึก</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">ยกเลิก</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="uni_modal_right" role="dialog">
                <div class="modal-dialog modal-full-height  modal-md" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title"></h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span class="fa fa-arrow-right"></span>
                            </button>
                        </div>
                        <div class="modal-body">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="viewer_modal" role="dialog">
                <div class="modal-dialog modal-md" role="document">
                    <div class="modal-content">
                        <button type="button" class="btn-close" data-dismiss="modal"><span
                                class="fa fa-times"></span></button>
                        <img src="" alt="" style="height:100%">
                    </div>
                </div>
            </div>
        </div>
        <!-- /.content-wrapper -->
    </div>
@endsection