@extends('main')
@section('css')
    <style>
        .select2-close-mask {
            z-index: 2099;
        }

        .select2-dropdown {
            z-index: 3051;
        }

        .test-class {
            background-color: brown !important;
            padding: 4px !important;
            color: honeydew
        }
    </style>
@endsection
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
        </h1>
        <ol class="breadcrumb">

        </ol>
    </section>

    <!-- Main content -->
    <section class=" content">
        <div class="card row my-2">
            <form class=" col-md-12 px-2">
                <div class="row px-3 py-4">
                    <div class="form-group col-md-4">
                        <div class="input-group-sm d-flex flex-column ">
                            <label for="risk_note_number" class="col-sm-23 col-form-label">Risk Note #</label>
                            <div class="d-flex flex-row "> 
                                <input type="text" class="form-control mr-2" id="risk_note_number" placeholder="Risk Note">
                                <span class="input-group-append">
                                    <button type="button" id="fetch-claim-details" class="btn btn-secondary btn-flat btn-sm ">fetch</button>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group col-md-4">
                        <div class="input-group-sm d-flex flex-column">
                            <label for="branch" class="col-sm-422 col-form-label">Initiate Branch</label>
                            <input type="text" class="form-control" id="branch" placeholder="Initiate Branch">
                        </div>
                    </div>
                    <div class="form-group col-md-4">
                        <div class="input-group-sm d-flex flex-column">
                            <label>Date:</label>
                            <div class="input-group date">
                                <input type="text" class="form-control datepicker" >
                                <div class="input-group-append">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class=" col-md-12 my-4">
                        <div class="input-group-sm col-md-5 d-flex flex-column">
                            <label class="col-sm- ">Claim Currency:</label>
                            <div class="input-group col-sm-8">
                                <select class="form-control " name="ClaimCurrency" >
                                    <option value="1">Tsh</option>
                                    <option value="2">Usd</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class=" col-md-4">
                        <div class="input-group-sm d-flex flex-column ">
                            <label class=" ">Premium Amount:</label>
                            <div class="input-group">
                                <input type="text" class="form-control " name="PremiumAmount" readonly>
                            </div>
                        </div>
                    </div>

                    <div class=" col-md-4 my-1">
                        <div class="input-group-sm d-flex flex-column ">
                            <label class=" ">Customer Balance Amount :</label>
                            <div class="input-group">
                                <input type="text" class="form-control " name="CustomerBalanceAmount" readonly>
                            </div>
                        </div>
                    </div>

                    <div class=" col-md-4 my-1">
                        <div class="input-group-sm d-flex flex-column ">
                            <label class=" ">Insurer Balance Amount  :</label>
                            <div class="input-group">
                                <input type="text" class="form-control " name="InsurerBalanceAmount" readonly >
                            </div>
                        </div>
                    </div>

                    <div class=" col-md-4 my-1">
                        <div class="input-group-sm d-flex  flex-column ">
                            <label class="col-sm-4">Insurer Name  :</label>
                            <div class="input-group">
                                <input type="text" class="form-control " name="InsurerName" >
                            </div>
                        </div>
                    </div>

                    <div class=" col-md-4 my-1">
                        <div class="input-group-sm d-flex  flex-column">
                            <label class="col-sm-4"> Email  :</label>
                            <div class="input-group">
                                <input type="text" class="form-control " name="InsurerEmail" >
                            </div>
                        </div>
                    </div>

                    <div class="input-group-sm d-flex flex-row my-1">
                        <div class="input-groupp mr-1">
                            <label class="col-sm-44 col-form-label">Period Start :</label>
                            <input type="text" class="form-control mr-1" name="startDate"  >
                        </div>
                        
                        <div class="input-groupp">
                            <label class="col-sm-44 col-form-label">Period End:</label>
                            <input type="text" class="form-control " name="endDate"  >
                        </div>
                    </div>
                        
                    <div class="input-group-sm col-md-4 d-flex flex-column ">
                        <label class="col-sm-">Insurance Type:</label>
                        <div class="input-group  ">
                            <select class="form-control " name="InsuranceType" >
                                <option value="1">Type1</option>
                                <option value="2">Type2</option>
                            </select>
                        </div>
                    </div>

                    <div class="input-group-sm col-md-4 d-flex flex-column ">
                        <label class="col-sm-">Insurance Class:</label>
                        <div class="input-group  ">
                            <select class="form-control " name="InsuranceClass" >
                                <option value="1">Type1</option>
                                <option value="2">Type2</option>
                            </select>
                        </div>
                    </div>

                    <div class="input-group-sm col-md-4 d-flex flex-column ">
                        <label class="col-sm-">Insurance Description:</label>
                        <div class="input-group  ">
                            <select class="form-control " name="InsuranceDescription" >
                                <option value="1">Description1</option>
                                <option value="2">Description2</option>
                            </select>
                        </div>
                    </div>


                    <div class=" col-md-3 my-1">
                        <div class="input-group-sm d-flex  flex-column">
                            <label class="col-sm-"> Cover Note  :</label>
                            <div class="input-group">
                                <input type="text" class="form-control " name="CoverNoteNumber" >
                            </div>
                        </div>
                    </div>
                    <div class=" col-md-3 my-1">
                        <div class="input-group-sm d-flex  flex-column">
                            <label class="col-sm-"> Sticker Number  :</label>
                            <div class="input-group">
                                <input type="text" class="form-control " name="StickerNumber" >
                            </div>
                        </div>
                    </div>
                    <div class=" col-md-3 my-1">
                        <div class="input-group-sm d-flex  flex-column">
                            <label class="col-sm-"> Vehicle Number  :</label>
                            <div class="input-group">
                                <input type="text" class="form-control " name="VehicleNumber" >
                            </div>
                        </div>
                    </div>
                    <div class=" col-md-3 my-1">
                        <div class="input-group-sm d-flex  flex-column">
                            <label class="col-sm-"> Policy Number  :</label>
                            <div class="input-group">
                                <input type="text" class="form-control " name="PolicyNumber" >
                            </div>
                        </div>
                    </div>


                    <div class=" col-md-4 my-1">
                        <div class="input-group-sm d-flex flex-column">
                            <label class="col-sm-"> Vehicle Make  :</label>
                            <div class="input-group">
                                <input type="text" class="form-control " name="VehicleMake" >
                            </div>
                        </div>
                    </div>

                    <div class=" col-md-4 my-1">
                        <div class="input-group-sm d-flex flex-column">
                            <label class="col-sm-"> Vehicle Model  :</label>
                            <div class="input-group">
                                <input type="text" class="form-control " name="VehicleModel" >
                            </div>
                        </div>
                    </div>

                    <div class=" col-md-4 my-1">
                        <div class="input-group-sm d-flex flex-column">
                            <label class="col-sm-"> Vehicle Type  :</label>
                            <div class="input-group">
                                <input type="text" class="form-control " name="VehicleType" >
                            </div>
                        </div>
                    </div>

                    <div class=" col-md-4 my-1">
                        <div class="input-group-sm d-flex flex-column">
                            <label class="col-sm-"> Client Name  :</label>
                            <div class="input-group">
                                <input type="text" class="form-control " name="ClientName" >
                            </div>
                        </div>
                    </div>

                    <div class=" col-md-4 my-1">
                        <div class="input-group-sm d-flex flex-column">
                            <label class="col-sm-"> File #  :</label>
                            <div class="input-group">
                                <input type="text" class="form-control " name="File" >
                            </div>
                        </div>
                    </div>

                    <div class=" col-md-4 my-1">
                        <div class="input-group-sm d-flex flex-column">
                            <label class="col-sm-"> Insured Name  :</label>
                            <div class="input-group">
                                <input type="text" class="form-control " name="InsuredName" >
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="card row my-1">
            <div style="text-align: center;" class="font-bold text-bold text-center px-3 py-1 border-b-1"> DRIVER'S DETAILS </div>
            <form id="drivers-details"  class=" col-md-12 px-2">
                <div class="row px-3 py-4">
                    <div class="form-group col-md-3 d-flex flex-column">
                        <label for="name" class="col-sm-23 col-form-label">Driver's Name </label> 
                        <input type="text" class="form-control mr-2" name="name" placeholder="Driver Name ">
                    </div>

                    <div class="form-group col-md-3 d-flex flex-column">
                            <label for="age" class="col-sm-422 col-form-label">Age </label>
                            <input type="text" class="form-control" name="age" placeholder="Driver's Age">
                    </div>

                    <div class="form-group col-md-3  d-flex flex-column my-">
                        <label class="col-form-label ">Occupation:</label>
                        <select class="form-control " name="occupation" >
                            <option value="1">Tsh</option>
                            <option value="2">Usd</option>
                        </select>
                    </div>

                    <div class="form-group col-md-3 d-flex flex-column my-1">
                        <label class=" ">Relation To Insured :</label>
                        <input type="text" class="form-control " name="relationship_to_insured" >
                    </div>

                    <div class=" col-md-4 my-1">
                        <div class="input-group-sm d-flex  flex-column">
                            <label class="col-sm-"> License Number  :</label>
                            <input type="text" class="form-control " name="license_number" >
                        </div>
                    </div>

                    <div class=" col-md-4 my-1">
                        <div class="input-group-sm d-flex  flex-column">
                            <label class="col-sm-"> Issuing Authority  :</label>
                            <select class="form-control "  name="issuing_authority" >
                                <option value="TRA">TRA</option>
                                <option value="ZRA">ZRA</option>
                            </select>
                        </div>
                    </div>
                        
                    <div class="input-group-sm col-md-4 d-flex flex-column ">
                        <label class="col-sm-">Class / Type:</label>
                        <select class="form-control " name="class_type" >
                            <option value="A">A</option>
                            <option value="A1">A1</option>
                            <option value="A2">A2</option>
                            <option value="A3">A3</option>
                            <option value="B">B</option>
                            <option value="C1">C1</option>
                            <option value="C2">C2</option>
                            <option value="C3">C3</option>
                            <option value="C">C</option>
                            <option value="D">D</option>
                            <option value="E">E</option>
                            <option value="F">F</option>
                            <option value="G">G</option>
                            <option value="H">H</option>
                        </select>
                    </div>

                    <div class="input-group-sm col-md-4 d-flex flex-column ">
                        <label class="col-sm-">License Expire Date:</label>
                        <input class="form-control " name="license_expire_date" >
                    </div>

                    <div class="input-group-sm col-md-6 d-flex flex-column ">
                        <label class="col-sm-"> Description:</label>
                        <div class="input-group  ">
                            <textarea class="form-control " rows="4" name="descriptions" ></textarea>
                        </div>
                    </div>

                    <div class="input-group-sm col-md-2 d-flex flex-column ">
                        <div class="h-1 py-3"></div>
                        <div class="h-1 py-3"></div>
                        <button class="btn btn-warning" type="submit">Submit</button>
                    </div>

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

        <div class="card row my-1">
            <div style="text-align: center;" class="font-bold text-bold text-center px-3 py-1 border-b-1"> CONTACT PERSON DETAILS </div>
            <form id="contact-person-details" class=" col-md-12 px-2">
                <div class="row px-3 py-4">
                    <div class="form-group col-md-3 d-flex flex-column">
                        <label for="name" class="col-sm-23 col-form-label"> Name </label> 
                        <input type="text" class="form-control mr-2" name="name" placeholder="Contact person name ">
                    </div>

                    <div class="form-group col-md-3 d-flex flex-column">
                        <label for="age" class="col-sm-422 col-form-label">Mobile </label>
                        <input type="text" class="form-control" name="mobile" placeholder="Mobile Number">
                    </div>

                    <div class="form-group col-md-3  d-flex flex-column my-">
                        <label class="col-form-label ">Occupation:</label>
                        <select class="form-control " name="occupation" >
                            <option value="1">Tsh</option>
                            <option value="2">Usd</option>
                        </select>
                    </div>

                    <div class="form-group col-md-3  d-flex flex-column my-">
                        <label class="col-form-label ">ID TYPE:</label>
                        <select class="form-control " name="identification_type" >
                            <option value="1">NIDA</option>
                            <option value="2">Voter's Id</option>
                            <option value="3">Driving License</option>
                            <option value="4">Passport</option>
                        </select>
                    </div>

                    <div class="form-group col-md-4 d-flex flex-column my-1">
                        <label class=" ">ID Number :</label>
                        <input type="text" class="form-control " name="identification_number" >
                    </div>

                    <div class="form-group col-md-4 d-flex flex-column my-1">
                        <label class=" ">Relation To Customer :</label>
                        <input type="text" class="form-control " name="relationship_to_customer" >
                    </div>
                    
                    <div class="input-group-sm col-md-6 d-flex flex-column ">
                        <label class="col-sm-"> Description:</label>
                        <div class="input-group  ">
                            <textarea class="form-control " rows="4" name="descriptions" ></textarea>
                        </div>
                    </div>
                    <div class="input-group-sm col-md-4 d-flex flex-column ">
                        <div class="h-1 py-3"></div>
                        <div class="h-1 py-3"></div>
                        <div class="h-1 py-3"></div>
                    </div>
                    <div class="input-group-sm col-md-2 d-flex flex-column ">
                        <div class="h-1 py-3"></div>
                        <div class="h-1 py-3"></div>
                        <button class="btn btn-warning" type="submit">Submit</button>
                    </div>
                </div>


            </form>
        </div>

    </section>

    <div class="modal fade risk_policy_modal policy-risk-replace-all"></div>

    <div class="modal fade modalEndorsementchangeData"></div>


@endsection

@section('js')
    @include('areas.script')
    @include('contracts.scripts.days')
    @include('contracts.scripts._policy')
    @include('contracts.scripts._policyCalculation')
    @include('customers.script')
    @include('contracts.scripts._changeControl')

    <script src="{{asset('assets/plugins/jquery-ui/jquery-ui.min.js')}}"></script>
    <script src="{{asset('assets/plugins/moment/moment.min.js')}}"></script>
    <script src="{{asset('assets/plugins/inputmask/jquery.inputmask.min.js')}}"></script>
    <script src="{{asset('assets/plugins/daterangepicker/daterangepicker.js')}}"></script>
    <script type="text/javascript">

$( function() {
    $( ".datepicker" ).datepicker();
  } );

        $(document).on('click', '#fetch-claim-details', function (e) {
            e.preventDefault();
            let note_number = $(this).closest('div').find('input').val();

            $.ajax({
                url: `/fetch-claim-details?note_number=${note_number}`,
                type: 'GET',

                success: function (response) {
                    
                    console.log(response.policy);
                }
            })
        });

        initializeSubmitFunction('contact-person-details', 'contact-people');
        initializeSubmitFunction('drivers-details', 'drivers');

    </script>
@endsection