@extends('layout.main')


@section('main-section')


 <!-- Content wrapper -->
          <div class="content-wrapper">
            <!-- Content -->
            <div class="container-xxl flex-grow-1 container-p-y">




             <div class="row g-12">
                <div class="col-md-12">
                  <div class="card">
                    <h3 class="card-header text-warning">Claim Bill</h3>
                    <div class="card-body">

                    <div class="row">

                      <div id="" class="form-text text-danger">
                          <h5 class="text-success">General</h5>
                          <p></p>
                        </div>

                        <div class="col-md-6">
                        <label for="" class="form-label">Select Province</label>
                         <select class="form-control">
                            <option value="">Please Select</option>
                            <option value="Insurer">Insurer</option>
                            <option value="Takaful">Takaful</option>
                            <option value="Other">Other</option>
                        </select>
                        <p></p>
                      </div>

                      <div class="col-md-6">
                        <label for="" class="form-label">Professional Fee</label>
                        <input type="text" placeholder="Professional Fee" name="" class="form-control" id="" />
                        <p></p>
                      </div>



                      <div class="col-md-6">
                        <label for="" class="form-label">SST / PST / KPRA / BRA - Provincial Services Tax</label>
                        <input type="text" placeholder="SST / PST / KPRA / BRA - Provincial Services Tax" name="" class="form-control" id="" />
                        <p></p>
                        <div class="form-check form-switch mb-2">
                       <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" name="headlight[]" />
                        <label class="form-check-label" for="flexSwitchCheckDefault">Services Tax on Total Amount</label>
                         </div>
                      </div>


                      <div class="col-md-6">
                        <label for="" class="form-label">Photographs</label>
                        <input type="text" placeholder="Photographs" name="" class="form-control" id="" />
                        <p></p>
                      </div>

                      <div class="col-md-6">
                        <label for="" class="form-label">Re-Inspection</label>
                        <input type="text" placeholder="Re-Inspection" name="" class="form-control" id="" />
                        <p></p>
                      </div>

                       <div id="" class="form-text text-danger">
                          <h5 class="text-danger">Travelling Charges</h5>
                          <p></p>
                        </div>

                      <div class="col-md-6">
                        <label for="" class="form-label">From</label>
                        <input type="text" placeholder="From" name="" class="form-control" id="" />
                        <p></p>
                      </div>

                      <div class="col-md-6">
                        <label for="" class="form-label">To</label>
                        <input type="text" placeholder="To" name="" class="form-control" id="" />
                        <p></p>
                      </div>



                       <div class="col-md-6">
                        <label for="" class="form-label">KM</label>
                        <input type="text" placeholder="KM" name="" class="form-control" id="" />
                        <p></p>
                      </div>


                      <div class="col-md-6">
                        <label for="" class="form-label">@ Per KM</label>
                        <input type="text" placeholder="@ Per KM" name="" class="form-control" id="" />
                        <p></p>
                      </div>

                       <div class="col-md-6">
                        <label for="" class="form-label">Total Travelling Expense</label>
                        <input type="text" placeholder="Total Travelling Expense" name="" class="form-control" id="" />
                        <p></p>
                      </div>



                          <div class="clearfix">
            <hr />
        </div>

        <div class="col-lg-12" >
            <div class="mb-12">
               <button class="btn btn-danger" onclick="add_more()" type="button">Add More</button>
            </div>
            <p></p>
            </div> <!-- end col -->

            <div class="col-lg-12" hidden>

                <input type="text" name="txtinc1" id="txtinc1" value="1" />
                <p></p>
            </div>

                        <div class="col-lg-12" >

        <table class="table" id="table_captions">
        <tr>
            <td>

            <label for="" class="form-label">Caption</label>
            <input type="text" id="" class="form-control" name="caption[]" placeholder="Caption">

            </td>

            <td>

            <label for="" class="form-label">Amount</label>
            <input type="text" id="" class="form-control" name="amount[]" placeholder="Amount">

            </td>


    </tr>
    </table>
            </div>


<div class="clearfix">
            <hr />
        </div>


                      <div id="" class="form-text text-success">
                          <h5 class="text-danger">Report Type</h5>
                          <p></p>
                        </div>

                      <div class="col-md-6">
                        <label for="" class="form-label">Report Type</label>
                         <select class="form-control">
                            <option value="">Please Select</option>
                            <option value="Online">Online</option>
                            <option value="Dispatch">Dispatch</option>
                            <option value="Other">Other</option>
                        </select>
                        <p></p>
                      </div>






                      <div class="col-md-12">
                        <button type="submit" class="btn btn-success">Submit</button>
                      </div>

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


            <script>
            var inc = 2;
                          function add_more()
                          {
                            $('#table_captions').append(
                            '<tr>'+
            '<td><label for="" class="form-label">Caption</label>'+
            '<input type="text" id="" class="form-control" name="caption[]" placeholder="Caption"></td>'+

            '<td>'+

            '<label for="" class="form-label">Amount</label>'+
            '<input type="text" id="" class="form-control" name="amount[]" placeholder="Amount">'+

            '</td>'+

        '<td>'+

                                '<button type="button" onclick="add_more_delete()" class="btn btn-danger">Delete</button>'+
                                '</td>'+
    '</tr>'
                            );
                            document.getElementById("txtinc1").value = inc++;
                          }

                          function add_more_delete() {
                            document.getElementById("txtinc1").value = --inc;
                            // event.target will be the input element.
                            var td = event.target.parentNode;
                            var tr = td.parentNode; // the row to be removed
                            tr.parentNode.removeChild(tr);
                          }

                          </script>

          @endsection('main-section')