@extends('front.master.master')
@section('contect')
<section id="faq" class="faq mt-5">
    <div class="container" data-aos="fade-up">

      <div class="section-title">
        <h2>Complain Form</h2>
      </div>
      <form method="POST" action="{{ route('front.add_complaint') }}">
        @csrf
      <ul class="faq-list" data-aos="fade-up">

        <li>
          <a data-toggle="collapse" class="collapsed" href="#faq1">User Information <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-x icon-close"></i></a>
          <div id="faq1" class="collapse" data-parent=".faq-list">
            <div class="row">
                <div class="col-xl-12">
                    <div id="panel-1" class="panel">
                        <div class="panel-container show">
                            <div class="panel-content">
                                <div class="card-body">

                                        <input type="hidden" name="_token" value="WrWUzNDgj0gazKOrES3OkKFEhbiEsU2PY5YRPBEN">
                                        <div class="form-group row">
                                            <label for="f_name" class="col-md-4 col-form-label text-md-right">First Name</label>

                                            <div class="col-md-6">
                                                <input id="f_name" type="text" class="form-control " name="f_name" value="" required="" autocomplete="f_name" autofocus="">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="l_name" class="col-md-4 col-form-label text-md-right">Last Name</label>

                                            <div class="col-md-6">
                                                <input id="l_name" type="text" class="form-control " name="l_name" value="" required="" autocomplete="l_name" autofocus="">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="email" class="col-md-4 col-form-label text-md-right">Email</label>

                                            <div class="col-md-6">
                                                <input id="email" type="email" class="form-control " name="email" value="" required="" autocomplete="email" autofocus="">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="address" class="col-md-4 col-form-label text-md-right">Address</label>

                                            <div class="col-md-6">
                                                <input id="address" type="text" class="form-control " name="address" value="" autocomplete="address" autofocus="">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="nic" class="col-md-4 col-form-label text-md-right">NIC</label>

                                            <div class="col-md-6">
                                                <input id="nic" type="number" class="form-control " name="nic" value="" required="" autocomplete="nic" autofocus="">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="state" class="col-md-4 col-form-label text-md-right">State</label>

                                            <div class="col-md-6">
                                                <select class="form-control" name="state" id="state">
                                                    @foreach (getStates() as $key => $item)
                                                        <option value="{{ $key }}">{{ $key }}</option>
                                                    @endforeach
                                                </select>

                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="local" class="col-md-4 col-form-label text-md-right">Local Govt.</label>

                                            <div class="col-md-6">
                                                <select class="form-control" name="local" id="local">
                                                    @foreach (array_values(getStates())[0] as $item)
                                                        <option value="{{ $item }}">{{ $item }}</option>
                                                    @endforeach
                                                </select>

                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="dob" class="col-md-4 col-form-label text-md-right">Date of Birth</label>

                                            <div class="col-md-6">
                                                <input id="dob" type="date" class="form-control " name="dob" value="" required="" autocomplete="dob" autofocus="">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="work_phone" class="col-md-4 col-form-label text-md-right">Work Phone</label>

                                            <div class="col-md-6">
                                                <input id="work_phone" type="text" class="form-control " name="work_phone" value="" autocomplete="work_phone" autofocus="">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="mobile_phone" class="col-md-4 col-form-label text-md-right">Mobile Phone</label>

                                            <div class="col-md-6">
                                                <input id="mobile_phone" type="text" class="form-control " name="mobile_phone" value="" autocomplete="mobile_phone" autofocus="">
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>

                                            <div class="col-md-6">
                                                <input id="password" type="password" class="form-control " name="password" value="" required="" autocomplete="password" autofocus="">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>

                                            <div class="col-md-6">
                                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                                            </div>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </li>

        <li>
          <a data-toggle="collapse" href="#faq2" class="collapsed">Vehicle Information <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-x icon-close"></i></a>
          <div id="faq2" class="collapse" data-parent=".faq-list">
            <div class="row">
                <div class="col-xl-12">
                    <div id="panel-1" class="panel">
                        <div class="panel-container show">
                            <div class="panel-content">
                                <div class="card-body">
                                    <div class="form-group row">
                                        <label for="category_id" class="col-md-4 col-form-label text-md-right">Category</label>

                                        <div class="col-md-6">
                                            <select class="form-control" name="category_id" id="category_id">
                                                @foreach ($categories as $item)
                                                    <option {{ ($loop->first)?"selected":"" }} value="{{ $item->id }}">{{ $item->name }}</option>
                                                @endforeach
                                              </select>

                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="sub_category_id" class="col-md-4 col-form-label text-md-right">Sub Category</label>

                                        <div class="col-md-6">
                                            <select class="form-control" name="sub_category_id" id="sub_category_id">
                                                @foreach ($categories[0]->subCategories as $item)
                                                    <option {{ ($loop->first)?"selected":"" }} value="{{ $item->id }}">{{ $item->name }}</option>
                                                @endforeach
                                            </select>

                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="insurance_id" class="col-md-4 col-form-label text-md-right">Insurance Company</label>

                                        <div class="col-md-6">
                                            <select class="form-control" name="insurance_id" id="insurance_id">
                                                <option value="0">Not Insured</option>
                                                @foreach ($insurances as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                @endforeach
                                            </select>

                                        </div>
                                    </div>
                                    <div class="form-group row" id="policy_no_div" style="display: none;">
                                        <label for="policy_no" class="col-md-4 col-form-label text-md-right">Policy Number</label>

                                        <div class="col-md-6">
                                            <input id="policy_no" type="text" class="form-control " name="policy_no" autocomplete="policy_no">
                                        </div>
                                    </div>

                                    <div id="field_body">
                                        @foreach ($subCategories[0]->fields as $item)
                                            @if ($item->type == 'select')
                                                <div class="form-group row">
                                                    <label for="data[{{ $item->slug }}]" class="col-md-4 col-form-label text-md-right">{{ $item->name }}</label>

                                                    <div class="col-md-6">
                                                        <select {{ ($item->required)?'required':'' }} class="form-control" name="data[{{ $item->slug }}]" id="data[{{ $item->slug }}]">
                                                            @foreach (explode(",",$item->values) as $i)
                                                                <option value="{{ $i }}">{{ $i }}</option>
                                                            @endforeach
                                                        </select>

                                                    </div>
                                                </div>
                                            @elseif($item->type == 'text')
                                                <div class="form-group row">
                                                    <label for="data[{{ $item->slug }}]" class="col-md-4 col-form-label text-md-right">{{ $item->name }}</label>

                                                    <div class="col-md-6">
                                                        <input id="data[{{ $item->slug }}]" type="text" class="form-control " name="data[{{ $item->slug }}]" {{ ($item->required)?'required':'' }}  autocomplete="name" autofocus>
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </li>

        <li>
          <a data-toggle="collapse" href="#faq3" class="collapsed">Complaints <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-x icon-close"></i></a>
          <div id="faq3" class="collapse" data-parent=".faq-list">
            <div class="row">
                <div class="col-xl-12">
                    <div id="panel-1" class="panel">
                        <div class="panel-container show">
                            <div class="panel-content">
                                <div class="card-body">
                                        <input type="hidden" name="_token" value="WrWUzNDgj0gazKOrES3OkKFEhbiEsU2PY5YRPBEN">                                <div class="form-group row">
                                            <label for="status" class="col-md-4 col-form-label text-md-right">Reason of complain</label>

                                            <div class="col-md-6">
                                                <select class="form-control" name="status" id="status">
                                                                                                    <option value="Lost">Lost</option>
                                                                                                    <option value="Stolen">Stolen</option>
                                                                                                    <option value="Hijacked">Hijacked</option>
                                                                                              </select>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="vitness_name" class="col-md-4 col-form-label text-md-right">Vitness Name</label>

                                            <div class="col-md-6">
                                                <input id="vitness_name" type="text" class="form-control" name="vitness_name" value="" required="" autocomplete="vitness_name" autofocus="">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="date_time" class="col-md-4 col-form-label text-md-right">Date Time</label>

                                            <div class="col-md-6">
                                                <input id="date_time" type="datetime-local" class="form-control" name="date_time" value="" required="" autocomplete="date_time" autofocus="">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="location" class="col-md-4 col-form-label text-md-right">Location</label>

                                            <div class="col-md-6">
                                                <input id="location" type="text" class="form-control" name="location" value="" required="" autocomplete="location" autofocus="">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="comments" class="col-md-4 col-form-label text-md-right">Comments</label>

                                            <div class="col-md-6">
                                                <textarea name="comments" id="comments" cols="30" rows="10" class="form-control"></textarea>
                                            </div>
                                        </div>


                                        <div class="form-group row mb-0">
                                            <div class="col-md-6 offset-md-4">
                                                <button type="submit" class="btn btn-primary waves-effect waves-themed">
                                                    Submit
                                                </button>
                                            </div>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </li>

      </ul>
      </form>

    </div>
</section><!-- End Frequently Asked Questions Section -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

    $(document).ready(function(){
        $("#state").change(function(){
            var option = '';
            var data = {!! json_encode(array_values(getStates())) !!};
            $(data[$("#state")[0].selectedIndex]).each(function(index,v){
                    option +="<option value='"+v+"'>"+v+"</option>";
                });
                $("#local").empty().append(option);
        });
        $("#category_id").change(function(){
            var option = '';
            $.get("{{ url('api/subCategory') }}/"+$(this).val(),function(data){
                $(data).each(function(index,v){
                    option +="<option value='"+v.id+"'>"+v.name+"</option>";
                });
                $("#sub_category_id").empty().append(option);
            });
        });
        $("#sub_category_id").change(function(){
            var option = '';
            $.get("{{ url('api/fields') }}/"+$(this).val(),function(data){
                $("#field_body").html(data);
            });
        });
        $("#insurance_id").change(function(){
            if($(this).val() != 0){
                $("#policy_no_div").css({"display":"flex"});
                $("#policy_no").attr("required","required");
            }
            else{
                $("#policy_no_div").css({"display":"none"});
                $("#policy_no").removeAttr("required");
            }
        })
    });


</script>
@endsection