@extends('layout.admin_layout')

@section('title', 'Patient Edit')

@section('body')

@section('header', 'Patient Edit')
@section('badge')


@endsection


<div class="card">

    <div class="card-body">
        @foreach ($errors->all() as $error)
        <div class="alert alert-danger">
            {{ $error }}
        </div>
        @endforeach
        <form role="form" method="POST" action="{{ route('admin.patient_update') }}" enctype="multipart/form-data" id="cmsForm">
            {{ csrf_field() }}


            <div class="card-body">
                <div class="form-group row">
                    <label class="col-md-2 form-control-label" for="name">Name <span class="text-danger">*</span></label>
                    <input type="hidden" name="id" class="form-control" value="{{ $patient->id }}">
                    <div class="col-md-4">

                        <input type="text" name="name" id="name" class="form-control" value="{{ $patient->name }}" required>

                    </div>
                    <label class="col-md-2 form-control-label" for="name">Email </label>

                    <div class="col-md-4">

                        <input type="text" name="email" id="email" class="form-control" value="{{ $patient->email }}" required disabled>

                    </div>
                </div>

                <div class="form-group row">

                    <label class="col-md-2 form-control-label" for="name">Phone <span class="text-danger">*</span></label>
                    <div class="col-md-1">

                        <input type="hidden" name="country_code" class="form-control fil" id="country_code" value="{{$patient->country}}" placeholder="phone" autocomplete="off">
                        <input type="hidden" name="dial_code" class="form-control fil" id="dial_code" value="{{$patient->code}}" placeholder="phone" autocomplete="off">
                        <input type="tel" name="code" class="form-control fil"  id="code"  autocomplete="off">

                    </div>

                    <div class="col-md-3">

                        <input type="text" name="phone" id="phone" maxlength="10" oninput="this.value=this.value.replace(/[^0-9]/g,'')" class="form-control" value="{{ $patient->phone }}" required>

                    </div>
                    <label class="col-md-2 form-control-label" for="name">Gender <span class="text-danger">*</span></label>

                    <div class="col-md-4">

                        <select class="form-control" name="sex" id="sex" aria-label="Default select example" required>
                            <option value="">Select</option>
                            <option value="Male" @if($patient->sex == 'Male') selected @endif>Male</option>
                            <option value="Female" @if($patient->sex == 'Female') selected @endif>Female</option>
                            <option value="Others" @if($patient->sex == 'Others') selected @endif >Others</option>
                        </select>



                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-md-2 form-control-label" for="name">Address <span class="text-danger">*</span></label>

                    <div class="col-md-4">

                        <input type="text" name="address" id="address" class="form-control" value="{{ $patient->address }}" required>

                    </div>
                    <label class="col-md-2 form-control-label" for="name">DOB <span class="text-danger">*</span></label>

                    <div class="col-md-4">

                        <input type="text" name="dob" id="dob" value="{{ date('m/d/Y',strtotime($patient->dob)) }}" max="2025-12-11" class="form-control" required>

                    </div>
                </div>
                <!-- <div class="form-group row">
                    <label class="col-md-2 form-control-label">Allergy <span class="text-danger">*</span></label>

                    <div class="col-md-4" id="allergy_d">
                        <select name="allergy[]" id="allergy" style="background-color:black" onchange="chk_allergy(this.name)" multiple>
                        @foreach(patient_allergy($patient->id) as $row)
                            <option value="{{$row->id}}" selected>{{$row->allergy}}</option>
                            @endforeach
                        @foreach(patient_allergy_ns($patient->id) as $row)
                            <option value="{{$row->id}}">{{$row->allergy}}</option>
                            @endforeach
                        </select>

                    </div>



                </div> -->
                <!-- <div class="form-group row" id="other_allergy_div" style="display:none">
                 
                        <label class="col-md-2 form-control-label" for="name">Other Allergy</label>

                        <div class="col-md-4">
                            <input type="text" name="other_allergy" id="other_allergy" class="form-control">


                        </div>
                 
                </div> -->
                <div class="form-group row">
                <label class="col-md-2 form-control-label" for="name">Profile Image </label>
                <div class="col-md-4 custom-file">
                    <input type="file" class="custom-file-input" name="profile_image" id="inputGroupFile01">
                    @if($patient->profile_image!='')
                    <label class="custom-file-label" for="inputGroupFile01">{{$patient->profile_image}}</label>
                    @else
                    <label class="custom-file-label" for="inputGroupFile01">Choose Image</label>
                    @endif
                </div>
                <div class="col-md-4">
                        

                        <input type="hidden" name="profile_image_old" id="profile_image_old" class="form-control" value="{{ $patient->profile_image }}">
                        <br>
                        @if($patient->profile_image !== '')
                        <a href="{{$patient->profile_image}}" target="_blank"> <img src="{{asset($patient->profile_image)}}" class="img-circle img-fluid" style="height:100px;width:100px" title="Profile image" alt="alt text here"></a>
                        @else
                        <a href="#" target="_blank"> <img src="{{asset('images/noimage.png')}}" class="img-circle img-fluid" style="height:100px;width:100px" title="Profile image" alt="alt text here"></a>
                        @endif
                    </div>
                </div>


                <div class="form-group row">


                 

                    
                    <label class="col-md-2 form-control-label">Color Code </label>

                    <div class="col-md-4">

                        <select class="form-control" name="color_code" id="color_code" aria-label="Default select example">
                            <option value="">Select</option>
                            @foreach($colorCode as $row)
                            <option value="{{$row->id}}" @if($patient->color_code == $row->id) selected @endif>{{$row->color}}({{$row->type}})</option>
                            @endforeach

                        </select>

                    </div>

                </div>



            </div>
            <div class="card-footer">
                <div class="col text-right">
                    <a href="{{ url()->previous() }}" class="btn btn-outline-danger"><i class="far fa-arrow-alt-circle-left"></i> Back</a>
                    <button type="submit" class="btn btn-warning"><i class="far fa-save"></i> Update</button>

                </div>
            </div>
        </form>
    </div>
    <!-- /.card-body -->

    <!-- /.card-footer-->
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">


