@extends('admin.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('admin.add.user.process') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="card-body">
                                <div class="text-center">
                                    <h4>Patient Requisition Form - Covid-19 Testing</h4>
                                </div>
                                <div class="row text-center mt-1 mb-5">
                                    <div class="col-sm-12">
                                        <label>ONE LOVE LABORATORY, 4922 ALBEMARLE RD</label>
                                        <label>CHARLOTTE, NC 28205, CLIA ID: 34D2121983</label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <h5 class="mt-2">Account</h5>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <select id="organization" class="form-control"
                                            {{ request()->org ? 'readonly' : '' }} required>
                                            <option value="" selected>Select Account</option>
                                            @foreach ($organizations as $organization)
                                                <option value="{{ $organization->id }}"
                                                    @if (!isset(request()->org)) {{ old('organization') ? old('organization') == $organization->id : 'selected' }} @endif
                                                    {{ request()->org ? (request()->org == $organization->id ? 'selected' : 'disabled') : '' }}>
                                                    {{ $organization->name }}</option>
                                            @endforeach
                                        </select>
                                        @if ($errors->has('organization'))
                                            <div class="text-danger">{{ $errors->first('organization') }}</div>
                                        @endif
                                    </div>
                                </div>
                                <div class="row" style="display: none;">
                                    <div class="col-sm-6">
                                        <h5 class="mt-2">Account Code</h5>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <input id="orgCode" type="number" class="form-control" name="orgCode"
                                            value="{{ old('orgCode', request()->orgCode ?? '') }}" min="5"
                                            onKeyPress="if(this.value.length==5) return false;"
                                            {{ request()->orgCode ? 'readonly' : '' }}>
                                        @if ($errors->has('orgCode'))
                                            <div class="text-danger">{{ $errors->first('orgCode') }}</div>
                                        @endif
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <h5 class="mt-2">Account State</h5>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <input id="orgState" type="text" class="form-control"
                                            value="{{ request()->orgState ? request()->orgState : '' }}"
                                            {{ request()->orgState ? 'readonly' : '' }}>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <h5 class="mt-2">Site</h5>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <select name="organization" class="form-control subOrg" required>

                                        </select>
                                    </div>
                                </div>
                                <div class="row" style="display: none;">
                                    <div class="col-sm-6">
                                        <h5 class="mt-2">Site Code</h5>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <input type="number" class="form-control subOrgCode" name="orgCode">
                                    </div>
                                </div>
                                <div class="row" style="display: none;">
                                    <div class="col-sm-6">
                                        <h5 class="mt-2">Site State</h5>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <input type="text" class="form-control subOrgState">
                                    </div>
                                </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="@if (old('fname') != null) {{ old('fname') }} @endif" 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="@if (old('lname') != null) {{ old('lname') }} @endif" 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>
                                        <input id="ethnicity" type="text" class="form-control" name="ethnicity"
                                            value="@if (old('ethnicity') != null) {{ old('ethnicity') }} @endif" required>
                                        @if ($errors->has('ethnicity'))
                                            <div class="text-danger">{{ $errors->first('ethnicity') }}</div>
                                        @endif
                                    </div> --}}
                                    <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">African American</option>
                                            <option value="Asian">Asian</option>
                                            <option value="Caucasian">Caucasian</option>
                                            <option value="Hispanic">Hispanic</option>
                                            <option value="Other">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="SSN">SSN</h6>
                                        <input id="SSN" type="text" class="form-control" name="ssn"
                                            placeholder="000-00-0000" value="{{ old('ssn', '') }}"
                                            onKeyPress="if(this.value.length==11) return false;">
                                        @if ($errors->has('ssn'))
                                            <div class="text-danger">{{ $errors->first('ssn') }}</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-sm-6">
                                        <h6 for="email">Email<span style="color: orange">*</span></h6>
                                        <input id="email" type="email" class="form-control" name="email"
                                            placeholder="example@example.com" 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-sm-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}$/"
                                            placeholder="(000)-0000-0000" 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="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="@if (old('address_one') != null) {{ old('address_one') }} @endif"
                                            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="@if (old('address_two') != null) {{ old('address_two') }} @endif"
                                            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">
                                        <input id="city" type="text" class="form-control" name="city"
                                            value="@if (old('city') != null) {{ old('city') }} @endif" required
                                            placeholder="City">
                                        @if ($errors->has('city'))
                                            <div class="text-danger">{{ $errors->first('city') }}</div>
                                        @endif
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <input id="state" type="text" class="form-control" name="state"
                                            value="@if (old('state') != null) {{ old('state') }} @endif" required
                                            placeholder="State">
                                        @if ($errors->has('state'))
                                            <div class="text-danger">{{ $errors->first('state') }}</div>
                                        @endif
                                    </div>
                                    <div class="form-group col-sm-12">
                                        <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-6">
                                        <h6>DL/State ID Number</h6>
                                        <input type="number" name="dl_or_state_id" class="form-control"
                                            value="{{ old('dl_or_state_id', '') }}" required>
                                        @if ($errors->has('dl_or_state_id'))
                                            <div class="text-danger">{{ $errors->first('dl_or_state_id') }}</div>
                                        @endif
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-sm-6">
                                        <h6>DL/ID Issuing State</h6>
                                        <input name="dl_or_id_issuing_state" type="number" class="form-control"
                                            value="{{ old('dl_or_id_issuing_state', '') }}" required>
                                        @if ($errors->has('dl_or_id_issuing_state'))
                                            <div class="text-danger">
                                                {{ $errors->first('dl_or_id_issuing_state') }}
                                            </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">Self pay</option>
                                            <option value="medicare">Medicare</option>
                                            <option value="medicaid">Medicaid</option>
                                            <option value="other_insurance">Other Insurance</option>
                                            <option value="commercial">Commercial</option>
                                            <option value="no_insurance">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 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">
                                        @if ($errors->has('insuranceFrontPic'))
                                            <div class="text-danger">{{ $errors->first('insuranceFrontPic') }}
                                            </div>
                                        @endif
                                    </div>

                                </div>

                                <div class="row 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">
                                        @if ($errors->has('insuranceBackPic'))
                                            <div class="text-danger">{{ $errors->first('insuranceBackPic') }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-sm-4">
                                        <h6 class="d-block">Relationship to Patient</h6>
                                        <div class="form-check">
                                            <input type="radio" name="relationship_to_patient" value="SELF"
                                                {{ old('relationship_to_patient') == 'SELF' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="exampleRadios3">
                                                SELF
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" name="relationship_to_patient" value="SPOUSE"
                                                {{ old('relationship_to_patient') == 'SPOUSE' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="exampleRadios3">
                                                SPOUSE
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" name="relationship_to_patient" value="CHILD"
                                                {{ old('relationship_to_patient') == 'CHILD' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="exampleRadios3">
                                                CHILD
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" name="relationship_to_patient" value="OTHER"
                                                {{ old('relationship_to_patient') == 'OTHER' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="exampleRadios3">
                                                OTHER
                                            </label>
                                        </div>
                                        @if ($errors->has('relationship_to_patient'))
                                            <div class="text-danger">
                                                {{ $errors->first('relationship_to_patient') }}
                                            </div>
                                        @endif
                                    </div>
                                </div>





                                <div class="row" style="display: none;">
                                    <div class="form-group col-sm-6">
                                        <h6>COLLECTION DATE (Today's Date)<span style="color: orange">*</span></h6>
                                        <input type="date" class="form-control" name="date_of_collection"
                                            value="{{ old('date_of_collection', '') }}">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-sm-12">
                                        <label class="d-block">Test Selection and Diagnosis Code
                                            Selection</label>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="buccal_swab"
                                                {{ old('buccal_swab') ? 'checked' : '' }} name="buccal_swab" checked
                                                disabled>
                                            <label class="form-check-label" for="buccal_swab">Buccal Swab</label>
                                            @if ($errors->has('buccal_swab'))
                                                <div class="text-danger">{{ $errors->first('buccal_swab') }}
                                                </div>
                                            @endif
                                        </div>
                                        {{-- <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="nasal_swab"
                                                {{ old('nasal_swab') ? 'checked' : '' }} name="nasal_swab">
                                            <label class="form-check-label" for="nasal_swab">Nasal Swab</label>
                                            @if ($errors->has('nasal_swab'))
                                                <div class="text-danger">{{ $errors->first('nasal_swab') }}
                                                </div>
                                            @endif
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="saliva_swab"
                                                value="saliva_swab" {{ old('saliva_swab') ? 'checked' : '' }}
                                                name="saliva_swab">
                                            <label class="form-check-label" for="saliva_swab">Saliva Swab</label>
                                            @if ($errors->has('saliva_swab'))
                                                <div class="text-danger">{{ $errors->first('saliva_swab') }}
                                                </div>
                                            @endif
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="nasopharyngeal_swab"
                                                value="Nasopharyngeal Swab" name="nasopharyngeal_swab"
                                                {{ old('nasopharyngeal_swab') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="nasopharyngeal_swab">Nasopharyngeal
                                                Swab</label>
                                            @if ($errors->has('nasopharyngeal_swab'))
                                                <div class="text-danger">
                                                    {{ $errors->first('nasopharyngeal_swab') }}</div>
                                            @endif
                                        </div> --}}
                                    </div>
                                </div>



                                <div class="row">
                                    <div class="form-group col-sm-3">
                                        <label for="barcode">BarCode ID</label>
                                        <input id="barcode" type="number" class="form-control" name="barcode"
                                            value="{{ old('barcode', '') }}" required>
                                    </div>
                                    <div class="form-group col-sm-3">
                                        <label for="race">Race</label>
                                        <input id="race" type="text" class="form-control" name="race"
                                            value="{{ old('race', '') }}" required>
                                    </div>
                                    <div class="form-group col-sm-3">
                                        <label for="social_security">Social Security</label>
                                        <input id="social_security" type="number" class="form-control"
                                            name="social_security" value="{{ old('social_security', '') }}">
                                    </div>
                                    {{-- <div class="form-group col-sm-3">
                                        <label for="date_of_collection">Date of Collection</label>
                                        <input id="date_of_collection" type="date" class="form-control"
                                            name="date_of_collection" value="{{ old('date_of_collection', '') }}"
                                            required>
                                    </div> --}}
                                    <div class="form-group col-sm-3">
                                        <label for="time_of_collection">Time of Collection</label>
                                        <input id="time_of_collection" type="time" class="form-control"
                                            name="time_of_collection" value="{{ old('time_of_collection', '') }}"
                                            required>
                                    </div>
                                    <div class="form-group col-sm-3">
                                        <label for="type_of_specimen">Type of Specimen</label>
                                        <input id="type_of_specimen" type="text" class="form-control"
                                            name="type_of_specimen" value="{{ old('type_of_specimen', '') }}" required>
                                    </div>
                                    <div class="form-group col-sm-3">
                                        <label for="date_recived">Date Recived</label>
                                        <input id="date_recived" type="date" class="form-control" name="date_received"
                                            value="{{ old('date_received', '') }}" required>
                                    </div>
                                    <div class="form-group col-sm-3">
                                        <label for="icd_10_code">ICD 10 Code</label>
                                        <input id="icd_10_code" type="text" class="form-control" name="icd_10_codes"
                                            value="{{ old('icd_10_codes', '') }}" required>
                                    </div>
                                    <div class="form-group col-sm-3">
                                        <label for="insurer">Insurance company</label>
                                        <input id="insurer" type="text" class="form-control" name="insurer"
                                            value="{{ old('insurer', '') }}" required>
                                    </div>
                                    <div class="form-group col-sm-3">
                                        <label for="relation_to_insured">Relation to Insured</label>
                                        <input id="relation_to_insured" type="text" class="form-control"
                                            name="relationship_to_insured"
                                            value="{{ old('relationship_to_insured', '') }}" required>
                                    </div>
                                    <div class="form-group col-sm-3">
                                        <label for="test_type">Test Type</label>
                                        <input id="test_type" type="text" class="form-control" name="test_type"
                                            value="{{ old('test_type', '') }}" required>
                                    </div>
                                    <div class="form-group col-sm-3">
                                        <label for="test_option">Test Option</label>
                                        <input id="test_option" type="text" class="form-control" name="test_type"
                                            value="{{ old('test_type', '') }}" required>
                                    </div>
                                    <div class="form-group col-sm-3">
                                        <label for="performing_lab">Performing Laboratory</label>
                                        <input id="performing_lab" type="text" class="form-control" name="performing_lab"
                                            value="One Love Lab" disabled>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12 text-right">
                                        <button type="submit" class="btn btn-lg btn-success">Register</button>
                                    </div>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      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">
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn" data-dismiss="modal" id="Accept" onclick="check()">I
                      Accept</button>
              </div>
          </div>
      </div>
  </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        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">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                    scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
                    into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
                    release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
                    software like Aldus PageMaker including versions of Lorem Ipsum.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" data-dismiss="modal" >I
                        Accept</button>
                </div>
            </div>
        </div>
    </div>

    <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>
        var wrapper1 = document.getElementById("signature-pad-1"),
            canvas1 = wrapper1.querySelector("#pad"),
            signaturePad1;

        function resizeCanvas(vanvas) {
            var ratio = window.devicePixelRatio || 1;
            vanvas.width = vanvas.offsetWidth * ratio;
            vanvas.height = vanvas.offsetHeight * ratio;
            vanvas.getContext("2d").scale(ratio, ratio);
        }

        $(window).on("load", function() {
            resizeCanvas(canvas1);
            signaturePad1 = new SignaturePad(canvas1, {
                backgroundColor: 'rgb(255,255,255)',

                onBegin: function() {
                    console.log('onbegin');
                },
                onEnd: function() {
                    console.log('onEnd');
                    var data = signaturePad1.toDataURL('image/png');

                    // var data_uri = signaturePad1.toDataURL();
                    //convert to base64
                    // var base64Data = data.replace(/^data:image\/\w+;base64,/, "");
                    // $("#imgs").attr("src", data_uri);
                    // $('#SignupImage1').val(base64Data);
                    let file = null;
                    let blob = document.querySelector("#pad").toBlob(function(blob) {
                        file = new File([blob], 'signature.png', {
                            type: 'image/png'
                        });
                        let flleInput = $("#SignupImage1").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');
                }
            });

            var saveButton1 = document.getElementById('btnSubmit'),
                clearButton1 = document.getElementById('btnRest');

            saveButton1.addEventListener('click', function(event) {
                var data = signaturePad1.toDataURL('image/png');
                //console.log(data);
                //window.open(data);
                $('#SignupImage1').val(data);
            });

            clearButton1.addEventListener('click', function(event) {
                signaturePad1.clear();
            });
        })
    </script>
    <script>
        function show() {
            document.getElementById('upload').style.display = 'block';
        }

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

        let Category = []
        $(document).ready(function() {
            $('.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();
                    $('#myModal').modal('show');
                }
                if ($(this).val() == 'no') {
                    $('.18clas').hide();
                }
            });

            $("#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';
            // }
            $("#phone").inputmask({
                "mask": "+19999999999"
            });

            $("#SSN").inputmask({
                "mask": "999-99-9999"
            });

            $("#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>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>
    <script>
        function show() {
            document.getElementById('upload').style.display = 'block';
        }

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

        $(document).ready(function() {
            $("#phone").inputmask({
                "mask": "+19999999999"
            });
        });
    </script>
@endpush