@extends('layout')

@section('content')
<div class="container-fluid flex-grow-1 container-p-y">
    <div class="nav-tabs-top mb-4">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#tab1">Optical Sell & Collection Report</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#tab2">Optical Sale Bill Summary Report</a>
            </li>
             <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#tab3">Optical Receipt Bill Summary Report</a>
            </li> 

        </ul>
        <div class="tab-content">
            <div class="tab-pane fade show active" id="tab1">
                <div class="card-body">
                    <form id="validation-form22" method="post" enctype="multipart/form-data">
                        <div class="form-row">
                            
                      
                            <div class="form-group col-md-2">
                                <label class="form-label">From Date </label>
                                <input type="date" name="FromDate" id="FromDate" class="form-control"
                                    value="{{date('Y-m-d')}}" autocomplete="off" required>
                            </div>
                            <div class="form-group col-md-2">
                                <label class="form-label">To Date</label>
                                <input type="date" name="ToDate" id="ToDate" class="form-control"
                                    value="{{date('Y-m-d')}}" autocomplete="off" required>
                            </div>

                            <input type="hidden" name="Search" value="Search">
                            <div class="form-group col-md-2" style="padding-top:20px;">
                                <button type="button" id="filter" class="btn btn-primary btn-finish">Search</button>
                            </div>
                        </div>

                    </form>

                    <div class="card">
                        <div class="card-body">


                            <div class="table-responsive" id="custresult">


                            </div>
                        </div>
                    </div>
                </div>
                </div>
                <div class="tab-pane fade" id="tab2">
                    <div class="card-body">
                    <form id="validation-form33" method="post" enctype="multipart/form-data">
                        <div class="form-row">
                      
                            <div class="form-group col-md-2">
                                <label class="form-label">From Date </label>
                                <input type="date" name="FromDate2" id="FromDate2" class="form-control"
                                    value="{{date('Y-m-d')}}" autocomplete="off" required>
                            </div>
                            <div class="form-group col-md-2">
                                <label class="form-label">To Date</label>
                                <input type="date" name="ToDate2" id="ToDate2" class="form-control"
                                    value="{{date('Y-m-d')}}" autocomplete="off" required>
                            </div>

                            <input type="hidden" name="Search" value="Search">
                            <div class="form-group col-md-2" style="padding-top:20px;">
                                <button type="button" id="filter2" class="btn btn-primary btn-finish">Search</button>
                            </div>
                        </div>

                    </form>

                    <div class="card">
                        <div class="card-body">


                            <div class="table-responsive" id="custresult2">


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


                <div class="tab-pane fade" id="tab3">
                    <div class="card-body">
                    <form id="validation-form44" method="post" enctype="multipart/form-data">
                        <div class="form-row">
                      
                            <div class="form-group col-md-2">
                                <label class="form-label">From Date </label>
                                <input type="date" name="FromDate3" id="FromDate3" class="form-control"
                                    value="{{date('Y-m-d')}}" autocomplete="off" required>
                            </div>
                            <div class="form-group col-md-2">
                                <label class="form-label">To Date</label>
                                <input type="date" name="ToDate3" id="ToDate3" class="form-control"
                                    value="{{date('Y-m-d')}}" autocomplete="off" required>
                            </div>

                            <input type="hidden" name="Search" value="Search">
                            <div class="form-group col-md-2" style="padding-top:20px;">
                                <button type="button" id="filter3" class="btn btn-primary btn-finish">Search</button>
                            </div>
                        </div>

                    </form>

                    <div class="card">
                        <div class="card-body">


                            <div class="table-responsive" id="custresult3">


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

                

            </div>
        </div>





    </div>
    @endsection
    @section('scriptcontent')
    @include('excelscript')
    <script>
    $(document).ready(function() {
        $('#filter').click(function() {
            var FromDate = $('#FromDate').val();
            var ToDate = $('#ToDate').val();
            if (FromDate != '' && ToDate != '') {
                queueList(FromDate, ToDate);
            } else {
                alert('Both Date is required');
            }
        });

        $('#refresh').click(function() {
            $('#FromDate').val('');
            $('#ToDate').val('');
            queueList();
        });

        function queueList(FromDate = '', ToDate = '') {
            $.ajax({
                url: "{{ url('viewOpticalSellReport') }}",
                method: "POST",
                data: {
                    _token: '{{csrf_token()}}',
                    FromDate: FromDate,
                    ToDate: ToDate
                },
                success: function(data) {
                    console.log(data);
                    $('#custresult').html(data);
                }
            });
        }



        $('#filter2').click(function() {
            var FromDate = $('#FromDate2').val();
            var ToDate = $('#ToDate2').val();
            if (FromDate != '' && ToDate != '') {
                queueList2(FromDate, ToDate);
            } else {
                alert('Both Date is required');
            }
        });

        $('#refresh2').click(function() {
            $('#FromDate2').val('');
            $('#ToDate2').val('');
            queueList2();
        });

        function queueList2(FromDate = '', ToDate = '') {
            $.ajax({
                url: "{{ url('viewOpticalSummaryReport') }}",
                method: "POST",
                data: {
                    _token: '{{csrf_token()}}',
                    FromDate: FromDate,
                    ToDate: ToDate
                },
                success: function(data) {

                    $('#custresult2').html(data);
                }
            });
        }



        $('#filter3').click(function() {
            var FromDate = $('#FromDate3').val();
            var ToDate = $('#ToDate3').val();
            if (FromDate != '' && ToDate != '') {
                queueList3(FromDate, ToDate);
            } else {
                alert('Both Date is required');
            }
        });

        $('#refresh3').click(function() {
            $('#FromDate3').val('');
            $('#ToDate3').val('');
            queueList3();
        });

        function queueList3(FromDate = '', ToDate = '') {
            $.ajax({
                url: "{{ url('viewReceiptSummaryReport') }}",
                method: "POST",
                data: {
                    _token: '{{csrf_token()}}',
                    FromDate: FromDate,
                    ToDate: ToDate
                },
                success: function(data) {

                    $('#custresult3').html(data);
                }
            });
        }
      
    });
    </script>
    @endsection