@extends('layouts.auth')
@section('content')
<style type="text/css">
  label.form-label {
    font-size: 13px;
}
label {
    display: inline-block;
    margin-bottom: 3px;
}
.form-control {
   padding: 3px 0.75rem;
  }
  .upload-box {
    border: 2px dashed #999;
    background-color: #fff;
    height:150px;
}
.login-page {
    margin-top: 170px;
}
.form-section{
    display: none;
}

.form-section.current{
    display: inline;
}
.parsley-errors-list{
    color:red;
}
ul {
  list-style-type: none;
  margin-left: -30px;
}
.logoPreview{
    z-index: 1;
    padding: 5px;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    text-align: center;
}
</style>
<section class="vh-100 overflow-hidden">
   <div class="container-fluid h-100">
      <div class="row h-100">
         <div class="col-md-7">
            <div class="row">
                <div class="col-md-10 offset-md-1 pt-5">
                    <div class="business-info">
                        <a href="/" class=" d-inline-block mb-3">
                            <img src="{{ asset('front/image/small-logo.png') }}" class="w-50" alt="image">
                        </a>
                        <h3>Complete Your Business Info</h3>
                        <p>Submit your business info that is required for account activation. </p>

                        <img src="{{ asset('front/image/appointment-img.png') }}" alt="image" class="img-fluid main-img">
                    </div>
                    
                </div>
            </div>
                
            </div>
         <div class="col-md-5 user-auth-right-bg log-in-bg h-100 overflow-auto ">
            <div class="h-100 d-flex flex-column  ">
              
               <form class="d-block w-100 pt-5 business-form" method="Post" id="createForm" action="{{route('storeBusinessInformation')}}">
                @csrf
                <!-- <div class="text-center">
                <h3 style="font-size: 21px;margin-bottom: 23px;">Business Information</h3>
              </div> -->
              <ul class="d-flex justify-content-between steps-design">
                <li class="step0"><i class="fa fa-file-text-o" aria-hidden="true"></i>Step 1</li>
                <li class="step1"><i class="fa fa-map-marker" aria-hidden="true"></i> Step 2</li>
                <li class="step2"><i class="fa fa-id-card-o" aria-hidden="true"></i> Step 3</li>
                <li class="step3"><i class="fa fa-university" aria-hidden="true"></i> Step 4</li>
              </ul>
              <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-hospital_name"></p>
              <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-unit_code"></p>
              <p style="margin-bottom:2px;" class="text-danger error_container" id="error-logo"></p>
              <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-city"></p>
              <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-region"></p>
              <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-district"></p>
              <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-zipcode"></p>
              <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-file"></p>

              <div class="form-section">
                   <h6 class="form-headline">Hospital - Information</h6>
                    <div class="row">
                        <div class="col-md-12">
                        <div class="form-group">
                            <label class="form-label">Hospital Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control ignoreFirstSpace" name="hospital_name" id="hospital_name" placeholder="Enter hospital name" data-parsley-required-message="The hospital name field is required." required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Unit Code <span class="text-danger">*</span></label>
                            <input type="text" class="form-control onlyIgnoreFirstSpace" name="unit_code" id="unit_code" placeholder="Enter unit code" data-parsley-required-message="The unit code field is required." required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Contact Person Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control ignoreFirstSpace" name="contact_person_name" id="contact_person_name" placeholder="Enter contact person name" data-parsley-required-message="The contact person name field is required." required>
                            <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-contact_person_name"></p>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Contact Number <span class="text-danger">*</span></label>
                            <input type="text" class="form-control numberonly" name="contact_number" id="contact_number" placeholder="Enter contact number" data-parsley-required-message="The contact number field is required." required>
                            <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-contact_number"></p>
                        </div>
                        </div>
                        <div class="col-md-12">
                        <div class="form-group">
                            <label class="form-label">Logo <span class="text-danger">*</span></label>
                            <input type="file" accept=".png,.jpg,.jpeg" id="fileupload" name="logo" class="form-control" style="display:none" data-parsley-required-message="The logo field is required." required/>
                            <div id="logo_img" class="upload-box d-flex flex-column justify-content-center align-items-center">
                                <i class="fa fa-cloud-upload fa-4x" aria-hidden="true"></i>
                                <h5>Upload Logo Image</h5>
                                <p>Supported formats .png, .jpeg</p>
                            </div>
                        </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="logoPreview" >
                            <img id="courseimg" name="courseimg">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-section">
                    <h6 class="form-headline">Address Info</h6>
                    <div class="row">
                        <input type="hidden" name="country" value="{{$user->country_id}}">
                        @if($user->country_id == 37)
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-label">Region <span class="text-danger">*</span></label>
                                <select class="form-control regionId" name="region" id="region"  data-parsley-required-message="The region field is required." required>
                                    <option value="">Select Region</option>
                                    @if(count($regions) > 0)
                                    @foreach($regions as $reg)
                                    <option value="{{$reg->id}}">{{ucwords($reg->name)}}</option>
                                    @endforeach
                                    @endif
                                 </select>
                                <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-region"></p>
                            </div>
                        </div>
                        <div class="col-md-12">
                          <div class="form-group">
                             <label class="form-label">Division <span class="text-danger">*</span></label>
                             <select class="form-control divisionId" name="division" data-parsley-required-message="The division field is required." required>
                                <option value="">Select Division</option>
                             </select>
                             <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-division"></p>
                          </div>
                        </div>
                         <div class="col-md-12">
                          <div class="form-group">
                             <label class="form-label">Sub Division <span class="text-danger">*</span></label>
                             <select class="form-control subDivisionId" name="sub_division" data-parsley-required-message="The sub division field is required." required>
                                <option value="">Select Sub Division</option>
                             </select>
                             <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-sub_division"></p>
                          </div>
                        </div>
                        <div class="col-md-12">
                          <div class="form-group">
                             <label class="form-label">Health Districts </label>
                             <select class="form-control districtId" name="district" data-parsley-required-message="The health district field is required." required>
                               <option value="">Select Health District</option>
                             </select>
                          </div>
                        </div>
                        @endif
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-label">City</label>
                                <input type="text" class="form-control onlyIgnoreFirstSpace" name="city" id="city"  placeholder="Enter your city">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-label">Address <span class="text-danger">*</span></label>
                                <input type="text" class="form-control onlyIgnoreFirstSpace" name="street_address" id="street_address"  placeholder="Enter your address" data-parsley-required-message="The address field is required." required>
                                <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-street_address"></p>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-label">Address Line 2 </label>
                                <input type="text" class="form-control onlyIgnoreFirstSpace" name="address_line2" id="address_line2"  placeholder="Enter your landmark">
                            </div>
                        </div>
                        
                        @if($user->country_id == 101)
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-label">Zip Code <span class="text-danger">*</span></label>
                                <input type="text" class="form-control ignoreZero" id="zipcode" name="zipcode" maxlength="6" placeholder="Enter your zip code" data-parsley-required-message="The zip code field is required." required>
                                <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-zipcode"></p>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
                <div class="form-section">
                    <h6 class="form-headline">National Indentity Info</h6>
                    <div class="row">
                        <div class="col-md-12">
                        <div class="form-group">
                           <label class="form-label">Document Title <span class="text-danger">*</span></label>
                           <input type="text" class="form-control id_type ignoreFirstSpace" name="id_type" id="id_type" placeholder="Enter document title" data-parsley-required-message="The document title is required." required>
                           <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-id_type"></p>
                        </div>
                        </div>
                      <div class="col-md-12">
                        <div class="form-group">
                           <label class="form-label">Upload file  <span class="text-danger">*</span></label>
                           <input type="file" accept=".png,.jpg,.jpeg" id="fileupload2"  name="file" class="form-control" style="display:none;" data-parsley-required-message="The file field is required." required/>
                           <div id="upload_img" class="upload-box d-flex flex-column justify-content-center align-items-center">
                              <i class="fa fa-cloud-upload fa-4x" aria-hidden="true"></i>
                              <h5>Upload File Image</h5>
                              <p>Supported formats .png, .jpeg</p>
                           </div>
                        </div>
                      </div>
                      <div class="col-sm-12">
                        <div class="logoPreview" >
                        <img id="courseimg2" name="courseimg2">
                        </div>
                    </div>
                      </div>
                </div>
                <div class="form-section">
                    <h6 class="form-headline">Banking Information</h6>
                    <div class="row">
                        <div class="col-md-12">
                        <div class="form-group">
                           <label class="form-label">Account Number <span class="text-danger">*</span></label>
                           <input type="text" class="form-control numberonly" name="account_number" placeholder="0000xxxxxx" data-parsley-required-message="The account number field is required." required>
                          <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-account_number"></p>
                        </div>
                      </div>
                      <div class="col-md-12">
                        <div class="form-group">
                           <label class="form-label">IBAN Number <span class="text-danger">*</span></label>
                           <input type="text" class="form-control onlyIgnoreFirstSpace" name="iban_number" placeholder="IBAN number" data-parsley-required-message="The iban number field is required." required>
                           <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-iban_number"></p>
                        </div>
                      </div>
                      <div class="col-md-12">
                        <div class="form-group">
                           <label class="form-label">SWIFT Code <span class="text-danger">*</span></label>
                           <input type="text" class="form-control onlyIgnoreFirstSpace" name="swift_code" placeholder="SWIFT code" data-parsley-required-message="The swift code field is required." required>
                           <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-swift_code"></p>
                        </div>
                      </div>
                      <div class="col-md-12">
                        <div class="form-group">
                           <label class="form-label">Account Holder Name <span class="text-danger">*</span></label>
                           <input type="text" class="form-control onlyIgnoreFirstSpace" name="account_holder_name" placeholder="Account Holder Name" data-parsley-required-message="The account holder name field is required." required>
                          <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-account_holder_name"></p>
                        </div>
                      </div>
                      <div class="col-md-12">
                        <div class="form-group">
                           <label class="form-label">Account Type <span class="text-danger">*</span></label>
                           <select class="form-control" name="account_type" data-parsley-required-message="The account type field is required." required>
                              <option value="">Select</option>
                              <option value="1">Saving</option>
                              <option value="2">Current</option>
                           </select>
                          <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-account_type"></p>
                        </div>
                      </div>
                      </div>
                </div>
                <div class="form-navigation mt-3">
                    <button type="button" class="previous btn btn-primary float-left">&lt; Previous</button>
                    <button type="button" class="next default-btn float-right">Next &gt;</button>
                    <button type="submit" class="default-btn float-right userAuthBtn">Submit</button>
                 </div>
               </form>
            </div>
         </div>
      </div>
   </div>
