@extends('layouts.admin.admin-app')
@section('title','Child Edit')
@section('content')
<div class="main-content adduser_page settings">
    <div class="content_wrapper">
        <div class="content_header">
            <div class="page_title">
                <h2 class="d-inline-block pr-3 mr-3 border-right">Child Edit</h2>
                <nav aria-label="breadcrumb" class="d-inline-block">
                    <ol class="breadcrumb p-0 mb-0">
                        <li class="breadcrumb-item"><a href="{{url('/admin/view-customer/'.$childInfo->user_id)}}">Customer View</a>
                        </li>
                        <li class="breadcrumb-item"><a href="{{url('/admin/customer')}}">Manage Customer</a>
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="content">
            <div class="add_form mx-auto">
                <div class="card">
                    <div class="card-header">Child Edit</div>
                    <div class="card-body">
                        <form id="updateChildFrm" method="post" action="{{url('/admin/update-child')}}">
                            {{csrf_field()}}
                            <input type="hidden" name="child_id" value="{{$childInfo->id}}">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div class="upload_img d-inline-block">
                                            <img src="{{getImage($childInfo->child_image,'child-images')}}" class="rounded-circle child-image" id="uploadimg" alt="user img">
                                            <label for="UploadImg">
                                                <i class="fas fa-pencil-alt"></i>
                                                <input type="file" onchange="setImage(this)" hidden id="UploadImg">
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>First Name</label>
                                        <input type="text" name="first_name" value="{{$childInfo->first_name}}" class="form-control">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Last Name</label>
                                        <input type="text" name="last_name" value="{{$childInfo->last_name}}" class="form-control">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Gender</label>
                                        <ul class="list-inline">
                                            <li class="list-inline-item">
                                                <div class="radio">
                                                    <input id="radio-1" name="gender" value="male" type="radio" {{ ($childInfo->gender == "male")? "checked" : "" }}>
                                                    <label for="radio-1"><span class="radio-label"></span> Male</label>
                                                </div>
                                            </li>
                                            <li class="list-inline-item">
                                                <div class="radio">
                                                    <input id="radio-2" name="gender" value="female" type="radio" {{ ($childInfo->gender == "female")? "checked" : "" }}>
                                                    <label for="radio-2"><span class="radio-label"></span> Female</label>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Date of Birth</label>
                                        <div class="dateIcon">
                                            <input type="text" name="dob" id="DateofBirth" class="form-control " readonly="readonly" value="{{getDateFormat($childInfo->dob, 'admin')}}">
                                            <!--<input type="text" name="dob" id="DateofBirth" class="form-control  datetimepicker-input" readonly="readonly" data-target="#DateofBirth" data-toggle="datetimepicker">-->
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="form-group">
                                <label>Medications</label>
                                <textarea class="form-control" name="medications" rows="3">{{$childInfo->medications}}</textarea>
                            </div>
                            <div class="form-group">
                                <label>Allergies</label>
                                <textarea class="form-control" name="allergies" rows="3">{{$childInfo->allergies}}</textarea>
                            </div>
                            <div class="form-group">
                                <label>Recommendations</label>
                                <textarea class="form-control" name="recommendations" rows="3">{{$childInfo->recommendations}}</textarea>
                            </div>
                            <div class="form-group action  text-right mb-0">
                                <a href="{{url('/admin/view-customer/'.$childInfo->user_id)}}" class="btn btn-light mr-sm-2  ripple-effect">
                                    Cancel
                                </a>
                                <button id="updateChildBtn" type="submit" class="btn btn-warning  ripple-effect">Save</button>
                            </div>
                        </form>
                        {!! JsValidator::formRequest('App\Http\Requests\UpdateChildRequest','#updateChildFrm') !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 
<div class="modal fade img-crop-modal" id="imageCropperModal" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="imageCropperModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addindustyModal">Profile 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 id="image_container">
                    <img alt="image" src="" id="crop_image" class="img-responsive" height="auto" width="100%"/>
                </div>
                <input type="hidden" id="imageBaseCode">
                <input type="hidden" id="childId" value="{{$childInfo->id}}">
                <input type="hidden" id="imageType" value="profile_image">
                <div class="clearfix"></div>
                <div class="progress progress123 mt-3" style="display: none;">
                    <div  class="progress-bar progress-bar-striped progress-bar-animated bar bar123" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light mr-sm-2  ripple-effect" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning  ripple-effect" id="cropbutton">Save</button>
            </div>
        </div>
    </div>
</div>
<link href="{{ url('public/css/cropper.min.css') }}" rel="stylesheet">
<script src="{{ url('public/js/cropper.min.js') }}"></script>
<script>
//    $(function () {
//        $('#DateofBirth').datetimepicker({
//            useCurrent: false,
//            format: 'MM/DD/YYYY',
//            ignoreReadonly: true,
//            maxDate: new Date().setHours(0,0,0,0),
//        });
//
//        setTimeout(function () {
//            $("#DateofBirth").val("{{date('m/d/Y',  strtotime($childInfo->dob))}}");
//        }, 100);
//
//    });
    
    function setImage(input) {
        var fileTypes = ['jpg', 'jpeg', 'png'];  //acceptable file types
        $('#crop_image').attr('src', '');
        if (input.files && input.files[0]) {

            var extension = input.files[0].name.split('.').pop().toLowerCase(), //file extension from input file
                    isSuccess = fileTypes.indexOf(extension) > -1;  //is extension in acceptable types
            if (isSuccess) { //yes
                if (input.files[0].size >= 5120000) {
                    errorToaster('Image may not be greater then 5MB.');
                } else {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("#imageCropperModal").modal("show");
                        $('#crop_image').attr('src', e.target.result);
                        $('#imageBaseCode').val(e.target.result);

                        setTimeout(function () {
                            loadCropper();
                        }, 150);
                    };
                    reader.readAsDataURL(input.files[0]);
                }
            } else {
                errorToaster('Please select jpg, jpeg, png image only.');
            }

        }
    }
    $('#imageCropperModal').on('hidden.bs.modal', function (e) {
        var $image = $("#crop_image");
        var input = $("#cropImageInput");
        input.replaceWith(input.val('').clone(true));
        $image.cropper("destroy");
    })

