@extends('layouts.admin')
@section('content')
    <div>
        <nav aria-label="breadcrumb" class="breadcrumb-wrap">
            <div class="container">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ URL::to('/') }}"><i class="ti-home"></i> @lang('messages.Home')</a></li>
                    <li class="breadcrumb-item active" aria-current="page">
                                                <a href="#">Upload Prescription</a>
                    </li>

                </ol>
            </div>
        </nav>
    </div>


    <div class="bm-about">

        <section class="bm-banner--round py-0">
            <div class="bm-banner">
                <div class="container">
                    <div class="bm-banner__block">

                        <div class="bm-banner__content">
                            <div class="bm-logo">
                                <a href="#"> <img src="{{ url('img/logo.png') }}" alt></a>
                            </div>
                            <h2 class="bm-banner__title mb-0" style="font-size: 40px;">Upload Your Prescription</h2>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint</p>
                            <div class="bm-banner__btn-group">
                            </div>
                        </div>

                        <div class="bm-banner__thumnail"><img class="bm-banner__round" src="img/round5.png" alt><img class="bm-banner__image" src="img/girl-face-mask.png" alt></div>
                    </div>
                </div>
            </div>
        </section>

    </div>
    {!!Form::open(array('class'=>'','id'=>'upload_prescription','files' => true));!!}
    <div class="container">
        <section class="row pt-40 pb-40 pt-xs-5 pb-xs-5">
            <div class="col-lg-5">
                <div class="bm-card">
                    <h4>Upload Prescription</h4>
                    <p>Please attach a prescription to proceed</p>
                    <div class="button-upload">

                        <div class="pt-10">
                            <span class="btn btn-precsc_inner fileinput-button" id="upload_prescription_order">
                            <input type="hidden" name="resubmite_order_check" id="resubmite_order_check" value="0">
                                <div class="icon-img"><img src="{{ url('img/prescription_up.png') }}" class="img-fluid" style="width: 30px;" /></div>
                                <span>Upload New Document</span>
                                <input type="file" name="prescription_image" id="files" accept="image/jpeg,image/jpg, image/png, application/pdf,"><br />
                            </span>
                        </div>
                        @if(!empty(Session::get('CustomerId')))
                            <div class="pt-10">
                            <span class="btn btn-precsc_inner fileinput-button" id="view_all_images">
                                <div class="icon-img"><img src="{{ url('img/rx_icon.png') }}" class="img-fluid" style="width: 30px;" /></div>
                                <span>View Saved Prescription</span>
                                <!-- <input type="file" name="" id="" accept="image/jpeg,image/jpg, image/png, application/pdf,"><br /> -->
                            </span>
                            </div>
                        @endif
                    </div>
                    <div class="preview_img">
                        <output id="Filelist"></output>
                    </div>
                </div>
            </div>
            <div class="col-lg-7" id="upload_prescription_div">
                <div class="bm-card">
                    <h5>Guide for a valid prescription</h5>
                    <div class="d-flex">
                        <div>
                            <ul class="bm-list--dot pt-3 small">
                                <li>Don’t crop out any part of the image</li>
                                <li>Avoid blurred image</li>
                                <li>Include details of doctor and patient + clinic visit date</li>
                                <li>Medicines will be dispensed as per prescription</li>
                                <li>Supported files type: jpeg , jpg , png , pdf</li>
                                <li>Maximum allowed file size: 2MB</li>
                            </ul>
                            @if(empty(Session::get('CustomerId')))
                                <a href="javascript:;" data-toggle="modal" data-target="#login" id="customer_login" class="btn-success btn btn-md full-width bm-btn--fullwidth mt-40 pt-10 pb-10 cart_box"><i class="ti-user"></i>CONTINUE</a>
                            @else
                                <button class="btn-success btn btn-md full-width bm-btn--fullwidth mt-40 pt-10 pb-10" id="submit_button" type="submit">Save CONTINUE</button>
                            @endif

                        </div>

                        <div style="padding:0px 25px;">
                            <h6>Sample Prescription</h6>
                            <img src="{{ url('img/sample_prec.jpg') }}" class="img-fluid" style="width: 300px;" />
                        </div>

                    </div>

                </div>
            </div>

            <div class="col-lg-7" id="view_prescription_div" style="display:none">
                <div class="bm-card">
                    <h5>Your Prescription Order's List</h5>
                    <div id="fifth-container" class="box-cover">
                        <div class="simple-pagination-showing-x-of-x text-center"></div>
                            <ul class="cover">
                                                            </ul>

                            <div class="my-navigation">
                                <div class="simple-pagination-first"></div>
                                <div class="simple-pagination-previous"></div>
                                <div class="simple-pagination-page-numbers"></div>
                                <div class="simple-pagination-next"></div>
                                <div class="simple-pagination-last"></div>
                            </div>
                            <div class="hidden">
                                Page <select class="simple-pagination-select-specific-page"></select> of <span class="simple-pagination-page-count"></span>.
                            </div>
                        <!--
                        -->
                        <button class="btn-success btn btn-md full-width bm-btn--fullwidth mt-40 pt-10 pb-10" id="submit_button" type="submit">Order Now</button>

                    </div>

                </div>
            </div>
        </section>
    </div>
    {!!Form::close();!!}

    <!-- Modal -->
    <div class="prescription-modal modal fade" id="prescription-modal" tabindex="-1" role="dialog" aria-labelledby="prescriptionModalLabel" aria-hidden="true">
        <!-- <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">
                            Order ID: <br> <lable></lable>
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <img src="" class="img-fluid" />
                </div>

            </div>
        </div> -->
    </div>

    <script src="{{ url('js/jqpaginator.js') }}"></script>
    <script src="https://raw.githubusercontent.com/pipwerks/PDFObject/master/pdfobject.min.js"></script>
    <script src="{{ url('js/jqpaginator.js') }}"></script>
    <link rel="stylesheet" href="{{ URL::asset('css/jqpaginator.css') }}  ">
    <script>
        (function($){

            $('#first-container').simplePagination();

            $('#second-container').simplePagination({
                items_per_page: 5,
                number_of_visible_page_numbers: 10
            });

            $('#third-container').simplePagination({
                items_per_page: 10
            });

            $('#fourth-container').simplePagination({
                first_content: '&lt;&lt;',
                previous_content: '<',
                next_content: '>',
                last_content: '>>'
            });

            $('#fifth-container').simplePagination({
                use_page_count: true
            });

            $('#sixth-container').simplePagination({
                items_per_page: 11,
                items_per_page_content: {
                    'Six': 6,
                    'Eleven': 11,
                    'Seventeen': 17,
                    'Thirty-three': 33,
                    'Sixty-seven': 67
                }
            });

        })(jQuery);

        //I added event handler for the file upload control to access the files properties.
        document.addEventListener("DOMContentLoaded", init, false);

        //To save an array of attachments
        var AttachmentArray = [];

        //counter for attachment array
        var arrCounter = 0;

        //to make sure the error message for number of files will be shown only one time.
        var filesCounterAlertStatus = false;

        //un ordered list to keep attachments thumbnails
        var ul = document.createElement("ul");
        ul.className = "thumb-Images";
        ul.id = "imgList";

        function init() {
            //add javascript handlers for the file upload event
            document
                .querySelector("#files")
                .addEventListener("change", handleFileSelect, false);
        }

        //the handler for file upload event
        function handleFileSelect(e) {
            //to make sure the user select file/files
            if (!e.target.files) return;

            //To obtaine a File reference
            var files = e.target.files;

            // Loop through the FileList and then to render image files as thumbnails.
            for (var i = 0, f;
                 (f = files[i]); i++) {
                //instantiate a FileReader object to read its contents into memory
                var fileReader = new FileReader();

                // Closure to capture the file information and apply validation.
                fileReader.onload = (function(readerEvt) {
                    return function(e) {
                        //Apply the validation rules for attachments upload
                        ApplyFileValidationRules(readerEvt);

                        //Render attachments thumbnails.
                        RenderThumbnail(e, readerEvt);

                        //Fill the array of attachment
                        FillAttachmentArray(e, readerEvt);
                    };
                })(f);

                // Read in the image file as a data URL.
                // readAsDataURL: The result property will contain the file/blob's data encoded as a data URL.
                // More info about Data URI scheme https://en.wikipedia.org/wiki/Data_URI_scheme
                fileReader.readAsDataURL(f);
            }
            document
                .getElementById("files")
                .addEventListener("change", handleFileSelect, false);
        }

        //To remove attachment once user click on x button
        jQuery(function($) {
            $("div").on("click", ".img-wrap .close", function() {
                var id = $(this)
                    .closest(".img-wrap")
                    .find("img")
                    .data("id");

                //to remove the deleted item from array
                var elementPos = AttachmentArray.map(function(x) {
                    return x.FileName;
                }).indexOf(id);
                if (elementPos !== -1) {
                    AttachmentArray.splice(elementPos, 1);
                }

                //to remove li tag
                $(this)
                    .parent()
                    .find("li")
                    .remove();

                //to remove image tag
                $(this)
                    .parent()
                    .find("img")
                    .not()
                    .remove();

                //to remove div tag that contain the image
                $(this)
                    .parent()
                    .find("div")
                    .not()
                    .remove();

                //to remove div tag that contain caption name
                $(this)
                    .parent()
                    .parent()
                    .find("div")
                    .not()
                    .remove();

                $('#submit_button').prop('disabled', true);

                //to remove li tag
                var lis = document.querySelectorAll("#imgList li");
                for (var i = 0;
                     (li = lis[i]); i++) {
                    if (li.innerHTML == "") {
                        li.parentNode.removeChild(li);
                    }
                }
            });
        });

        //Apply the validation rules for attachments upload
        function ApplyFileValidationRules(readerEvt) {
            //To check file type according to upload conditions
            if (CheckFileType(readerEvt.type) == false) {
                $('#submit_button').prop('disabled', true);
                var msg = "The file (" + readerEvt.name + ") does not match the upload conditions, You can only upload jpeg/jpg/png/pdf files";
                toastr.error(msg, { fadeAway: 2000 });
                e.preventDefault();
                return;
            }

            //To check file Size according to upload conditions
            if (CheckFileSize(readerEvt.size) == false) {
                $('#submit_button').prop('disabled', true);
                var msg = "The file (" + readerEvt.name + ") does not match the upload conditions, The maximum file size for uploads should not exceed 2 MB";
                toastr.error(msg, { fadeAway: 2000 });
                e.preventDefault();
                return;
            }

            //To check files count according to upload conditions
            if (CheckFilesCount(AttachmentArray) == false) {
		$('#submit_button').prop('disabled', true);
                if (!filesCounterAlertStatus) {
                    filesCounterAlertStatus = true;
                    var msg = "You have added more than 1 file. According to upload conditions you can upload 1 files maximum"
                    var msg = "You have added Minimum 1 file."
                    toastr.error(msg, { fadeAway: 2000 });
                }
                e.preventDefault();
                return;
            }
            $('#submit_button').prop('disabled', false);
        }

        //To check file type according to upload conditions
        function CheckFileType(fileType) {
            if (fileType == "image/jpeg") {
                return true;
            } else if (fileType == "image/jpg") {
                return true;
            } else if (fileType == "image/png") {
                return true;
            } else if (fileType == "application/pdf") {
                return true;
            } else {
                return false;
            }
            return true;
        }

        //To check file Size according to upload conditions
        function CheckFileSize(fileSize) {
            if (fileSize < 2000000) {
                return true;
            } else {
                return false;
            }
            return true;
        }

        //To check files count according to upload conditions
        function CheckFilesCount(AttachmentArray) {
            //Since AttachmentArray.length return the next available index in the array,
            //I have used the loop to get the real length
            var len = 0;
            for (var i = 0; i < AttachmentArray.length; i++) {
                if (AttachmentArray[i] !== undefined) {
                    len++;
                }
            }
            //To check the length does not exceed 10 files maximum
            if (len > 0) {
                return false;
            } else {
                return true;
            }
        }

        //Render attachments thumbnails.
        function RenderThumbnail(e, readerEvt) {
            var li = document.createElement("li");
            ul.appendChild(li);
            li.innerHTML = [
                '<div class="img-wrap"> <span class="close">&times;</span>' +
                '<img class="thumb" src="',
                e.target.result,
                '" title="',
                escape(readerEvt.name),
                '" data-id="',
                readerEvt.name,
                '"/>' + "</div>"
            ].join("");

            var div = document.createElement("div");
            div.className = "FileNameCaptionStyle";
            li.appendChild(div);
            div.innerHTML = [readerEvt.name].join("");
            document.getElementById("Filelist").insertBefore(ul, null);
        }

        //Fill the array of attachment
        function FillAttachmentArray(e, readerEvt) {
            AttachmentArray[arrCounter] = {
                AttachmentType: 1,
                ObjectType: 1,
                FileName: readerEvt.name,
                FileDescription: "Attachment",
                NoteText: "",
                MimeType: readerEvt.type,
                Content: e.target.result.split("base64,")[1],
                FileSizeInBytes: readerEvt.size
            };
            arrCounter = arrCounter + 1;
        }

        $(document).ready(function(){
            $('#upload_prescription').submit(function(e){
                e.preventDefault();
                $('#loader-wrapper').removeClass('loader');
                $("#submit_button").attr("disabled", true);
                $('#submit_button').button('loading');
                var token, url, data;
                token = $('meta[name="csrf-token"]').attr('content');
                url = '{{url('prescription/upload')}}';
                order_id = '';
                resubmite_order_check = $('#resubmite_order_check').val();
                var order_id = $("input:radio.order_id:checked").val();
                prescription_image = $('#files').val();
                if(prescription_image == '' && resubmite_order_check == 0) {
                    toastr.error('First Upload Your Prescription Image.');
                    return false;
                }
                if ((!$.isNumeric(order_id) && resubmite_order_check == 1)) {
                    toastr.error('First Select Any Old Prescription.');
                    return false;
                }
                data = new FormData(this);
                data.append('order_id', order_id);

                $.ajax({
                    url: url,
                    headers: {'X-CSRF-TOKEN': token},
                    data: data,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    datatype: 'JSON',
                    success: function (resp) {
			$('#loader-wrapper').addClass('loader');
                        $("#submit_button").attr("disabled", false);
                        $('#submit_button').button('reset');
                        if(resp.http_code == 400){
                            err_msg = resp.message.replace(/, \\n /g, '<br>');
                            toastr.error(err_msg);
                        } else if(resp.http_code == 200){
                            toastr.success(resp.message);
                            var loc = '{{ url('prescription')}}';
                            $(location).attr('href',loc);
                        } else if(resp.http_code == 500){
                            toastr.success(resp.message);
                        }
                    },
                });
            });

            $("#view_all_images").click(function() {
                $('#resubmite_order_check').val(1);
                $("#upload_prescription_div").hide();
                $('#view_prescription_div').show();
            });
			$("#upload_prescription_order").click(function() {
                $('#resubmite_order_check').val(0);
                $("#upload_prescription_div").show();
                $('#view_prescription_div').hide();
            });

            $('.prescription_modal_view').click(function (e) {
                var image_model, order_id, order_date, prescription_image;
                order_id = $(this).data('order-id');
                order_date = $(this).data('order-date');
                prescription_image = $(this).data('prescription-image');

                $(".prescription-modal").text('');
                $('.prescription-modal').append($("<div class='modal-dialog' role='document'><div class='modal-content'><div class='modal-header'><h5 class='modal-title' id='exampleModalLabel'>Order ID:"+ order_id + "<br> <lable>" + order_date +"</lable></h5><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button></div><div class='modal-body'><embed src="+ prescription_image + " width='100%' height='500' alt='pdf'></div></div></div>"));
            });
        });
    </script>
@endsection