@extends('web.layouts.main')
@section('content')
 <main>
        <!-- Start pg-header -->
        <section class="pg-header section">
            <div class="container">
                <div class="content wow text-focus-in">
                    <h1 class="title text-white text-center"><b>{{__('web.reservation')}}</b></h1>
                    <div class="bread text-center mt-3">
                        <a href="{{url(getCurrentLocale().'/')}}" class="link">{{__('web.home')}}</a> |
                        <span class="this-pg">{{__('web.reservation')}}</span>
                    </div>
                </div>
            </div>
        </section>
        <!--Start reservation-pg -->
        <section class="reservation-pg section">
            <div class="container">
                <div class="box">
                    @if(Session::has('success'))
   <div class="col-12">
    <div  class="alert alert-success">
<p style="color: black;">{{ Session::get('success') }}</p>
</div>
</div>
@endif
                    <form id="regForm" method="post"  action="{{url(getCurrentLocale().'/reserving')}}">
                        @CSRF
                        <div class="text-box text-center  mb-5">
                            <p class="color-secondary mb-3 wow tracking-in-expand-fwd-bottom">{{__('web.reserve')}}</p>
                            <h1 class="title mb-3 wow tracking-in-expand-fwd-top"><b>{{__('web.reserve_date')}}</b></h1>
                            <p class="p wow fadeInUp">{{__('web.reserve_desc')}}</p>
                        </div>
                        <!-- Tab 1 -->
                        <div class="tab tab1">
                            <div class="row">
                                <div class="col-lg-5">
                                    <div class="main_img">
                                        <img src="{{asset($page->image)}}" alt="">
                                    </div>
                                </div>
                                <div class="col-lg-7">
                                    <div class="info mt-2">
                                        <h4 class="title mb-4"><b>{{__('web.first_step')}}</b></h4>
                                        <div class="det">
                                            @php $vowels = array("&nbsp;", "&ndash;", "&bull;","\r\n","&ldquo;","&rdquo;"); @endphp
                                          {{ str_replace($vowels, ' ', strip_tags(pagedescription(8,'description'))) }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- Tab 2 -->
                        <div class="tab tab2">
                            <h4 class="title mb-4"><b>{{__('web.choose_type')}}</b></h4>
                            <div class="row">
                                @foreach($types as $row)
                                <div class="col-lg-3 col-md-6">
                                    <div class="custom-control custom-radio deviceType">
                                        <input type="radio" id="deviceType{{$row->id}}" onclick="selectType(this)" name="type_id" value="{{$row->id}}" class="custom-control-input">
                                        <label class="custom-control-label" for="deviceType{{$row->id}}">
                                            <img src="{{asset($row->image)}}" alt="" class="icon"/>
                                            <h5 class="title mb-0">{{typedescription($row->id,'name')}}</h5>
                                        </label>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <!-- Tab 3 -->
                        <div class="tab tab3">
                            <h4 class="title mb-4"><b>{{__('web.modal_category')}}</b></h4>
                            <!--<div class="row">-->
                            <!--    <div class="col-md-6">-->
                            <!--        <div class="form-group">-->
                            <!--            <select id="category_id" name="category_id" onchange="categorySelect(this)" class="form-control">-->
                                            
                                            
                            <!--            </select>-->
                            <!--        </div>-->
                            <!--    </div>-->
                            <!--    <div class="col-md-6">-->
                            <!--        <div class="form-group">-->
                            <!--            <input class="form-control" name="model" placeholder="{{__('web.modal')}}"/>-->
                            <!--        </div>-->
                            <!--    </div>-->
                            <!--</div>-->
                            <div class="device_model">
                                <div class="row" id="category_id">
                                </div>
                            </div>
                        </div>
                        <!-- Tab 4 -->
                        <div class="tab tab2">
                            <h4 class="title mb-4"><b>{{__('web.type_problem')}}</b></h4>
                            <div class="row" id="problems">
                            </div>
                        </div>
                        <!-- Tab 5 -->
                        <div class="tab ">
                        <div class="in-flex mb-4">
                            <h4 class="title mb-0"><b>{{__('web.enter_profile')}}</b></h4>
                            <span class="badge-price primary-badge"><b id="firstAllCost"></b> <small> {{__('web.sar')}}</small></span>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input class="form-control" type="email" name="email" placeholder="{{__('web.email')}}"/>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input class="form-control" type="number" name="phone" placeholder="{{__('web.phone')}} "/>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <textarea class="form-control" id="message" name="message" rows="7" placeholder="{{__('web.message')}}"></textarea>
                                </div>
                            </div>
                        </div>
                        </div>
                        <!-- Tab 6 -->
                        <div class="tab tab6">
                            <h3 class="title mb-5"><b> {{__('web.sure_reserve')}}</b></h3>
                            <table class="table table-bordered table-striped">
                                <tbody id="tbody">
                                 
                                 
                                  
                                </tbody>
                                <tfoot>
                                     <tr>
                                    <th colspan="2" scope="col">{{__('web.all_fix')}}</th>
                                    <td id="allCost" > </td>
                                  </tr>
                                    <tr>
                                    <th colspan="2" scope="col">{{__('web.delivery')}}</th>
                                    <td>{{settings('delivery')}} {{__('web.sar')}}</td>
                                  </tr>
                                  <tr>
                                    <th colspan="2"  scope="col">{{__('web.allcost')}}</th>
                                    <td id="finalCost"></td>
                                  </tr>
                                </tfoot>
                              </table>
                        </div>
                        <div class="butns-wrapper in-flex mt-5">
                            <button type="button" class="butn border-butn" onclick="nextPrev(-1)"><span id="prevBtn" class="zi-5">{{__('web.pervious')}}</span></button>
                            <button type="button" id="btnsub" class="butn primary-butn" onclick="nextPrev(1)"><span id="nextBtn" class="zi-5">{{__('web.start_now')}}</span></button>
                        </div>
                        <!-- Circles which indicates the steps of the form: -->
                        <div style="text-align:center;margin-top:40px;">
                            <span class="step"></span>
                            <span class="step"></span>
                            <span class="step"></span>
                            <span class="step"></span>
                            <span class="step"></span>
                            <span class="step"></span>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </main>
 <div class="modal fade" id="success_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div class="modal-body">
                        <img src="{{url('')}}/assets/web/images/icons/confirm.png" alt="" class="icon"/>
                        <div class="content">
                            <h3 class="title"><b>{{__('web.success')}}</b></h3>
                            <p class="p">{{__('web.thanks')}} <img src="{{url('')}}/assets/web/images/logo.svg" alt="" class="logo"/></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="error_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div class="modal-body">
                        <img src="{{url('')}}/assets/web/images/icons/refuse.png" alt="" class="icon"/>
                        <div class="content">
                            <div id="errors_modal">
                            <h3 class="title"><b></b></h3>
                            </div>
                            <p class="p">  {{__('web.thanks')}} <img src="{{url('')}}/assets/web/images/logo.svg" alt="" class="logo"/></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@push('js')
<script>
    function selectType(elem){
        let data = $(elem).val();
        let urls_select = {!! json_encode(url(getCurrentLocale().'/selectType')) !!}+'/'+data;
      $.ajax({
          url : urls_select,
          type: 'GET',              
          data: 'dataform',
          success:function(data)
          {
           $('#category_id').html(data);
           nextPrev(1);
             }
        })
    }
    
    function categorySelect(elem){
        let data = $(elem).val();
        let urls_cat = {!! json_encode(url(getCurrentLocale().'/categorySelect')) !!}+'/'+data;
      $.ajax({
          url : urls_cat,
          type: 'GET',              
          data: 'dataform',
          success:function(data)
          {
           $('#problems').html(data);
           nextPrev(1);
             }
        })
    }
    function problemSelect(elem){
        var urls_problem = {!! json_encode(url(getCurrentLocale().'/problemSelect')) !!};
        var urls_problemdata = {!! json_encode(url(getCurrentLocale().'/problemSelectData')) !!};
        var dataform = $('#regForm').serialize();
        
         $.ajax({
          url : urls_problem,
          type: 'POST',              
          data: dataform,
          success:function(data)
          {
           $('#firstAllCost').html(data);
           $('#allCost').html(data +' '+{!! json_encode(__('web.sar')) !!});
           $('#finalCost').html((parseFloat(data)+ parseFloat({!! json_encode(settings('delivery')) !!})) +' '+{!! json_encode(__('web.sar')) !!});
           

             }
        })
         $.ajax({
          url : urls_problemdata,
          type: 'POST',              
          data: dataform,
          success:function(data)
          {
           $('#tbody').html(data);
           



             }
        })
    }
    function saveForm(elem){
        event.preventDefault(); 
        var urls = $('#regForm').attr('action');
        var dataform = $('#regForm').serialize();
        
         $.ajax({
          url : urls,
          type: 'POST',              
          data: dataform,
          success:function(data)
          {
           $('#success_modal').modal('show');
              
                 setTimeout(
  function()
  {
      location.reload();
  }, 1000);
             
          }
          ,error:function(data) {
             $('#error_modal').modal('show');
              $('#errors_modal').html('');
   
   $.each(data.responseJSON.errors, function(key,value) {
     $('#errors_modal').append('<h3 class="title text-center mt-3"><b>'+value+'</b></h3>');
     
     
 }); 
 
}
        })
    }
    
        var currentTab = 0; // Current tab is set to be the first tab (0)
        showTab(currentTab); // Display the current tab
        
        function showTab(n) {
          // This function will display the specified tab of the form...
          var x = document.getElementsByClassName("tab");
          x[n].style.display = "block";
          //... and fix the Previous/Next buttons:
          if (n == 0) {
            document.getElementById("prevBtn").style.display = "none";
            document.getElementById("nextBtn").innerHTML = {!! json_encode(__('web.start_now')) !!};
          } else {
            document.getElementById("prevBtn").style.display = "inline";
          }
          if (n == (x.length - 1)) {
            document.getElementById("nextBtn").innerHTML = {!! json_encode(__('web.reservating')) !!};
            
          } else {
              if (n == 0) {
            document.getElementById("nextBtn").innerHTML = {!! json_encode(__('web.start_now')) !!};
              }else{
                  if (n == 1 || n == 2) {
                      $('#btnsub').css('display','none');
                  }
                  else{
                      $('#btnsub').css('display','block');
                  }
            document.getElementById("nextBtn").innerHTML = {!! json_encode(__('web.next')) !!};
              }
          }
          //... and run a function that will display the correct step indicator:
          fixStepIndicator(n)
        }
        
        function nextPrev(n) {
          // This function will figure out which tab to display
          var x = document.getElementsByClassName("tab");
          // Exit the function if any field in the current tab is invalid:
          if (n == 1 && !validateForm()) return false;
          // Hide the current tab:
          x[currentTab].style.display = "none";
          // Increase or decrease the current tab by 1:
          currentTab = currentTab + n;
          // if you have reached the end of the form...
          if (currentTab >= x.length) {
            // ... the form gets submitted:
            document.getElementById("regForm").submit();
            return false;
          }
          // Otherwise, display the correct tab:
          showTab(currentTab);
        }
        
        function validateForm() {
          // This function deals with validation of the form fields
          var x, y, i, valid = true;
          x = document.getElementsByClassName("tab");
          y = x[currentTab].getElementsByTagName("input");
          // A loop that checks every input field in the current tab:
          for (i = 0; i < y.length; i++) {
            // If a field is empty...
            if (y[i].value == "") {
              // add an "invalid" class to the field:
              y[i].className += " invalid";
              // and set the current valid status to false
              valid = false;
            }
          }
          if(currentTab == '1'){
              let type_id = $('input[name="type_id"]:checked').each(function() {
                   return this.value;
                });
              if(type_id.length == 0){
                  valid = false;
                    $('#error_modal').modal('show');
                    $('#errors_modal').html('');
                    $('#errors_modal').html('<h3 class="title text-center mt-3"><b>'+{!! json_encode(__('web.typeselect')) !!}+'</b></h3>');
              }
          }
          
          if(currentTab == '2'){
              let category_id =$('#category_id').val(); 
              
              if(category_id == null){
                  valid = false;
                  $('#error_modal').modal('show');
                  $('#errors_modal').html('');
                  $('#errors_modal').html('<h3 class="title text-center mt-3"><b>'+{!! json_encode(__('web.categoryselect')) !!}+'</b></h3>');
              }
          }
          if(currentTab == '3'){
              let problem_id = $('input[name="problem_id[]"]:checked').each(function() {
                   return this.value;
                });
              if(problem_id.length == 0){
                  valid = false;
                  $('#error_modal').modal('show');
                  $('#errors_modal').html('');
                  $('#errors_modal').html('<h3 class="title text-center mt-3"><b>'+{!! json_encode(__('web.problemselect')) !!}+'</b></h3>');
              }
          }
          if(currentTab == '4'){
              let message =$('#message').val(); 
              
              if(message == ''){
                  valid = false;
                  $('#error_modal').modal('show');
                  $('#errors_modal').html('');
                  $('#errors_modal').html('<h3 class="title text-center mt-3"><b>'+{!! json_encode(__('web.messageselect')) !!}+'</b></h3>');
              }
          }
          
          // If the valid status is true, mark the step as finished and valid:
          if (valid) {
            document.getElementsByClassName("step")[currentTab].className += " finish";
          }
          return valid; // return the valid status
        }
        
        function fixStepIndicator(n) {
          // This function removes the "active" class of all steps...
          var i, x = document.getElementsByClassName("step");
          for (i = 0; i < x.length; i++) {
            x[i].className = x[i].className.replace(" active", "");
          }
          //... and adds the "active" class on the current step:
          x[n].className += " active";
        }
    </script>
@endpush
@stop