@extends('collector.layouts.master')
@section('content')
    <style>
        #upload {
            display: none;
        }

        .card .card-header {
            background: #fff;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: white;
        }

        label {
            color: white !important;
        }

        .card {

            box-shadow: 0px 10px 20px 0px !important;

        }

    </style>
    <style>
        .card .card-header {
            background: #fff;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: white;
        }

        label {
            color: white !important;
        }

        .card {
            background: transparent;
            box-shadow: 0px 10px 20px 0px !important;
        }

        .text-small {
            color: white;
        }

        a {
            color: #fff
        }

        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }

        #upload {
            display: none;
        }



        li {
            color: white;
        }

    </style>
    <section class="section">
        <div class="container mt-5">
            <div class="row">
                <div class="col-12 ">
                    <div class="card card-primary">
                        <div class="card-header">
                            <img src="{{ asset('user/assets/img/logo.png') }}" class="img-responsive mx-auto">
                        </div>
                        <div class="card-body">
                            <div class="text-center">
                                <h5>Patient Details</h5>
                            </div>
                            <br>
                            <form
                                action="{{ route('collector.update.patient.process', ['patient_id' => request()->patient_id,'org_id' => request()->org_id]) }}"
                                method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-sm-12">
                                        <h6>Name<span style="color: orange">*</span></h6>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        {{-- <label for="fname">First Name</label> --}}
                                        <input id="fname" type="text" class="form-control" name="fname"
                                            placeholder="First Name" value="{{ $patient->user->fname }}" autofocus
                                            required>
                                        @if ($errors->has('fname'))
                                            <div class="text-danger">{{ $errors->first('fname') }}</div>
                                        @endif
                                    </div>
                                    <div class="form-group col-sm-6">
                                        {{-- <label for="last_name">Last Name</label> --}}
                                        <input id="last_name" type="text" class="form-control" name="lname"
                                            placeholder="Last Name" value="{{ $patient->user->lname }}" required>
                                        @if ($errors->has('lname'))
                                            <div class="text-danger">{{ $errors->first('lname') }}</div>
                                        @endif
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-sm-4">
                                        <h6 class="d-block">Gender<span style="color: orange">*</span></h6>
                                        <div class="form-check">
                                            <input type="radio" name="gender" value="male"
                                                {{ $patient->user->gender ? ($patient->user->gender == 'male' ? 'checked' : '') : '' }}
                                                required>
                                            <label class="form-check-label" for="exampleRadios2">
                                                Male
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" name="gender" value="female"
                                                {{ $patient->user->gender ? ($patient->user->gender == 'female' ? 'checked' : '') : '' }}>
                                            <label class="form-check-label" for="exampleRadios2">
                                                Female
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" name="gender" value="Prefer not to respond"
                                                {{ $patient->user->gender ? ($patient->user->gender == 'Prefer not to respond' ? 'checked' : '') : '' }}>
                                            <label class="form-check-label" for="exampleRadios2">
                                                Prefer not to respond
                                            </label>
                                            @if ($errors->has('gender'))
                                                <div class="text-danger">{{ $errors->first('gender') }}</div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-sm-6">
                                        <h6 for="ethnicity">Ethnicity<span style="color: orange">*</span></h6>
                                        <select id="ethnicity" class="form-control" name="ethnicity" required>
                                            <option selected disabled>Select Ethnicity</option>
                                            <option value="AfricanAmerican"
                                                {{ $patient->user->ethnicity ? ($patient->user->ethnicity == 'AfricanAmerican' ? 'selected' : '') : '' }}>
                                                African American</option>
                                            <option value="Asian"
                                                {{ $patient->user->ethnicity ? ($patient->user->ethnicity == 'Asian' ? 'selected' : '') : '' }}>
                                                Asian</option>
                                            <option value="Caucasian"
                                                {{ $patient->user->ethnicity ? ($patient->user->ethnicity == 'Caucasian' ? 'selected' : '') : '' }}>
                                                Caucasian</option>
                                            <option value="Hispanic"
                                                {{ $patient->user->ethnicity ? ($patient->user->ethnicity == 'Hispanic' ? 'selected' : '') : '' }}>
                                                Hispanic</option>
                                            <option value="Other"
                                                {{ $patient->user->ethnicity ? ($patient->user->ethnicity == 'Other' ? 'selected' : '') : '' }}>
                                                Other</option>
                                        </select>
                                        @if ($errors->has('ethnicity'))
                                            <div class="text-danger">{{ $errors->first('ethnicity') }}</div>
                                        @endif
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-sm-6">
                                        <h6 for="dob">Date Of Birth <span style="color: orange">*</span></h6>
                                        <input id="dob" type="date" class="form-control" name="dob"
                                            value="{{ $patient->user->dob }}" required>
                                        @if ($errors->has('dob'))
                                            <div class="text-danger">{{ $errors->first('dob') }}</div>
                                        @endif
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <h6 for="email">Email<span style="color: orange">*</span></h6>
                                        <input id="email" type="Email" class="form-control" name="email"
                                            value="{{ $patient->user->email }}" required>
                                        @if ($errors->has('email'))
                                            <div class="text-danger">{{ $errors->first('email') }}</div>
                                        @endif
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <h6 for="phone">Phone<span style="color: orange">*</span></h6>
                                        <input id="phone" type="text" pattern="/^+91(7\d|8\d|9\d)\d{9}$/"
                                            class="form-control" name="phone" value="{{ $patient->user->phone }}"
                                            onKeyPress="if(this.value.length==15) return false;" required>
                                        @if ($errors->has('phone'))
                                            <div class="text-danger">{{ $errors->first('phone') }}</div>
                                        @endif
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <h6 for="contact_name">Contact Name<span style="color: orange">*</span></h6>
                                        <input id="contact_name" type="text" class="form-control" name="contact_name"
                                            value="{{ $patient->user->contact_name }}" required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <h6>Home Address<span style="color: orange">*</span></h6>
                                    </div>
                                    <div class="form-group col-sm-12">
                                        <input id="address1" type="text" class="form-control" name="address_one"
                                            value="{{ $patient->user->address_one }}" placeholder="Street Address 1"
                                            required>
                                        @if ($errors->has('address_one'))
                                            <div class="text-danger">{{ $errors->first('address_one') }}</div>
                                        @endif
                                    </div>
                                    <div class="form-group col-sm-12">
                                        <input id="address2" type="text" class="form-control" name="address_two"
                                            value="{{ $patient->user->address_two }}" placeholder="Street Address 2">
                                        @if ($errors->has('address_two'))
                                            <div class="text-danger">{{ $errors->first('address_two') }}</div>
                                        @endif
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <div class="col-sm-12">
                                            <h6>City<span style="color: orange">*</span></h6>
                                        </div>
                                        <input id="city" type="text" class="form-control" name="city"
                                            value="{{ $patient->user->city }}" required placeholder="City">
                                        @if ($errors->has('city'))
                                            <div class="text-danger">{{ $errors->first('city') }}</div>
                                        @endif
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <div class="col-sm-12">
                                            <h6>State<span style="color: orange">*</span></h6>
                                        </div>
                                        {{-- <label for="address">State</label> --}}
                                        <select name="state" id="" class="form-control">
                                            <option selected disabled>Select State</option>
                                            @foreach ($states as $state)
                                                <option value="{{ $state->name }}"
                                                    {{ old('state', $patient->user->state) == $state->name ? 'selected' : '' }}>
                                                    {{ $state->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-sm-12">
                                        <div class="col-sm-12">
                                            <h6>Zip Code<span style="color: orange">*</span></h6>
                                        </div>
                                        <input id="zipcode" type="number" class="form-control" name="zipcode"
                                            placeholder="Zip Code" value="{{ $patient->user->zipcode }}" required>
                                        @if ($errors->has('zipcode'))
                                            <div class="text-danger">{{ $errors->first('zipcode') }}</div>
                                        @endif
                                    </div>
                                </div>
                                {{-- <div class="row">
                                    <div class="form-group col-sm-4">
                                        <h6>Are you 18 or older?<span style="color: orange">*</span></h6>
                                        <div class="form-check">
                                            <input type="radio" name="che18" class="che18" value="yes" required>
                                            <label class="form-check-label" for="exampleRadios22">
                                                Yes
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" name="che18" class="che18" value="no">
                                            <label class="form-check-label" for="exampleRadios22">
                                                No
                                            </label>
                                        </div>
                                    </div>
                                </div> --}}

                                {{-- <div class="row">
                                    <div class="form-group col-sm-4">
                                        <h6>Do you have Health Insurance<span style="color: orange">*</span></h6>
                                        <div class="form-check">
                                            <input type="radio" name="insurance" class="insurance" value="yes"
                                                {{ old('insurance') == 'yes' ? 'checked' : '' }}
                                                required>
                                            <label class="form-check-label" for="exampleRadios2">
                                                Yes
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" name="insurance" class="insurance" value="no"
                                                {{ old('insurance') ? (old('insurance') == 'no' ? 'checked' : '') : '' }}>
                                            <label class="form-check-label" for="exampleRadios2">
                                                No
                                            </label>
                                        </div>
                                    </div>
                                </div> --}}
                                <div class="row ">
                                    <div class="form-group col-sm-6">
                                        <h6>Insurance Type</h6>
                                        {{-- <input type="text" name="insurance_type" class="form-control"
                                            value="{{ old('insurance_type', '') }}" required> --}}
                                        <select class="form-control" name="insurance_type" required>
                                            <option selected disabled>Select</option>
                                            <option value="self_pay"
                                                {{ $patient->user->insurance_type == 'self_pay' ? 'selected' : '' }}>Self
                                                pay</option>
                                            <option value="medicare"
                                                {{ $patient->user->insurance_type == 'medicare' ? 'selected' : '' }}>
                                                Medicare</option>
                                            <option value="medicaid"
                                                {{ $patient->user->insurance_type == 'medicaid' ? 'selected' : '' }}>
                                                Medicaid</option>
                                            <option value="other_insurance"
                                                {{ $patient->user->insurance_type == 'other_insurance' ? 'selected' : '' }}>
                                                Other Insurance</option>
                                            <option value="commercial"
                                                {{ $patient->user->insurance_type == 'commercial' ? 'selected' : '' }}>
                                                Commercial</option>
                                            <option value="no_insurance"
                                                {{ $patient->user->insurance_type == 'no_insurance' ? 'selected' : '' }}>No
                                                Insurance(Hrsa)</option>
                                        </select>
                                        @if ($errors->has('insurance_type'))
                                            <div class="text-danger">{{ $errors->first('insurance_type') }}
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                <div class="row ">
                                    <div class="form-group col-sm-6">
                                        <h6>Policy Number</h6>
                                        <input name="policy_id" type="text" class="form-control"
                                            value="{{ old('policy_id', $patient->user->policy_id) }}">
                                        @if ($errors->has('policy_id'))
                                            <div class="text-danger">{{ $errors->first('policy_id') }}</div>
                                        @endif
                                    </div>
                                </div>
                                <div class="row ">
                                    <div class="form-group col-sm-6">
                                        <h6>Group Number</h6>
                                        <input type="text" name="group_id" class="form-control"
                                            value="{{ old('group_id', $patient->user->group_id) }}">
                                        @if ($errors->has('group_id'))
                                            <div class="text-danger">{{ $errors->first('group_id') }}</div>
                                        @endif
                                    </div>
                                </div>
                                @if (!$patient->documents->isEmpty())
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <h3>Documents</h3>
                                            @foreach ($patient->documents as $document)
                                                <img src="{{ asset('uploads/user/documents/' . $document->document) }}"
                                                    alt="" width="150" height="150">
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary btn-lg btn-block">
                                        Update
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
        crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            $("#phone").inputmask({
                "mask": "+19999999999"
            });
            $('.insurance_type').hide();
            $('.insuranceFrontDiv').hide();
            $('.insuranceBackDiv').hide();
            $(".insurance").on('click', function() {
                // alert(1)
                if ($(this).val() == 'yes') {
                    $('.insurance_type').show();
                    $('.insuranceFrontDiv').show();
                    $('.insuranceBackDiv').show();
                }
                if ($(this).val() == 'no') {
                    $('.insurance_type').hide();
                    $('.insuranceFrontDiv').hide();
                    $('.insuranceBackDiv').hide();
                }
            });
            $('.18clas').hide();
            $(".che18").on('change', function() {
                if ($(this).val() == 'yes') {
                    $('.18clas').show();
                }
                if ($(this).val() == 'no') {
                    $('.18clas').hide();
                }
            });
        });
    </script>
    <script>
        function show() {
            document.getElementById('upload').style.display = 'block';
        }

        function show2() {
            document.getElementById('upload').style.display = 'none';
        }

        let Category = []
        $(document).ready(function() {

            $.ajax({
                type: "GET",
                url: "{{ route('client.organization.by.id') }}",
                data: {
                    'id': $("#organization").val()
                },
                success: function(response) {
                    $("#orgCode").val(response.org_code);
                    $("#orgState").val(response.state);
                    $("#dynamicState").text(response.state);
                    $('.subOrg').html($('<option>', {
                        value: '',
                        text: 'Select Sub Organization'
                    }));
                    $.each(response.sub_organizations, function(i, e) {
                        $('.subOrg').append($('<option>', {
                            value: e.id,
                            text: e.name
                        }));
                    });
                    if ($("#subOrg").val()) {
                        $(".subOrg > [value=" + $("#subOrg").val() + "]").attr("selected", "true");
                        $(".subOrg").attr("style", "pointer-events: none;");
                        $(".subOrg").attr("readonly", "true");

                        $("#organization").attr("style", "pointer-events: none;");
                    }
                },
                error: function() {
                    alert(
                        'Something went wrong while getting organization data by id for organization code input'
                    );
                }
            });

            $("#organization").on('change', function(e) {
                $("#dynamicText").text($("#organization option:selected").text());
            });

            $("#organization").on('change', function(e) {
                $("#dynamicText").text($("#organization option:selected").text());
            });
            // if ($(".age").is(':checked')) {
            //     document.getElementById('upload').style.display = 'block';
            // } else {
            //     document.getElementById('upload').style.display = 'none';
            // }
            // if ($(".insurance").is(':checked')) {
            //     document.getElementById('open').style.display = 'block';
            // } else {
            //     document.getElementById('open').style.display = 'none';
            // }


            $("#organization").on('change', function() {
                $.ajax({
                    type: "GET",
                    url: "{{ route('client.organization.by.id') }}",
                    data: {
                        'id': $(this).val()
                    },
                    success: function(response) {
                        $("#orgCode").val(response.org_code);
                        $("#orgState").val(response.state);
                        $("#dynamicState").text(response.state);
                        $('.subOrg').html($('<option>', {
                            value: '',
                            text: 'Select Sub Organization'
                        }));
                        $.each(response.sub_organizations, function(i, e) {
                            $('.subOrg').append($('<option>', {
                                value: e.id,
                                text: e.name
                            }));
                        });
                    },
                    error: function() {
                        alert(
                            'Something went wrong while getting organization data by id for organization code input'
                        );
                    }
                });
            });

            $(".subOrg").on('change', function() {
                $.ajax({
                    type: "GET",
                    url: "{{ route('client.suborganization.by.id') }}",
                    data: {
                        'id': $(this).val()
                    },
                    success: function(response) {
                        // console.log(response);
                        $(".subOrgCode").val(response.org_code);
                        $(".subOrgState").val(response.state);
                    },
                    error: function() {
                        alert(
                            'Something went wrong while getting sub organization data by id for organization code input'
                        );
                    }
                });
            });

        });


        function show3() {
            document.getElementById('open').style.display = 'block';
        }

        function show4() {
            document.getElementById('open').style.display = 'none';
        }
        $("#Accept").on('click', function() {
            $("#agree").prop("checked", true);
        });

        // TAKE A PHOTO START Part 1

        let camera_button = document.querySelector("#front_of_picture_id");
        let video = document.querySelector("#front_of_picture_video_id");
        let click_button = document.querySelector("#front_of_picture_id_click_photo");
        let canvas = document.querySelector("#front_of_picture_id_canvas_photo");
        canvas.style.display = 'none';
        camera_button.addEventListener('click', async function() {
            let stream = await navigator.mediaDevices.getUserMedia({
                video: true,
                audio: false
            });
            video.srcObject = stream;
        });
        click_button.addEventListener('click', function() {
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
            let image_data_url = canvas.toDataURL('image/jpeg');

            // data url of the image
            if (image_data_url != null) {
                canvas.style.display = 'block';
                // console.log(image_data_url);
                let file = null;
                let blob = document.querySelector("#front_of_picture_id_canvas_photo").toBlob(function(blob) {
                    file = new File([blob], 'frontPic.png', {
                        type: 'image/png'
                    });
                    let flleInput = $("#frontPic").get(0);
                    let container = new DataTransfer();
                    container.items.add(file);
                    flleInput.files = container.files;
                    // flleInput
                    // console.log(file);
                    // let formData = new FormData;
                    // formData.append('_token', '{{ csrf_token() }}');
                    // formData.append('webPhoto', file);
                    // $.ajax({
                    //     url: "{{ route('client.webPhoto.process') }}",
                    //     method: "post",
                    //     data: formData,
                    //     success: result => console.log(result),
                    //     cache: false,
                    //     contentType: false,
                    //     processData: false
                    // });
                }, 'image/png');
            }
        });

        // TAKE A PHOTO END

        // TAKE A PHOTO START Part 2

        let camera_button_2 = document.querySelector("#back_of_picture_id");
        let video_2 = document.querySelector("#back_of_picture_video_id");
        let click_button_2 = document.querySelector("#back_of_picture_id_click_photo");
        let canvas_2 = document.querySelector("#back_of_picture_id_canvas_photo");
        canvas_2.style.display = 'none';
        camera_button_2.addEventListener('click', async function() {
            let stream = await navigator.mediaDevices.getUserMedia({
                video: true,
                audio: false
            });
            video_2.srcObject = stream;
        });
        click_button_2.addEventListener('click', function() {
            canvas_2.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
            let image_data_url = canvas_2.toDataURL('image/jpeg');

            // data url of the image
            if (image_data_url != null) {
                canvas_2.style.display = 'block';
                // console.log(image_data_url);
                let file = null;
                let blob = document.querySelector("#back_of_picture_id_canvas_photo").toBlob(function(blob) {
                    file = new File([blob], 'backPic.png', {
                        type: 'image/png'
                    });
                    let flleInput = $("#backPic").get(0);
                    let container = new DataTransfer();
                    container.items.add(file);
                    flleInput.files = container.files;
                    // flleInput
                    // console.log(file);
                    // let formData = new FormData;
                    // formData.append('_token', '{{ csrf_token() }}');
                    // formData.append('webPhoto', file);
                    // $.ajax({
                    //     url: "{{ route('client.webPhoto.process') }}",
                    //     method: "post",
                    //     data: formData,
                    //     success: result => console.log(result),
                    //     cache: false,
                    //     contentType: false,
                    //     processData: false
                    // });
                }, 'image/png');
            }
        });

        // TAKE A PHOTO END

        let camera_button_3 = document.querySelector("#front_of_picture_ins");
        let video_3 = document.querySelector("#front_of_picture_video_ins");
        let click_button_3 = document.querySelector("#front_of_picture_ins_click_photo");
        let canvas_3 = document.querySelector("#front_of_picture_ins_canvas_photo");
        canvas_3.style.display = 'none';
        camera_button_3.addEventListener('click', async function() {
            let stream = await navigator.mediaDevices.getUserMedia({
                video: true,
                audio: false
            });
            video_3.srcObject = stream;
        });
        click_button_3.addEventListener('click', function() {
            canvas_3.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
            let image_data_url = canvas_3.toDataURL('image/jpeg');

            // data url of the image
            if (image_data_url != null) {
                canvas_3.style.display = 'block';
                // console.log(image_data_url);
                let file = null;
                let blob = document.querySelector("#front_of_picture_ins_canvas_photo").toBlob(function(blob) {
                    file = new File([blob], 'fronInsurance.png', {
                        type: 'image/png'
                    });
                    let flleInput = $("#insuranceFrontPic").get(0);
                    let container = new DataTransfer();
                    container.items.add(file);
                    flleInput.files = container.files;
                    // flleInput
                    // console.log(file);
                    // let formData = new FormData;
                    // formData.append('_token', '{{ csrf_token() }}');
                    // formData.append('webPhoto', file);
                    // $.ajax({
                    //     url: "{{ route('client.webPhoto.process') }}",
                    //     method: "post",
                    //     data: formData,
                    //     success: result => console.log(result),
                    //     cache: false,
                    //     contentType: false,
                    //     processData: false
                    // });
                }, 'image/png');
            }
        });

        // TAKE A PHOTO END

        // TAKE A PHOTO END

        let camera_button_4 = document.querySelector("#back_of_picture_ins");
        let video_4 = document.querySelector("#back_of_picture_video_ins");
        let click_button_4 = document.querySelector("#back_of_picture_ins_click_photo");
        let canvas_4 = document.querySelector("#back_of_picture_ins_canvas_photo");
        canvas_4.style.display = 'none';
        camera_button_4.addEventListener('click', async function() {
            let stream = await navigator.mediaDevices.getUserMedia({
                video: true,
                audio: false
            });
            video_4.srcObject = stream;
        });
        click_button_4.addEventListener('click', function() {
            canvas_4.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
            let image_data_url = canvas_4.toDataURL('image/jpeg');

            // data url of the image
            if (image_data_url != null) {
                canvas_4.style.display = 'block';
                // console.log(image_data_url);
                let file = null;
                let blob = document.querySelector("#back_of_picture_ins_canvas_photo").toBlob(function(blob) {
                    file = new File([blob], 'backInsurance.png', {
                        type: 'image/png'
                    });
                    let flleInput = $("#insuranceBackPic").get(0);
                    let container = new DataTransfer();
                    container.items.add(file);
                    flleInput.files = container.files;
                    // flleInput
                    // console.log(file);
                    // let formData = new FormData;
                    // formData.append('_token', '{{ csrf_token() }}');
                    // formData.append('webPhoto', file);
                    // $.ajax({
                    //     url: "{{ route('client.webPhoto.process') }}",
                    //     method: "post",
                    //     data: formData,
                    //     success: result => console.log(result),
                    //     cache: false,
                    //     contentType: false,
                    //     processData: false
                    // });
                }, 'image/png');
            }

        });
    </script>
@endpush