@extends('main')
@section('css')
    <!-- daterange picker -->
    <link rel="stylesheet" href="{{ url('/') }}/assets/plugins/daterangepicker/daterangepicker.css">
@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="col-md-12">
            <div class=" d-flex flex-row justify-content-between ">
                <div class="card card-outline card-success w-25 mr-1">
                    <div class="card-header d-flex flex-column justify-content-center with-border">
                        <div class=" px-2">
                            <img src="{{url('/')}}/user-icon.png" alt="" srcset="">
                        </div>
                        <div class="d-flex flex-column justify-content-center px-2">
                            <div class="py-2 d-flex justify-content-center ">
                                JANETH ELIAKIM KOMPIK 
                            </div>
                            <div class="py-2 d-flex justify-content-center ">
                                FUT/232/901/11 
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-column px-2">
                        <div class="py-2 d-flex justify-content-between ">
                            <span>Phone</span>
                            <span>48935443</span>
                        </div>
                        <div class="py-2 d-flex justify-content-between ">
                            <span>Email</span>
                            <span>email@user.com</span>
                        </div>

                        <div class="py-2 d-flex justify-content-between ">
                            <span>TIN</span>
                            <span>345-231-231</span>
                        </div>

                        <div class="py-2 d-flex justify-content-between ">
                            <span>VRN</span>
                            <span>45-23131-J</span>
                        </div>
                    </div>
                </div>

                <div class="cardd  w-75 ml-1">  
                    <div class="card d-flex flex-row justify-content-between ">
                        <div class=" card-outline card-success p-2 22 ">Customer Invoice Panel</div>
                        <div class="cardd bg-blackh py-2">
                            <span class="w-1"></span>
                            
                            <button class="btn btn-danger">Return To Previous</button>
                        </div>
                    </div>

                    <div class=" bg-gray-900 d-flex flex-row justify-content-between m-2 ">
                        <div class="card d-flex flex-row justify-content-between w-50 m-2 mr-2">
                            <div class="bg-darkk bg-dark py-3 w-75 mr-1 p-1" >WALLET BALANCE</div>
                            <span class="bg-dark py-3 w-25 p-1"> 0 /=</span>
                        </div>

                        <div class="card d-flex flex-row justify-content-between w-50 m-2 ml-2">
                            <div class="bg-dark py-3 w-75 mr-1 p-1">DISCOUNT INFO</div>
                            <span class="bg-dark py-3 w-25 p-1"> 0.0 </span>
                        </div>
                    </div>
                    <div class="card mb-4">
                        <div class="card-body">
                            <div>Customer Invoice</div>

                            <div class=" d-flex flex-row m-2 ml-2">
                                    <div class="btn no-radius btn btn-outline-warning mr-2">
                                        Select Item
                                    </div>
                                <div class="btn btn-warning  text-white ml-4"> <i class="fa fa-print"></i> Print Invoice</div>
                            </div> 

                            <div class=" ">
                                <table class="table table-striped normal-table" id="create_group_form_table">
                                    <thead>
                                    <tr>
                                        <th>
                                            <input type="checkbox" name="options"> 
                                        </th>
                                        <th>Date Of Service</th>
                                        <th>Coast Of Business </th>
                                        <th>Name</th>
                                        <th>Amount</th>
                                        <th>Discount</th>
                                        <th>Paid Amount</th>
                                        <th>Due Amount</th>
                                        <th>Payment</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="options" id="option3" autocomplete="off"> 
                                            </td>
                                            <td> </td>
                                            <td> </td>
                                            <td> </td>
                                            <td> </td>
                                            <td> </td>
                                            <td> </td>
                                            <td> </td>
                                            <td> </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="d-flex flex-row justify-content-between">
                                <div class="d-flex flex-column border-right pr-2">
                                    <div> Change Currency</div>
                                    <div> USD ($)</div>
                                </div>

                                <div class="d-flex flex-column border-right text-font text-blue pr-2">
                                    <div class="display-14 h4"> 115,535.00 /=</div>
                                    <div> NET TOTAL PAYMENT</div>
                                </div>
                                
                                <div class="d-flex flex-column border-right text-font text-blue pr-2">
                                    <div class="display-14 h4"> 54.0 ($)</div>
                                    <div> CONVERSION </div>
                                </div>

                                <div class="d-flex flex-column border-right text-font text-blue pr-2">
                                    <div class="display-14 h4"> 0.0 /=</div>
                                    <div> TOTAL  DISCOUNT</div>
                                </div>

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




            </div>
        </div>
    </section>
@endsection




@section('js')
    <!-- InputMask -->
    <script src="{{ url('/') }}/assets/plugins/moment/moment.min.js"></script>
    <script src="{{ url('/') }}/assets/plugins/inputmask/jquery.inputmask.min.js"></script>
    <!-- date-range-picker -->
    <script src="{{ url('/') }}/assets/plugins/daterangepicker/daterangepicker.js"></script>
    <!-- bootstrap color picker -->

    <script type="text/javascript">

        $(document).on('submit','.find_by_date_service_group',function (e) {
            e.preventDefault();
            console.log('in here');
            let serviceGroupId = $(`.find_by_date_service_group select[name=serviceGroupId]`).val();
            let date = $(`.find_by_date_service_group input[name=date]`).val();
            if(!serviceGroupId){
                serviceGroupId = 'all';
            }
            window.location= `/specific_policies/${serviceGroupId}/${date}`
        })
    </script>

@endsection