<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  @include('layout.header')
</head>
<body>

  <div class="container-scroller">
    @include('layout.navbar')
    <!-- partial -->
    @include('layout.breadscrum')
    <div class="container-fluid page-body-wrapper">

      @include('layout.sidebar')

      <!-- partial -->
      <div class="main-panel">
        <div class="content-wrapper">
          <div class="row">
            <div class="col-md-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title"><i class="mdi mdi-dots-vertical menu-icon"></i> Patient Register</h4><hr class="my-3">
                        <div class="col-12">
                            <form class="form">
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-6">
                                        <div class="form-group row my-2">
                                            <label for="patient_name" class="col-sm-12 col-md-3 col-form-label">Patient-Code<code> *</code></label>
                                            <div class="col-12 col-sm-12 col-md-9">
                                                <input id="patient_name" class="form-control" name="patient_name" type="text" placeholder="Patient code" required="" autocomplete="off">
                                            </div>
                                        </div>

                                        <div class="form-group row my-2">
                                            <label for="patient_name" class="col-sm-12 col-md-3 col-form-label">Patient-Name<code> *</code></label>
                                            <div class="col-12 col-sm-12 col-md-9">
                                                <input id="patient_name" class="form-control" name="patient_name" type="text" placeholder="Patient name" required="" autocomplete="off">
                                            </div>
                                        </div>

                                        <div class="form-group row my-2">
                                            <label for="example-text-input" class="col-sm-12 col-md-3 col-form-label">Dob <b>or</b> Age<code> *</code></label>
                                            <div class="col-12 col-sm-12 col-md-9">
                                                <div class="input-group">
                                                    <div class="input-group-append">
                                                        <input class="form-control" name="dob" type="text" id="dob" placeholder="{{__('general.date_placeholder')}}" required="" autocomplete="off">
                                                    </div>
                                                    <input type="number" id="age" name="age" placeholder="Age" value="" class="form-control" autocomplete="off">
                                                    <div class="input-group-append">
                                                        <select class="form-control" name="age_from_unit" id="age-from-unit">
                                                            <option value="1">Day</option>
                                                            <option value="30">Month</option>
                                                            <option value="365">Year</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row my-2">
                                            <label for="Gender" class="col-md-3 col-form-label">Gender<code> *</code></label>
                                            <div class="col-md-9 row pl-4" style="padding-top:7px;">
                                                <div class="form-check col-sm-4">
                                                    <label class="form-check-label">
                                                        <input type="radio" class="form-check-input" name="gender" data-id="1" value="1"> Male
                                                    </label>
                                                </div>
                                                <div class="form-check col-sm-4">
                                                    <label class="form-check-label">
                                                        <input type="radio" class="form-check-input" name="gender" data-id="2" value="2"> Female
                                                    </label>
                                                </div>
                                                <div class="form-check col-sm-4">
                                                    <label class="form-check-label">
                                                        <input type="radio" class="form-check-input" name="gender" data-id="3" value="3"> Other
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row my-2">
                                            <label for="Gender" class="col-md-3 col-form-label">Marital Status<code> *</code></label>
                                            <div class="col-md-9 row pl-4" style="padding-top:7px;">
                                                <div class="form-check col-sm-4">
                                                    <label class="form-check-label">
                                                        <input type="radio" class="form-check-input" name="marital_status" data-id="1" value="1"> Single
                                                    </label>
                                                </div>
                                                <div class="form-check col-sm-4">
                                                    <label class="form-check-label">
                                                        <input type="radio" class="form-check-input" name="marital_status" data-id="2" value="2"> Married
                                                    </label>
                                                </div>
                                                <div class="form-check col-sm-4">
                                                    <label class="form-check-label">
                                                        <input type="radio" class="form-check-input" name="marital_status" data-id="3" value="3"> Other
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-6 pb-4">

                                        <div class="form-group row">
                                            <label for="example-text-input" class="col-md-3 col-form-label">Phone Number<code> *</code></label>
                                            <div class="col-md-9">
                                                <input class="form-control" type="text" placeholder="099 999 999" name="phone" required="" autocomplete="off">
                                            </div>
                                        </div>

                                        <div class="form-group row my-2">
                                            <label for="example-text-input" class="col-md-3 col-form-label">Province<code></code></label>
                                            <div class="col-md-9">
                                                <select class="form-control select2" name="province_id" id="province-id" style="width: 100% !important;">
                                                    <option></option>
                                                    @foreach($provinces as $province)
                                                        <option value="{{$province->id}}">{{$province->name_en}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group row my-2">
                                            <label for="example-text-input" class="col-md-3 col-form-label">District<code></code></label>
                                            <div class="col-md-9">
                                                <select class="form-control select2" name="district_id" id="district-id" style="width: 100% !important;">
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group row my-2">
                                            <label for="example-text-input" class="col-md-3 col-form-label">Commune</label>
                                            <div class="col-md-9">
                                                <select class="form-control select2" name="commune_id" id="commune-id" style="width: 100% !important;">
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group row my-2">
                                            <label for="example-text-input" class="col-md-3 col-form-label">Village</label>
                                            <div class="col-md-9">
                                                <select class="form-control select2" name="village_id" id="village-id" style="width: 100% !important;">
                                                </select>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12 float-right">
                                        <button type="submit" class="btn btn-info"><i class="fa fa-floppy-o"></i>&nbsp;&nbsp;<span class="save">{{__('lang.save')}}</span><span class="update" style="display: none">{{__('lang.update')}}</span></button>
                                        <button type="button" class="btn btn-light" data-dismiss='modal'>{{__('lang.cancel')}}</button>
                                    </div>
                                </div>
                            </form>

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

          </div>
        </div>
        @include('layout.footer')
      </div>
    </div>
  </div>
  @include('layout.common_script')

    <script>

        $('#province-id').change(function () {
            $.ajax({
                url:"{{url('districts/json')}}/"+$(this).val(),
                type:"GET",
                dataType:"json",
                success:function(response){
                    $('#district-id').html('');
                    response.map(item =>{
                        var patientOption = document.createElement('OPTION');
                        patientOption.setAttribute('value',item.id);
                        patientOption.text = item.name_en;
                        $('#district-id').append(patientOption);
                    })
                    $('#district-id').append('<option selected></option>');
                },
                error: function(response) {
                },
            });
        })

        $('#district-id').change(function () {
            $.ajax({
                url:"{{url('communes/json')}}/"+$(this).val(),
                type:"GET",
                dataType:"json",
                success:function(response){
                    $('#commune-id').html('');
                    response.map(item =>{
                        var patientOption = document.createElement('OPTION');
                        patientOption.setAttribute('value',item.id);
                        patientOption.text = item.name_en;
                        $('#commune-id').append(patientOption);
                    })
                    $('#commune-id').append('<option selected></option>');
                },
                error: function(response) {
                },
            });
        })

        $('#commune-id').change(function () {
            $.ajax({
                url:"{{url('villages/json')}}/"+$(this).val(),
                type:"GET",
                dataType:"json",
                success:function(response){
                    $('#village-id').html('');
                    response.map(item =>{
                        var patientOption = document.createElement('OPTION');
                        patientOption.setAttribute('value',item.id);
                        patientOption.text = item.name_en;
                        $('#village-id').append(patientOption);
                    })
                    $('#village-id').append('<option selected></option>');
                },
                error: function(response) {
                },
            });
        })

    </script>

</body>

</html>