</section>


<script>
   //get division data
    $(document).on("change",".regionId",function(){
      var region_id = $(this).val();
      $('.subDivisionId').val('');
      $("#overlay").fadeIn(300);

        $.ajax({
        type:"POST",
        data:{"region_id":region_id,'_token': '{{csrf_token()}}'},
        url:"/get_divisions",
        statusCode:{
            200:function(data)
            {
               $("#overlay").fadeOut();
               // console.log(data);
               $('.divisionId').html(data);
            }
            }
        }); //ajax close
        return false;
    });
    //get district data
    $(document).on("change",".regionId",function(){
      var region_id = $(this).val();

        $.ajax({
        type:"POST",
        data:{"region_id":region_id,'_token': '{{csrf_token()}}'},
        url:"/get_districts",
        statusCode:{
            200:function(data)
            {
               // console.log(data);
               $('.districtId').html(data);
            }
            }
        }); //ajax close
        return false;
    });
   //get sub division data
    $(document).on("change",".divisionId",function(){
      var division_id = $(this).val();
      $("#overlay").fadeIn(300);

        $.ajax({
        type:"POST",
        data:{"division_id":division_id,'_token': '{{csrf_token()}}'},
        url:"/get_subdivisions",
        statusCode:{
            200:function(data)
            {
               $("#overlay").fadeOut();
               // console.log(data);
               $('.subDivisionId').html(data);
            }
            }
        }); //ajax close
        return false;
    });
    //
    $(document).ready(function(){
    $('#logo_img').click(function(){ $('#fileupload').trigger('click'); });
    $('#upload_img').click(function(){ $('#fileupload2').trigger('click'); });
    });
    //
    fileupload.onchange = evt => {
        const [file] = fileupload.files
        if (file) {
            courseimg.src = URL.createObjectURL(file);
            courseimg.style.height="150px";
        }
    }
    //
    fileupload2.onchange = evt => {
    const [file] = fileupload2.files
        if (file) {
            courseimg2.src = URL.createObjectURL(file);
            courseimg2.style.height="150px";
        }
    }
    //
    $(function(){
        var $sections=$('.form-section');
        function navigateTo(index){
            $sections.removeClass('current').eq(index).addClass('current');

            $('.form-navigation .previous').toggle(index>0);
            var atTheEnd = index >= $sections.length - 1;
            $('.form-navigation .next').toggle(!atTheEnd);
            $('.form-navigation [Type=submit]').toggle(atTheEnd);
            
            const step= document.querySelector('.step'+index);
            step.style.color="#077546";
            step.style.borderColor="#077546";
        }

        function curIndex(){
            return $sections.index($sections.filter('.current'));
        }

        $('.form-navigation .previous').click(function(){
            navigateTo(curIndex() - 1);
        });

        $('.form-navigation .next').click(function(){
            $('.business-form').parsley().whenValidate({
                group:'block-'+curIndex()
            }).done(function(){
                navigateTo(curIndex()+1);
            });

        });

        $sections.each(function(index,section){
            $(section).find(':input').attr('data-parsley-group','block-'+index);
        });
         navigateTo(0);
        //
        $(document).on('submit', 'form#createForm', function (event) {
        event.preventDefault();
        //
        $('.userAuthBtn').attr('disabled',true);
        var loadingText = 'loading...';
        $('.userAuthBtn').html(loadingText);
        //clearing the error msg
        $('p.error_container').html("");
        $('.error-control').removeClass('border-danger');
        $('.userAuthBtn').attr('disabled',true);

        var form = $(this);
        var data = new FormData($(this)[0]);
        var url = form.attr("action");

        $.ajax({
            type: form.attr('method'),
            url: url,
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            success: function (response) {

                console.log(response);
                if(response.success==true  ) {
                    //notify
                    toastr.success("Hospital unit created successfully");
                    // redirect to google after 5 seconds
                    window.setTimeout(function() {
                        window.location = "{{ url('/')}}"+"/login";
                        //window.location.reload();
                    }, 2000);

                }
                //show the form validates error
                if(response.success==false ) {
                $('.userAuthBtn').attr('disabled',false);
                    var loadingText = 'Submit';
                    $('.userAuthBtn').html(loadingText);
                    for (control in response.errors) {
                        $('#error-' + control).html(response.errors[control]);
                    }
                    if( response.error_type == 'invalid_city' )
                    {
                    $('#error-city').html('Please enter a valid city.');
                    }
                    if( response.error_type == 'something_wrong' )
                    {
                        toastr.error("Sorry, something went wrong. Please try again later.");
                    }
                }
            },
            error: function (xhr, textStatus, errorThrown) {
                alert("Error: " + errorThrown);
            }
        });
        return false;
        });
    });
    
</script>

@endsection