@extends('admin.layouts.default')
@section('content')
<link rel="stylesheet" href="{{asset('css/admin/datatable.css')}}">
<script src="{{asset('js/admin/datatable.js')}}"></script>
<script>
  $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
  });
</script>
<div class="container-fluid">
    <div class="row page-titles mx-0" data-aos="fade-up">
        <div class="col-sm-6 p-md-0">
            <!-- Page Heading -->
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card" data-aos="fade-up">
                <div class="card-header"><h4>GST Report User wise</h4></div>
                <div class="card-body">
                    <div class="basic-form">
                      {{ Form::open(['role' => 'form','id'=>'Downlode_GSTForm','route'=>[$modelName.'.downloadgstreport_userwise'],'files' => true,'method' => 'get']) }}
                        {{csrf_field()}}
                        <div class="form-row">
                            <div class="form-group col-md-6 mb-0">
                                <label>Start Date</label>
                                <input type="text" required="" name="start_date" id="start_date" class="pull-left form-control datetimepickerget w-95" value="{{ isset($_GET['start_date']) ? $_GET['start_date'] : date('Y-m-01') }}" autocomplete="off">
                            </div>

                            <div class="form-group col-md-6 mb-0">
                                <label>End Date</label>
                                <input type="text" required="" name="end_date" id="end_date" class="pull-left form-control datetimepickerget w-95" value="{{ isset($_GET['end_date']) ? $_GET['end_date'] : date('Y-m-d') }}" autocomplete="off">
                            </div>
                         </div>
                        {{ Form::close() }}
                    </div>
                </div>

                <div class="card-footer py-4">
                    <button type="submit" class="btn btn-primary show-data">Get GST Report</button>
                </div>

                <!-- Section for No Data message -->
                <h2 id="no-data-message" class="text-center d-none">No data available for the selected dates</h2>

                <!-- Section for Data Table -->
                <div class="card-body d-none" id="data-section">
                    <!-- Button to download the report -->
                    <button id="download-report-btn" class="btn btn-success mb-3" style="display:none;">Download Report</button>
                    
                    <div class="table-responsive">
                        <table id="dataList" class="display" style="min-width: 845px">
                            <thead>
                                <tr>
                                <th>S No.</th>
                                <th>Challange Id</th>
                                <th>IsMarthon</th>
                                <th>Match Key</th>
                                <th>Match Status</th>
                                <th>Max Allowed Users</th>
                                <th>Joined Users</th>
                                <th>User ID</th>
                                <th>Entry Fee</th>
                                <th>Win Amount</th>
                                <th>Date</th>
                                <th>Invoice No</th>
                                <th>Pool Prize</th>
                                <th>Plate Form Fee</th>
                                <th>IGST</th>
                                <th>CGST</th>
                                <th>SGST</th>
                                <th>Margin %</th>
                                <th>User State</th>
                                </tr>
                            </thead>

                            <tfoot>
                                <tr>
                                <th>S No.</th>
                                <th>Challange Id</th>
                                <th>IsMarthon</th>
                                <th>Match Key</th>
                                <th>Match Status</th>
                                <th>Max Allowed Users</th>
                                <th>Joined Users</th>
                                <th>User ID</th>
                                <th>Entry Fee</th>
                                <th>Win Amount</th>
                                <th>Date</th>
                                <th>Invoice No</th>
                                <th>Pool Prize</th>
                                <th>Plate Form Fee</th>
                                <th>IGST</th>
                                <th>CGST</th>
                                <th>SGST</th>
                                <th>Margin %</th>
                                <th>User State</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $('#end_date,#start_date').datetimepicker({
        timepicker: false,
        format:'Y-m-d'
    });

    // Show Data on click
    $(document).on('click', '.show-data', function(event){
        event.preventDefault();
        $('#dataList').DataTable().clear().destroy();
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();

        // Fetch data and populate table
        $('#dataList').DataTable({
            order: [1, 'desc'],
            "processing": true,
            "serverSide": true,
            "ajax":{
                url:"{{ route($modelName.'.gstreport_userwise') }}",
                type: "POST",
                data: {"_token": "{{ csrf_token() }}", start_date: start_date, end_date: end_date},
                complete: function (response) {
                    if (response.responseJSON.data.length > 0) {
                        $('#data-section').removeClass('d-none');
                        $('#no-data-message').addClass('d-none');
                        $('#download-report-btn').show();
                    } else {
                        $('#data-section').addClass('d-none');
                        $('#no-data-message').removeClass('d-none');
                        $('#download-report-btn').hide();
                    }
                }
            },
            "columns": [
                {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                {data: 'challengeid', name: 'challengeid'},
                {data: 'marathon', name: 'marathon'},
                {data: 'matchkey', name: 'matchkey'},
                {data: 'final_status', name: 'final_status'},
                {data: 'maximum_user', name: 'maximum_user'},
                {data: 'joinedusers', name: 'joinedusers'},
                {data: 'userid', name: 'userid'},
                {data: 'entryfee', name: 'entryfee'},
                {data: 'win_amount', name: 'win_amount'},
                {data: 'joineddate', name: 'joineddate'},
                {data: 'transaction_id', name: 'transaction_id'},
                {data: 'getpoolprize', name: 'getpoolprize'},
                {data: 'platformfee', name: 'platformfee'},
                {data: 'igst', name: 'igst'},
                {data: 'cgst', name: 'cgst'},
                {data: 'sgst', name: 'sgst'},
                {data: 'margin', name: 'margin'},
                {data: 'state', name: 'state'},
            ],
            "pagingType": "full_numbers",
            "paging": true,
            "lengthChange": true,
            "pageLength": 10,
            "dom": '<"top"f><"table-buttons"B>rt<"bottom"lp><"clear">',
            "buttons": [],
            "language": {
                "paginate": {
                    "next": "Next",
                    "previous": "Previous"
                }
            }
        });
    });

    // Handle report download
    $('#download-report-btn').on('click', function () {
        $("#Downlode_GSTForm").submit();
    });
});
</script>

<style>
/* Adjust position to avoid overlap */
.card.aos-init .dataTables_wrapper .dataTables_length, 
.card.aos-init .dataTables_wrapper .dataTables_filter {
    position: static;  /* Change from absolute to static to avoid overlap */
    margin-bottom: 15px; /* Add space between dropdown/filter and table */
    top: auto; /* Remove any existing top positioning */
}

/* Ensure the button is aligned correctly */
#download-report-btn {
    margin-bottom: 15px; /* Add space below the download button */
}

/* Ensure DataTables pagination and info sections are properly aligned */
.dataTables_wrapper .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* General padding for better spacing */
.card.aos-init .dataTables_wrapper {
    padding-top: 20px;
}

</style>


@endsection