<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
  $( function() {
    $( "#dob" ).datepicker({  maxDate: 0 });
  } );
  
  </script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyCyJ7Lirxe2ObjpsZbKTgeafLSA9bYSA0M&libraries=places"></script>
<script>
    $(document).ready(function() {
        $("#latitudeArea").addClass("d-none");
        $("#longtitudeArea").addClass("d-none");
    });
</script>

<script>
    google.maps.event.addDomListener(window, 'load', initialize);

    function initialize() {
        var input = document.getElementById('address');
        var autocomplete = new google.maps.places.Autocomplete(input);

        autocomplete.addListener('place_changed', function() {
            var place = autocomplete.getPlace();
            $('#latitude').val(place.geometry['location'].lat());
            $('#longitude').val(place.geometry['location'].lng());

            $("#latitudeArea").removeClass("d-none");
            $("#longtitudeArea").removeClass("d-none");
        });
    }
</script>


<script>
$(document).ready(function(){
  $('#inputGroupFile01').on('change',function(){
      //get the file name
      var fileName = $(this).val();
      //replace the "Choose a file" label
      $(this).next('.custom-file-label').html(fileName);
  })
})

</script>
<script type="text/javascript">
    $('#allergy').select2({
        width: '100%',

        placeholder: "Select a Allergy",
        allowClear: true
    });

    function chk_allergy(value) {
        var str = $("#allergy :selected").map((_, e) => e.value).get();
        var str2 = '6';
        var index = str.indexOf("6");
        var index_n = str.indexOf('5');
        if (index !== -1) {

            $("#other_allergy_div").show();


        } else if (index_n !== -1) {
            $("#other_allergy_div").hide();

        } else {
            $("#other_allergy_div").hide();

        }



    }
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/intlTelInput.js"></script>


<script>
    var code = $('#country_code').val();

    var input = document.querySelector("#code");
    var iti = window.intlTelInput(input, {
        formatOnDisplay: true,
        initialCountry: code,
        autoPlaceholder: "off",
        separateDialCode: true,
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/utils.js",
    });
    input.addEventListener("countrychange", function() {
        console.log(iti.getSelectedCountryData());

        $('#country_code').val(iti.getSelectedCountryData().iso2);
        $('#dial_code').val(iti.getSelectedCountryData().dialCode);

    });
</script>

@endsection