//cropper
    function loadCropper() {
        var $image = $("#crop_image");
        $image.cropper({
            viewMode: 1,
            dragMode: 'move',
            aspectRatio: 1,
            movable: false,
            zoomable: true,
            rotatable: true,
            center: true,
            responsive: true,
            cropBoxResizable: true,
        });
    }
    $("#cropbutton").click(function () {
        var $image = $("#crop_image");

        $("#cropbutton").html('Save {{buttonLoader()}}');
        $("#cropbutton").attr('disabled', true);
        var imageBaseCode = $('#imageBaseCode').val();
        var imageType = $("#imageType").val();
        var childId = $("#childId").val();
        var imageCropedData = $image.cropper('getData');
        var croppedWidth = imageCropedData.width;
        var croppedHeight = imageCropedData.height;
        var croppedX = imageCropedData.x;
        var croppedY = imageCropedData.y;
        var rotate = imageCropedData.rotate;
        var url = "{{url('/admin/save-child-profile-image')}}";
        var bar = $('.bar123');
        //var percent = $('.percent');
        var status = $('.progress123');
        $.ajax({
            type: "POST",
            url: url,
            dataType: 'JSON',
            data: {
                imageBaseCode: imageBaseCode,
                imageType: imageType,
                childId: childId,
                croppedWidth: croppedWidth,
                croppedHeight: croppedHeight,
                croppedX: croppedX,
                croppedY: croppedY,
                rotate: rotate,
                _token: '{{csrf_token()}}'
            },
            beforeSend: function () {
                status.show();
                var percentVal = '0%';
                console.log(percentVal);
                bar.width(percentVal);
                //percent.html(percentVal);
            },
            xhr: function () {
                var myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) {
                    myXhr.upload.addEventListener('progress', progress, false);
                }
                return myXhr;
            },
            success: function (response) {
//                console.log(response);
                status.hide();

                bar.width('0%');
                if (response.success) {
                    $("#imageCropperModal").modal("hide");
                    $image.cropper('destroy');
                    $("#cropbutton").attr('disabled', false);
                    $("#cropbutton").html('Save');
                    $('.child-image').attr('src', response.filename);
                    successToaster('Profile image is changed successfully.');
                }
            }
        });
    });
    function progress(e) {
        var bar = $('.bar123');
        //var percent = $('.percent');
        var status = $('.progress123');
        if (e.lengthComputable) {
            var max = e.total;
            var current = e.loaded;
            var Percentage = (current * 100) / max;
            var percentVal = Percentage + '%';
            bar.width(percentVal);
            if (Percentage >= 100)
            {

            }
        }
    }
    $('#imageCropperModal').on('hidden.bs.modal', function (e) {
        $('#crop_image').attr('src', '');
        var $image = $("#crop_image");
        var input = $("#cropImageInput");
        input.replaceWith(input.val('').clone(true));
        $image.cropper("destroy");
    });
    
    $('#updateChildFrm').on('submit', function (e) {
        if ($('#updateChildFrm').valid()) {
            $("#updateChildBtn").attr("disabled", true);
            $("#updateChildBtn").html('Save {{buttonLoader()}}');
        }
    });
</script>
@endsection