@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 class="col-lg-12">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h4 class="header-title mb-3">Case Information</h4>

                                                        <h5 class="font-family-primary fw-semibold">Ref. No. {{$assignData->_ReferenceNo}} <a href="{{ url('/assignMotorEdit') }}/{{ $assignData->_Id }}" target="_blank" class="btn btn-danger" style="float: right;">Edit Assign</a></h5>

                                                        <p class="mb-2"><span class="fw-semibold me-2">Assign Branch </span> {{$assignData->_OurBranch}} <a href="{{ url('/motorPlrEdit') }}/{{ $assignData->_Id }}" target="_blank" class="btn btn-danger" style="float: right;">Edit PLR</a></p>
                                                        <p class="mb-2"><span class="fw-semibold me-2">Policy No. </span> {{$assignData->_PolicyPMDNo}} <a href="{{ url('/motorFsrEdit') }}/{{ $assignData->_Id }}" target="_blank" class="btn btn-danger" style="float: right;">Edit FSR</a></p>
                                                        <p class="mb-2"><span class="fw-semibold me-2">Loss No. </span> {{$assignData->_LossBenefitNo}}</p>
                                                        <p class="mb-2"><span class="fw-semibold me-2">Insured </span> {{$assignData->_InsuredParticipant}}</p>
                                                        <p class="mb-2"><span class="fw-semibold me-2">Surveyor </span> {{$assignData->_AssignTeamMember}}</p>

                                                    </div>
                                                </div>
                                            </div> <!-- end col -->




                                        </div>
                                        <!-- end row -->
                                        <p></p>

                    <form action="{{url('/billformPost')}}" method="post">
                    @csrf

                    <div class="row">

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

                        <div class="col-lg-6" hidden>
                    <div class="mb-6">
                    <label for="" class="form-label">Job Id</label>
                    <input type="text" id="_JobId" class="form-control" name="_JobId" placeholder="" value="{{$assignData->_Id}}" readonly>
                    <input type="text" id="_user_email" class="form-control" name="_user_email" placeholder="" value="{{session()->get('user_email')}}" readonly>

                    </div>
                    <p></p>
                     </div> <!-- end col -->

                        <div class="col-md-6">
                        <label for="" class="form-label">Select Province</label>
                         <select class="form-control" name="province" id="province" onchange="sstCal()">
                            <option value="">Please Select</option>
                            <option value="SST">Sindh</option>
                            <option value="PST">Punjab</option>
                            <option value="KPRA">Kyber Pakhtunkhwa</option>
                            <option value="BRA">Balochistan</option>
                        </select>
                        <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="SSTPSTKPRABRAProvincialServicesTax" class="form-control" id="SSTPSTKPRABRAProvincialServicesTax" readonly />
                        <p></p>
                        <div class="form-check form-switch mb-2">
                       <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" name="ServicesTaxonTotalAmount" />
                        <label class="form-check-label" for="flexSwitchCheckDefault">Services Tax on Total Amount</label>
                         </div>
                      </div>

                       <script>
                        function sstCal()
                        {
                            var sst_kpra_bra = 15;
                            var pst = 16;
                            var province = document.getElementById('province').value;

                            if(province == "SST" || province == "KPRA" || province == "BRA")
                            {
                                document.getElementById("SSTPSTKPRABRAProvincialServicesTax").value = sst_kpra_bra;
                            }
                            else
                            {
                                document.getElementById("SSTPSTKPRABRAProvincialServicesTax").value = pst;
                            }

                        }
                      </script>

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


                      <div class="col-md-6">
                        <label for="" class="form-label">Photographs</label>
                        <input type="text" placeholder="Photographs" name="Photographs" 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="Re-Inspection" 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="from" 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="to" 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="km" class="form-control" id="km" />
                        <p></p>
                      </div>


                      <div class="col-md-6">
                        <label for="" class="form-label">@ Per KM</label>
                        <input type="text" placeholder="@ Per KM" name="perkm" class="form-control" id="perkm" onchange="travelExp()" />
                        <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="totaltravellingexpense" class="form-control" id="totaltravellingexpense" readonly />
                        <p></p>
                      </div>

                      <script>
                        function travelExp()
                        {
                            var a = document.getElementById('km').value;
                            var b = document.getElementById('perkm').value;
                            document.getElementById('totaltravellingexpense').value = a * b;
                        }
                      </script>



                          <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" value="0">

            </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" name="reporttype">
                            <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>
                    </form>
                    </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')