@include('mr.header')

<!-- //wrapper -->
<div class="wrapper" id="wrapper">
    <section class="login_screen otpsend">
        <div class="container h-100">

            <div class="activity_rs">
                <div class="container">
                    <div class="white_shadow_rs">

                        <div class="col-12">
                            <div class="title_poster text-center">
                                <h3> <a href="{{ route('dashboard') }}"><i class="fa-solid fa-arrow-left"></i></a>
                                    {{ $data['activityName'] }}
                                </h3>
                            </div>
                        </div>
                        {!! Form::open([
                            'url' => '#',
                            'name' => 'add_edit_doctor_form',
                            'id' => 'add_edit_doctor_form',
                            'enctype' => 'multipart/form-data',
                        ]) !!}
                        <input type="hidden" name="doctorPosterID" id="doctorPosterID"
                            value="{{ isset($data['doctorPosterID']) ? $data['doctorPosterID'] : null }}">
                        <input type="hidden" name="doctorID" id="doctorID"
                            value="{{ isset($data['doctorID']) ? $data['doctorID'] : null }}">
                        <input type="hidden" name="activityID" id="activityID" value="{{ $data['activityID'] }}">
                        <div class="up_preview">
                            <div class="row pt-3">
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label for="" class="form-label">Doctor name</label>
                                        <input type="text" class="form-control" id="doctorName" name="doctorName"
                                            placeholder="Enter Doctor Name"
                                            value="{{ isset($data['doctorPosterData']['doctor']->doctorName) ? $data['doctorPosterData']['doctor']->doctorName : null }}">
                                    </div>
                                </div>
                                {{-- Doctor Profile Img --}}
                                @if ($data['decryptActivityID'] != 1)
                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="" class="form-label">Upload photo</label>
                                            <div class="upload_img_te">
                                                <div class="left">
                                                    @if (isset($data['doctorPosterData']['doctor']->doctorProfileImg))
                                                        <img id="doctorProfileImgPreview"
                                                            src="{{ asset('storage/profileimg' . '/' . $data['doctorPosterData']['doctor']->doctorProfileImg) }}">
                                                    @else
                                                        <img id="doctorProfileImgPreview"
                                                            src="{{ asset('front-assets/images/user_img.png') }}">
                                                    @endif
                                                </div>
                                                <div class="right">
                                                    <p>Please Upload Square Image, Size Less Than 10 MB</p>
                                                    <div class="input_upload">
                                                        <span>Upload</span>
                                                        <input type="file" id="customFile" name="customFile"
                                                            accept="image/png, image/jpeg, image/JPEG, image/jpg, image/JPG"
                                                            data-max_length="20">
                                                    </div>
                                                    <input type="hidden" name="doctorProfileImg" id="doctorProfileImg"
                                                        value="{{ isset($data['doctorPosterData']['doctor']->doctorProfileImg) ? $data['doctorPosterData']['doctor']->doctorProfileImg : null }}">
                                                </div>
                                            </div>
                                            <label id="doctorProfileImg-error" class="error"
                                                for="doctorProfileImg"></label>
                                        </div>
                                    </div>
                                @endif

                                @if ($data['decryptActivityID'] != 2)
                                    @php
                                        if (isset($data['doctorPosterData']['doctor']->logos)) {
                                            $logoArr = explode(',', $data['doctorPosterData']['doctor']->logos);
                                        } else {
                                            $logoArr = [];
                                        }
                                    @endphp
                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="" class="form-label">Select brand logos</label>
                                            <div class="brand_logo">
                                                <div class="row">
                                                    @foreach ($data['allLogo'] as $key => $rowlogo)
                                                        <div class="col-lg-4 col-sm-4 col-md-4 col-6">
                                                            <div class="logo_selected">
                                                                <input type="checkbox" name="logos[]"
                                                                    id="logo_{{ $rowlogo->logoID }}"
                                                                    value="{{ $rowlogo->logoID }}"
                                                                    {{ in_array($rowlogo->logoID, $logoArr) ? 'checked' : '' }}>
                                                                <div class="logo_section">
                                                                    <img src="{{ asset('assets/logos') . '/' . $rowlogo->logoFileName }}"
                                                                        alt="{{ $rowlogo->logoName }}">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                    <label id="logos[]-error" class="error" for="logos[]"></label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                <div class="col-12">
                                    <div class="mb-3">
                                        <label for="" class="form-label">Select Template</label>
                                        <div class="row">
                                            @foreach ($data['AllFrames'] as $key => $rowFrame)
                                                <div class="col-lg-4 col-md-4 col-sm-4 col-12">
                                                    <div class="poster">
                                                        <input type="radio" name="frameID"
                                                            id="frame_{{ $rowFrame->frameID }}"
                                                            value="{{ $rowFrame->frameID }}"
                                                            {{ isset($data['doctorPosterData']->frameID) ? ($data['doctorPosterData']->frameID == $rowFrame->frameID ? 'checked' : '') : '' }}>
                                                        <div class="poster_detiles">
                                                            <img src="{{ asset('assets/original_poster') . '/' . $rowFrame->imageMedia }}"
                                                                alt="{{ $rowFrame->imageMedia }}">
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                            <label id="frameID-error" class="error" for="frameID"></label>
                                            <div class="w-100"></div>
                                            <div class="col-lg-4 col-md-4 col-sm-4 col-12 m-auto pt-3">
                                                <button id="submit" class="btn btn-primary d-block">Submit</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
