@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;

        }

        .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 col-sm-10 offset-sm-1 col-md-8 offset-md-1 col-lg-8 offset-lg-1 col-xl-8 offset-xl-1"> --}} 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>
                        <form action="{{ route('collector.add.patient.process', ['org_id' => request()->org_id]) }}"
                            method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="card-body">
                                @csrf

                                <div class="text-center">
                                    <h5>Patient Application</h5>
                                </div>

                                <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="{{ old('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="{{ old('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"
                                                {{ old('gender') ? (old('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"
                                                {{ old('gender') ? (old('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"
                                                {{ old('gender') ? (old('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"
                                                {{ old('ethnicity') ? (old('ethnicity') == 'AfricanAmerican' ? 'selected' : '') : '' }}>
                                                African American</option>
                                            <option value="Asian"
                                                {{ old('ethnicity') ? (old('ethnicity') == 'Asian' ? 'selected' : '') : '' }}>
                                                Asian</option>
                                            <option value="Caucasian"
                                                {{ old('ethnicity') ? (old('ethnicity') == 'Caucasian' ? 'selected' : '') : '' }}>
                                                Caucasian</option>
                                            <option value="Hispanic"
                                                {{ old('ethnicity') ? (old('ethnicity') == 'Hispanic' ? 'selected' : '') : '' }}>
                                                Hispanic</option>
                                            <option value="Other"
                                                {{ old('ethnicity') ? (old('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="{{ old('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="{{ old('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="{{ old('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="{{ old('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="{{ old('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="{{ old('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="{{ old('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') ? (old('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="{{ old('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 18clas">
                                    <div class="form-group col-sm-12">
                                        <h6>Take Photo of Front of Picture ID *Required for all adults 18 and older
                                        </h6>
                                        <canvas id="front_of_picture_id_canvas_photo" width="340" height="240"></canvas>
                                        <button type="button" class="btn btn-success" id="front_of_picture_id"
                                            data-toggle="modal" data-target="#front_of_picture_video_id_modal">Take
                                            Photo</button>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <input id="frontPic" type="file" class="form-control" name="frontPic">
                                        @if ($errors->has('frontPic'))
                                            <div class="text-danger">{{ $errors->first('frontPic') }}</div>
                                        @endif
                                    </div>
                                    <div class="form-group col-sm-12">
                                        <h6>Take Photo of Back of Picture ID *Required for all adults 18 and older
                                        </h6>
                                        <canvas id="back_of_picture_id_canvas_photo" width="340" height="240"></canvas>
                                        <button type="button" class="btn btn-success" id="back_of_picture_id"
                                            data-toggle="modal" data-target="#back_of_picture_video_id_modal">Take
                                            Photo</button>
                                    </div>
                                    <div class="col-sm-6 form-group">
                                        <input id="backPic" type="file" class="form-control" name="backPic">
                                        @if ($errors->has('backPic'))
                                            <div class="text-danger">{{ $errors->first('backPic') }}</div>
                                        @endif
                                    </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') ? (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 insurance_type">
                                    <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"
                                                {{ old('insurance_type') == 'self_pay' ? 'selected' : '' }}>Self pay
                                            </option>
                                            <option value="medicare"
                                                {{ old('insurance_type') == 'medicare' ? 'selected' : '' }}>Medicare
                                            </option>
                                            <option value="medicaid"
                                                {{ old('insurance_type') == 'medicaid' ? 'selected' : '' }}>Medicaid
                                            </option>
                                            <option value="other_insurance"
                                                {{ old('insurance_type') == 'other_insurance' ? 'selected' : '' }}>Other
                                                Insurance</option>
                                            <option value="commercial"
                                                {{ old('insurance_type') == 'commercial' ? 'selected' : '' }}>Commercial
                                            </option>
                                            <option value="no_insurance"
                                                {{ old('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 insurance_type">
                                    <div class="form-group col-sm-6">
                                        <h6>Policy Number</h6>
                                        <input name="policy_id" type="text" class="form-control"
                                            value="{{ old('policy_id', '') }}">
                                        @if ($errors->has('policy_id'))
                                            <div class="text-danger">{{ $errors->first('policy_id') }}</div>
                                        @endif
                                    </div>
                                </div>
                                <div class="row insurance_type">
                                    <div class="form-group col-sm-6">
                                        <h6>Group Number</h6>
                                        <input type="text" name="group_id" class="form-control"
                                            value="{{ old('group_id', '') }}">
                                        @if ($errors->has('group_id'))
                                            <div class="text-danger">{{ $errors->first('group_id') }}</div>
                                        @endif
                                    </div>
                                </div>



                                <div class="row insuranceFrontDiv insurance_type">
                                    <div class="form-group col-sm-12">
                                        <h6>Take Photo of Front of Insurance Card</h6>
                                        <canvas id="front_of_picture_ins_canvas_photo" width="340" height="240"></canvas>
                                        <button type="button" class="btn btn-success" id="front_of_picture_ins"
                                            data-toggle="modal" data-target="#front_of_picture_video_ins_modal">Take
                                            Photo</button>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <input id="insuranceFrontPic" type="file" class="form-control"
                                            name="insuranceFrontPic" accept="image/*">
                                        @if ($errors->has('insuranceFrontPic'))
                                            <div class="text-danger">
                                                {{ $errors->first('insuranceFrontPic') }}
                                            </div>
                                        @endif
                                    </div>

                                </div>

                                <div class="row insuranceBackDiv insurance_type">
                                    <div class="form-group col-sm-12">
                                        <h6>Take Photo of Back of Insurance Card</h6>
                                        <canvas id="back_of_picture_ins_canvas_photo" width="340" height="240"></canvas>
                                        <button type="button" class="btn btn-success" id="back_of_picture_ins"
                                            data-toggle="modal" data-target="#back_of_picture_video_ins_modal">Take
                                            Photo</button>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <input id="insuranceBackPic" type="file" class="form-control"
                                            name="insuranceBackPic" accept="image/*">
                                        @if ($errors->has('insuranceBackPic'))
                                            <div class="text-danger">{{ $errors->first('insuranceBackPic') }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary btn-lg btn-block">
                                        Add
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="modal fade" id="front_of_picture_video_id_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog  card" role="document">
            <div class="modal-content" style="background-color: #923852">
                <div class="modal-header">
                    {{-- <h5 class="modal-title" id="exampleModalLabel">Lorem Ipsum</h5> --}}
                    <a class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" id="span-1">&times;</span>
                    </a>
                </div>
                <div class="modal-body">
                    <video id="front_of_picture_video_id" width="100%" height="240" autoplay></video>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="front_of_picture_id_click_photo"
                        data-dismiss="modal">Click
                        Photo</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="back_of_picture_video_id_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog  card" role="document">
            <div class="modal-content" style="background-color: #923852">
                <div class="modal-header">
                    {{-- <h5 class="modal-title" id="exampleModalLabel">Lorem Ipsum</h5> --}}
                    <a class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" id="span-1">&times;</span>
                    </a>
                </div>
                <div class="modal-body">
                    <video id="back_of_picture_video_id" width="100%" height="240" autoplay></video>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="back_of_picture_id_click_photo"
                        data-dismiss="modal">Click
                        Photo</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="front_of_picture_video_ins_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog  card" role="document">
            <div class="modal-content" style="background-color: #923852">
                <div class="modal-header">
                    {{-- <h5 class="modal-title" id="exampleModalLabel">Lorem Ipsum</h5> --}}
                    <a class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" id="span-1">&times;</span>
                    </a>
                </div>
                <div class="modal-body">
                    <video id="front_of_picture_video_ins" width="100%" height="240" autoplay></video>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="front_of_picture_ins_click_photo"
                        data-dismiss="modal">Click
                        Photo</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="back_of_picture_video_ins_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog  card" role="document">
            <div class="modal-content" style="background-color: #923852">
                <div class="modal-header">
                    {{-- <h5 class="modal-title" id="exampleModalLabel">Lorem Ipsum</h5> --}}
                    <a class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" id="span-1">&times;</span>
                    </a>
                </div>
                <div class="modal-body">
                    <video id="back_of_picture_video_ins" width="100%" height="240" autoplay></video>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="back_of_picture_ins_click_photo"
                        data-dismiss="modal">Click
                        Photo</button>
                </div>
            </div>
        </div>
    </div>
@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() {
                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('click', 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