@extends('layouts.app')
@section('content')
    <!-- page-title -->
    <div class="page-title">

        <h3 class="main-title">Profile</h3>
    </div>
    {!! Form::open([
        'url' => action('App\Http\Controllers\HomeController@profileupdate'),
        'method' => 'post',
        'files' => true,
        'id' => 'company_add_form',
        'enctype' => 'multipart/form-data',
    ]) !!}
    <!-- profile-image start -->
    <section class="profile-image py-16">
        <div class="image">
            <div id="uploaded_image">
                <img src="{{ asset('uploads/photo/') }}/{{ Auth::user()->photo ?? 'Zydus.png' }}" alt="avatar"
                    class="w-100 h-100 object-fit-cover img-fluid rounded-full">
                <input type="hidden" name="imagename" value="{{ Auth::user()->photo ?? 'Zydus.png' }}" required>
            </div>

        </div>
    </section>
    <!-- profile-image end -->

    <!-- profile-info start -->
    <section class="user-info">
        <input type="hidden" name="id" value="{{ Auth::user()->id }}">
        <div class="mb-16">
            <input type="file" placeholder="Employee Name" name="photo" class="" id="upload_image">
        </div>

        <div class="mb-16">
            <label class="input-label">Name</label>
            <input type="text" name="name" placeholder="Enter Name" value="{{ Auth::user()->name }}" class="input"
                Required>
        </div>
        <div class="mb-16">
            <label class="input-label">Employee Code</label>
            <input type="text" placeholder="Enter Employee Code" value="{{ Auth::user()->email }}" class="input"
                disabled Required>
        </div>
        <div class="mb-16">
            <label class="input-label">HQ</label>
            <input type="text" placeholder="Enter HQ" value="{{ Auth::user()->hq }}" class="input" disabled Required>
        </div>
        <div class="mb-16">
            <label class="input-label">State</label>
            <input type="text" placeholder="Enter State" value="{{ Auth::user()->state }}" class="input" disabled
                Required>
        </div>
        <div class="mb-32">
            <label class="input-label">Coce</label>
            <input type="text" placeholder="Enter Employee Code" value="{{ Auth::user()->code }}" class="input" disabled
                Required>
        </div>
        <div class="save-btn mb-32">
            <input type="submit" name="submit" value="Save Changes" class="btn-primary">
        </div>


    </section>
    {!! Form::close() !!}
    <!-- profile-info end -->
    <div id="uploadimageModal" class="modal" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="border-bottom: 1px solid #dee2e6 !important;">

                    <h4 class="modal-title">Crop & Upload Image</h4>
                    <!--<button type="button" class="close"  data-bs-dismiss="modal" style="background: transparent;
    color: red;
    padding: 5px 10px;
    font-size: 27px;
    line-height: 35px;
    border: 0px;">&times;</button>-->
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <div id="image_demo" style="width:100%; margin-top:30px"></div>
                        </div>
                        <div class="col-md-12" style="padding-top:30px;">

                            <button class="btn btn-success crop_image">Crop & Upload Image</button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-default" data-bs-dismiss="modal" >Close</button>-->
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer')
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('input[name=csrf-token]').attr('content')
                }
            });


            $(document).on('click', '.company-modal', function(e) {
                var container = $(this).data("container");
                $.ajax({

                    url: $(this).data("href"),
                    dataType: "html",
                    success: function(result) {
                        $(container).html(result).modal('show');
                    }
                });
            });

            //Submit Category

            $(document).on('submit', 'form#company_add_form', function(e) {
                e.preventDefault();
                var data = new FormData($('#company_add_form')[0]);

                data.append('_token', '{{ csrf_token() }}');
                $.ajax({

                    method: "POST",
                    url: $(this).attr("action"),
                    dataType: "json",
                    data: data,
                    contentType: false,
                    processData: false,
                    success: function(result) {
                        if (result.success == true) {
                            $('div.brands_modal').modal('hide');
                            Toastify({
                                text: result.msg,
                                duration: 3000,
                                backgroundColor: '#088f7d'
                            }).showToast();

                            //  $.notify({message: result.msg},{type: 'success'});
                            //brands_table.ajax.reload();
                        } else {
                            $.each(result.data, function(key, val) {
                                $("#" + key + "_error").text(val[0]);

                            })

                            Toastify({
                                text: result.msg,
                                duration: 3000,
                                backgroundColor: 'red'
                            }).showToast();
                        }
                    },
                    error: function(xhr, status, error) {

                        Toastify({
                            text: result.msg,
                            duration: 3000,
                            backgroundColor: 'red'
                        }).showToast();
                    }
                });
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('input[name=csrf-token]').attr('content')
                }
            });


            $image_crop = $('#image_demo').croppie({
                enableExif: true,
                viewport: {
                    width: 300,
                    height: 300,
                    type: 'rectangle' //circle
                },
                boundary: {
                    width: 300,
                    height: 300
                }
            });

            $('#upload_image').on('change', function() {
                var fileName = document.getElementById("upload_image").value;
                var idxDot = fileName.lastIndexOf(".") + 1;
                var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
                if (extFile == "jpg" || extFile == "jpeg") {
                    var reader = new FileReader();
                    reader.onload = function(event) {
                        $image_crop.croppie('bind', {
                            url: event.target.result
                        }).then(function() {
                            console.log('jQuery bind complete');
                        });
                    }
                    reader.readAsDataURL(this.files[0]);
                    $('#uploadimageModal').modal('show');
                } else {
                    $('#upload_image').val("");
                    alert("Only jpg/jpeg files are allowed!");
                }

            });

            $('.crop_image').click(function(event) {
                $image_crop.croppie('result', {
                    type: 'canvas',
                    size: {
                        width: 1024,
                        height: 1024
                    }
                }).then(function(response) {
                    $.ajax({
                        url: "{{ url('/mrimage_upload') }}",
                        type: "POST",
                        data: {
                            "image": response,
                            "_token": '{{ csrf_token() }}'
                        },
                        success: function(data) {
                            $('#uploadimageModal').modal('hide');
                            $('#uploaded_image').html(data);
                        }
                    });
                })
            });
        });
    </script>
@endsection