</div>
</section>

</div> <!--  wrapper end  -->
<!-- //wrapper-end -->

{{-- ProfileImg model --}}
<div id="uploadimageModal" class="modal" role="dialog" data-keyboard="false" data-bs-keyboard="false"
    data-bs-backdrop="static" data-aos="fade-in">
    <div class="modal-dialog modal-dialog-centered modal-md ">
        <div class="modal-content ">
            <div class="d-flex justify-content-end border-bottom-0 py-3 px-3"><button onclick="hideImgUploadModal()"
                    class="btn-close z-index-1" type="button" aria-label="Close"><i
                        class="fa-solid fa-xmark"></i></button></div>
            <div class="modal-body">
                <div>
                    <div class="col-md-12 text-center">
                        <div id="image_demo" class="responsive"></div>
                        {{-- <canvas id="canvas" width="400" height="400"></canvas> --}}
                        {{-- <input type="hidden" id="imageType" name="imageType"> --}}
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <div class="d-lg-flex d-md-flex justify-content-center">
                    {{-- <button class="btn btn-primary imgRotate me-3 mt-3 p-3" data-rotate="-90" type="submit"><i
           class="fas fa-undo" aria-hidden="true"></i></button> --}}
                    <button class="btn btn-primary imgRotate me-3 mt-3 p-3" data-rotate="90" type="submit"><i
                            class="fas fa-undo" aria-hidden="true"></i></button>
                    <button class="btn btn-primary mt-3 crop_image p-3">Save</button>
                </div>
            </div>

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

