@extends('layouts.app')
<style>
    td.details-control {
        background: url('../../public/images/icon/plus.png') no-repeat center center;
        cursor: pointer;
    }
    tr.shown td.details-control {
        background: url('../resources/details_close.png') no-repeat center center;
    }
</style>
@section('content')
    <!-- Start Content-->
    <div class="container-fluid">

        <!-- start page title -->
        <div class="row cus-landing">
            <div class="col-12">
                <div class="page-title-box">
                    <h4 class="page-title">Journal</h4>
                </div>
            </div>
        </div>
        <!-- end page title -->


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

                <div class="col-md-12 mb-4 mt-2">
                    <button type="button" class="btn btn-primary quatation btn-lg">Quatation</button>
                    <button type="button" class="btn btn-secondary invoice btn-lg">Invoice</button>
                    <button type="button" class="btn btn-info payment btn-lg">Payment</button>
                    <button type="button" class="btn btn-warning ageing btn-lg">Ageing</button>
                </div>
                <div class="row table-hide">
                    <div class="col-lg-12 col-md-12">
                        <div class="card">
                            <div class="card-body quatation-table">
                                <div class="row ">
                                    <div class="col-lg-6 col-md-6 date-range">
                                        <div class="form-group">
                                            <label>Select Date Range to generate Quotation Report</label>
                                            <input type="text" class="form-control date_quotation" name="datefilter" value="" />
                                            {{--<input type="text" class="form-control date_quotation" id="singledaterange" data-toggle="date-picker" data-cancel-class="btn-warning">--}}
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-4 date-range">
                                        <button type="button" class="btn btn-primary date-sumit get_quotation">Submit</button>
                                    </div>

                                    <div class="col-lg-12 col-md-12 mt-2 display_quotation" style="display: none">
                                    </div>
                                </div>
                            </div>

                            <div class="card-body invoice-table">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 date-range">
                                        <div class="form-group">
                                            <label>Select Date Range to generate Invoice Report</label>
                                            <input type="text" class="form-control date_invoice" name="datefilter" value="" />
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-4 date-range">
                                        <button type="button" class="btn btn-primary date-sumit get_invoice">Submit</button>
                                    </div>

                                    <div class="col-lg-12 col-md-12 mt-2 display_invoice" style="display: none"></div>
                                </div>
                            </div>

                            <div class="card-body payment-table">
                                <div class="row ">
                                    <div class="col-lg-6 col-md-6 date-range">
                                        <div class="form-group">
                                            <label>Select Date Range to generate Payment Report</label>
                                            <input type="text" class="form-control date_payment" name="datefilter" value="" />
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-4 date-range">
                                        <button type="button" class="btn btn-primary date-sumit get_payment">Submit</button>
                                    </div>

                                    <div class="col-lg-12 col-md-12 mt-2 display_payment" style="display: none">

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

                            <div class="card-body ageing-table">
                                <div class="row ">
                                    <div class="col-lg-12 col-md-12 mt-2 display_ageing">
                                        <h4 class="mb-4">Ageing Invoice List</h4>
                                        <table id="" class="display table dt-responsive w-100 table-bordered table-hover table-centered">
                                            <thead class="thead-dark">
                                            <tr>
                                                <th>Invoice Number</th>
                                                <th>Generated Date</th>
                                                <th>Customer Name</th>
                                                <th>Contact Person</th>
                                                <th>Total Invoice</th>
                                                <th>Total paid</th>
                                                <th>Outstanding</th>
                                                <th>Validity</th>
                                                <th>Days Elapsed</th>
                                            </tr>
                                            </thead>


                                            <tbody>
                                                                                        </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

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

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

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

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

    </div>
    <!-- container -->
    <script>
        $(function() {

            $('input[name="datefilter"]').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear'
                }
            });

            $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
            });

            $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });

        });
        $(".get_quotation").click(function () {
            var date = $(".date_quotation").val();
            var csrf_test_name = $("input[name=_token]").val();
            $.ajax({
                type: "POST",
                data: {'date': date,'_token': csrf_test_name},
                url: "{{ url('get-journal-quotation-list') }}",
                success: function (res) {
                    $(".display_quotation").show();
                    $(".display_quotation").html(res);
                    //var obj = jQuery.parseJSON(res);
                    //$("#company_name").val(obj.company_name);
                }
            });
        });

        $(".get_invoice").click(function () {
            var date = $(".date_invoice").val();
            var csrf_test_name = $("input[name=_token]").val();
            $.ajax({
                type: "POST",
                data: {'date': date,'_token': csrf_test_name},
                url: "{{ url('get-journal-invoice-list') }}",
                success: function (res) {
                    $(".display_invoice").show();
                    $(".display_invoice").html(res);
                    //var obj = jQuery.parseJSON(res);
                    //$("#company_name").val(obj.company_name);
                }
            });
        });

        $(".get_payment").click(function () {
            var date = $(".date_payment").val();
            var csrf_test_name = $("input[name=_token]").val();
            $.ajax({
                type: "POST",
                data: {'date': date,'_token': csrf_test_name},
                url: "{{ url('get-payment-list') }}",
                success: function (res) {
                    $(".display_payment").show();
                    $(".display_payment").html(res);
                    //var obj = jQuery.parseJSON(res);
                    //$("#company_name").val(obj.company_name);
                }
            });
        });

        $(document).ready(function(){
            $('table.display').DataTable();
            $(".quatation-table").hide();
            $(".invoice-table").hide();
            $(".payment-table").hide();
            $(".ageing-table").hide();

            $(".quatation").click(function(){
                $(".invoice-table").hide();
                $(".payment-table").hide();
                $(".ageing-table").hide();
                $(".quatation-table").toggle();
            });

            $(".invoice").click(function(){
                $(".quatation-table").hide();
                $(".payment-table").hide();
                $(".ageing-table").hide();
                $(".invoice-table").toggle();
            });

            $(".payment").click(function(){
                $(".quatation-table").hide();
                $(".ageing-table").hide();
                $(".invoice-table").hide();
                $(".payment-table").toggle();
            });

            $(".ageing").click(function(){
                $(".payment-table").hide();
                $(".quotation-table").hide();
                $(".invoice-table").hide();
                $(".ageing-table").toggle();
            });

        });
    </script>
@endsection