@extends('layouts.app')
<!-- BEGIN CONTENT -->
@section('content')
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="top_bar page-content" style="min-height:375px">
        <div class="top_status_bar">
            <div id="top_progress_bar" class="progress_bar" style="width: 100%;">
            </div>
        </div>
        <div class="breadcrumbs">
            <ul>
                <li><a href="{{route('admin.dashboard')}}">Home</a></li>
                <li><a href="{{ url('admin/reports')}}">Reports</a></li>
                <li><a href="#">Sales Invoice Statement  </a></li>
            </ul>
            <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
        </div>
    </div>
    <div class="page-content">
        <div class="portlet">
            <!-- BEGIN PAGE HEADER-->
            <div class="portlet-title page_heading">
                <div class="row">
                    <div class="col-md-9">
                        <div class="caption">
                            <h2 style="font-weight: 600; margin-top: 0;">Sales Invoice Statement </h2>
                            <span class="subtitle"> Show Sales Invoice Statement.</span>
                        </div>
                    </div>
                    <!-- <div class="col-md-3 text-right">
                            <button type="button" class="btn theme_btn_round add_new_customer">Actions</button>
                        </div> -->
                    <div class="actions success_actions  " style="">
                        <div class="actions_dropdown hidden " style="height: 32px;">
                            <span>Actions</span>
                            <form action="{{ route('admin.sales.invoice.statement.data') }}" method="POST">
                                @csrf
                                <input type="hidden" name="invoice_no" id="invoice_number" value="">

                                <ul class="actions_list">

                                    <li>
                                        <button type="submit" class="" name="print_pdf" value="portrait">
                                            PDF
                                        </button>
                                    </li>
                                    <li>
                                        <button type="submit" class="" name="excel" value="excel">
                                            Export to Excel
                                        </button>
                                    </li>
                                </ul>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- BEGIN PAGE BAR -->
            <div class="row">
                <div class="col-md-12">
                    <!--THIS IS CONTENT DIV START-->
                    <div class="portlet-body flip-scroll">
                        <div class="row">
                            <div class="col-sm-12">
                                <form target="_blank" method="post" id="frm_customer_invoice_statement">
                                    @csrf
                                    <div class="wrapper_top">
                                        <div class="col-md-2">
                                            <select
                                                class="form-control select2 filter duration_by_day select2-hidden-accessible validate"
                                                id="select-customer" name="period_filter" tabindex="-1"
                                                aria-hidden="true" required>
                                                <option></option>
                                                @foreach($data["customers"] as $key => $value)
                                                <option value="{{$key}}">{{$value}}</option>
                                                @endforeach

                                            </select>
                                        </div>

                                        <div class="row form-group" style="margin-bottom: 30px;">
                                            <div class="col-md-2">
                                                <select
                                                    class="form-control select2 filter duration_by_day select2-hidden-accessible select_invoice validate"
                                                    tabindex="-1" aria-hidden="true" name="invoice_number" id="select_invoice_number">
                                                </select>
                                            </div>



                                            <div class="col-md-1">
                                                <input type="button" id="" name="" class="btn theme_btn_round load_data"
                                                    value="Load">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="contain_wrapper report_view_wrap hidden" id="report_view">

                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!--THIS IS CONTENT DIV END-->
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('admin_css')
<link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet"
    type="text/css" />
<link href="{{asset('assets/global/plugins/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}" rel="stylesheet"
    type="text/css" />
<style>
    .table-container {
        padding: 50px 0 0;
    }

    .contain_wrapper {
        padding: 10px 70px;
        background: #6e6e6e;
    }

    .wrapper_income {
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;

    }

    .report_wrap {
        background: #fff;
        padding: 100px 70px;
    }

    .report_header {
        margin-bottom: 70px;
        overflow: hidden;
    }

    .top_section {
        overflow: hidden;
        border-bottom: 3px solid #37c6d3;
    }

    .report_title {
        font-size: 35px;
        color: #000;
    }

    .company_name {
        font-size: 25px;
        color: #37c6d3;
        /* margin-top: 6px; */
    }

    .company_name {
        font-size: 25px;
        color: #37c6d3;
        /* margin-top: 6px; */
    }

    .filter_head {
        font-weight: 500;
        font-size: 20px;
        color: #898a8a;
    }

    .table {
        margin-bottom: 0 !important;
    }

    .dates_wrap {
        overflow: inherit;
    }

    .section_divider {
        /* border-top: 2px solid #000 !important; */
        border-bottom: 2px solid #A5A5A5 !important;
    }

    .section_end {
        border-bottom-style: double;
        font-weight: 600;
        font-size: 20px !important;
        border-color: #000;
    }
</style>

@stop
@section('admin_js')
<script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/datatables/datatables.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"
    type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js')}}"
    type="text/javascript"></script>
<script src="{{asset('js/general.js')}}" type="text/javascript"></script>
<script>
    $(document).ready(function () {
            //SELECT 2 Simple//
            $("#select_invoice_number.select2").select2({
                placeholder: "Select invoice",
                allowClear: true
            });
            $("#select-customer.select2").select2({
                placeholder: "Select customer",
                allowClear: true
            });
            $('.datepicker').datepicker();
        });
        $(document).on("click",".load_data",function(){
            var url = "{{route('admin.sales.invoice.statement.data')}}";
            var customer= $('#select-customer').val();
            var invoice_no=$('.select_invoice').val();
            $('#invoice_number').val(invoice_no);
            
            var flag = validationForm("#frm_customer_invoice_statement");
            if (flag == 1) {
            $('.alert_box').fadeIn(200).delay(5000).fadeOut(200);
            return false;
        } 
           $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('input[name="_token"]').val()}});
                $.ajax({
                    url: url,
                    method: "POST",
                   
                    data: {customer:customer,invoice_no:invoice_no},
                    beforeSend: function () {
                        //$('.ajax-loading').show();
                    },
                    success: function (response) {
                        if(response.status == 1000){
                            $("#report_view").html(response.html); 
                            $("#report_view").removeClass("hidden");
                            $(".actions_dropdown").removeClass("hidden");
                        }else{
                             
                            alertbox('danger', 'No data found!');
                        }
                    },
                });
        });

        
       
        $(document).on("change",'#select-customer', function () {
          var customer = $(this).val();
           var url = "{{route('admin.report.get.customerinvoice')}}";
            $(".select_invoice").select2("val", "");
            var token = $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val()}});
            $.ajax({
                url: url,
                type: "get",
                data: {'customer_id': customer},
                processData: true,
                contentType: true,

                success: function (response) {
                   if(response.status == 1000){
                       var options ='<option></option>';
                       $.each(response.data,function(key,value){
                           options += '<option value="'+value.invoice_no+'">'+value.invoice_no+'</option>'
                       });
                      $(".select_invoice").html(options);
                       
                   }
                },
            });
         
        });
</script>
@stop