@include('mr.footer')
<script>
    $(document).ready(function() {

        $.validator.addMethod("count3", function(value, element) {
            if ($('input[name="' + element.name + '"]:checked').length <= 3 && $('input[name="' +
                    element.name + '"]:checked').length > 0) {
                return true;
            } else {
                return false;
            }
        }, "Please Select up to 3 Brand Logos.");

        $("#add_edit_doctor_form").validate({
            ignore: ".ignore",
            rules: {
                doctorName: {
                    required: true,
                    maxlength: 35
                },
                activityID: {
                    required: true,
                },
                // 'logos[]': {
                //     count3: true,
                // },
                frameID: {
                    required: true,
                },
            },
            messages: {
                frameID: {
                    required: "Please select frame.",
                },
            },
            errorPlacement: function(error, element) {
                var placement = $(element).data("error");
                if (element.is("select")) {
                    error.appendTo(".error_msg_show");
                } else if (placement) {
                    $(placement).append(error);
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                // return false;
                $("#submit").html('<span> Processing...</span>');
                $("#submit").attr('disabled', true);

                var formData = new FormData($("#add_edit_doctor_form")[0]);
                $.ajax({
                    url: "{{ route('saveDoctor') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response, textStatus, xhr) {
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);
                        if (response.status == 1) {
                            $.notify(response.message, "success");
                            $("#add_edit_doctor_form")[0].reset();
                            // $('#dataTable').DataTable().ajax.reload();
                            setTimeout(function() {
                                window.location.replace(
                                    "{{ url('preview-frame') }}" +
                                    "/" + response.data
                                    .encryptDoctorPosterID);
                            }, 1000);
                        } else {
                            $("#submit").html('Submit');
                            $("#submit").attr('disabled', false);
                            $.notify(response.message, "error");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        // if (jqXHR.status == 422) {
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);
                        $.notify(jqXHR.responseJSON.message, "error");
                        // }
                    }

                }); //ajax
            }
        });

        if ("{{ $data['decryptActivityID'] }}" != 2) {
            $('input[name="logos[]"]').rules("add", {
                count3: true,
                messages: {
                    count3: "Please Select up to 3 Brand Logos.",
                },
            });
        } else {
            $('input[name="logos[]"]').rules("remove");

        }

        if ("{{ $data['decryptActivityID'] }}" != 1) {
            $("#doctorProfileImg").rules("add", {
                required: true,
                messages: {
                    required: "This field is required.",
                },
            });
        } else {
            $("#doctorProfileImg").rules("remove");
        }

        @if (isset($doctorID))
            getDoctorDetail("{{ $doctorID }}");
        @endif

        boundaryWidth = 300;
        boundaryHeight = 300;

        viewportWidth = 200;
        viewportHeight = 200;

        $image_crop = $('#image_demo').croppie({
            viewport: {
                width: viewportWidth,
                height: viewportHeight,
                //type: 'square',
            },
            boundary: {
                height: boundaryHeight,
                width: boundaryWidth,
            },
            showZoomer: true,
            enableExif: true,
            enableOrientation: true
        });

        $('#customFile').on('change', function() {
            var file = this.files[0];
            var minSize = 10 * 1024 * 1024; // 100 KB
            ext = this.value.split('.').pop();
            if (ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
                $("#doctorProfileImg").val('');
                $('#doctorProfileImgPreview').attr('src',
                    "{{ asset('front-assets/images/user_img.png') }}");
                $('#customFile').val('');
                return false;
            }

            if (file.size > minSize) {
                $("#doctorProfileImg-error").text("File size must be less than 10 MB.");
                $("#doctorProfileImg").val('');
                $('#doctorProfileImgPreview').attr('src',
                    "{{ asset('front-assets/images/user_img.png') }}");
                $('#customFile').val('');
                return false;
            }

            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');
        });

        //rotate image
        $('.imgRotate').on('click', function(ev) {
            $image_crop.croppie('rotate', parseInt($(this).data('rotate')));
        });

        $('.crop_image').click(function(event) {
            // height and width define in constants.php
            var croppieResultHeight = '1000';
            var croppieResultWidth = '1000';

            $image_crop.croppie('result', {
                type: 'canvas',
                // size: 'viewport'
                size: {
                    height: croppieResultHeight,
                    width: croppieResultWidth
                },
            }).then(function(response) {
                // $('body').append('<div class="loader"></div>');
                // $("#modelbtn").hide();
                // $("#preloader").addClass('loaded');
                $(".crop_image").html('Uploading.....');
                $(".crop_image").attr('disabled', true);
                $.ajax({
                    url: "{{ url('upload-cropped-image') }}",
                    type: "POST",
                    data: {
                        "image": response,
                        '_token': '{{ csrf_token() }}'
                    },
                    success: function(data) {
                        data = JSON.parse(data);
                        $('#uploadimageModal').modal('hide');
                        $('#doctorProfileImgPreview').attr('src',
                            "{{ asset('storage/profileimg') }}/" +
                            data);
                        $("#doctorProfileImg").val(data);
                        $('#doctorProfileImg').valid();
                        $('#customFile').val('');

                        $(".crop_image").html('Save');
                        $(".crop_image").attr('disabled', false);
                    }
                });
            })
        });


    });
</script>

<script>
    function hideImgUploadModal() {
        $('#uploadimageModal').modal('hide');
        $('#customFile').val('');
        $('#doctorProfileImgPreview').attr('src',
            "{{ asset('front-assets/images/user_img.png') }}");
    }

    function getDoctorDetail(doctorID = '') {
        if (doctorID == '')
            doctorID = $("#doctorID").val();

        $.ajax({
            url: "{{ url('get-doctor-detail') }}",
            type: 'POST',
            data: {
                '_token': '{{ csrf_token() }}',
                'doctorID': doctorID,
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                $("#vDoctorName").val(response.vDoctorName);
                $("#vCity").val(response.vCity);
                $("#vFieldForceName").val(response.vFieldForceName);
                $("#vMobile").val(response.vMobile);
                $("#vHq").val(response.vHq);
                if (response.vProfileImg == null)
                    $(".img-preview").attr('src', '{{ asset('front-assets/assets/img/blank.png') }}');
                else {
                    $(".img-preview").attr('src', '{{ url('storage/app/public/storage/profileimg') }}/' +
                        response
                        .vProfileImg);
                }
                $("#vProfileImg").val(response.vProfileImg);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // if (jqXHR.status == 422) {
                $("#submit").html('Submit');
                $("#submit").attr('disabled', false);
                $.notify(jqXHR.responseJSON.message, "error");
                // }
            }

        }); //ajax
    }
</script>