@extends('admin.layouts.masterlayout')
@section('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css">
@endsection

@section('content')
<div class="main-content">
    <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 Based</h4>
                </div>
                <div class="card-body">
                    <!-- Filter Form -->
                    <div class="row mb-3">
                        {{ Form::open(['role' => 'form', 'id' => 'filterForm', 'class' => 'd-flex flex-wrap align-items-end gap-3']) }}
                        {{ csrf_field() }}

                        <div class="form-group">
                            <label for="start_date">Start Date</label>
                            <input type="text" required name="start_date" id="start_date"
                                class="form-control datetimepickerget"
                                value="{{ request('start_date', date('Y-m-01 H:i:s')) }}"
                                autocomplete="off">
                        </div>

                        <div class="form-group">
                            <label for="end_date">End Date</label>
                            <input type="text" required name="end_date" id="end_date"
                                class="form-control datetimepickerget"
                                value="{{ request('end_date', date('Y-m-d H:i:s')) }}"
                                autocomplete="off">
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary mt-2" id="getReportBtn">
                                <i class="fa fa-search"></i> Get GST Report
                            </button>
                        </div>

                        {{ Form::close() }}
                    </div>

                    <!-- Export Form (Hidden) -->
                    {{ Form::open(['role' => 'form', 'id' => 'exportForm', 'route' => [$modelName . '.download_gst_report'], 'method' => 'get', 'style' => 'display:none;']) }}
                    {{ csrf_field() }}
                    <input type="hidden" name="start_date" id="export_start_date">
                    <input type="hidden" name="end_date" id="export_end_date">
                    {{ Form::close() }}

                    <!-- Loading Indicator -->
                    <div id="loading-indicator" class="text-center d-none">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                        <p>Loading GST Report...</p>
                    </div>

                    <!-- No Data Message -->
                    <div id="no-data-message" class="alert alert-info text-center d-none">
                        <i class="fa fa-info-circle"></i> No data available for the selected date range
                    </div>

                    <!-- Data Section -->
                    <div class="card-body d-none" id="data-section">
                        <!-- Action Buttons -->
                        <div class="mb-3">
                            <button id="download-report-btn" class="btn btn-success">
                                <i class="fa fa-download"></i> Download CSV Report
                            </button>
                            <button id="refresh-data-btn" class="btn btn-info">
                                <i class="fa fa-refresh"></i> Refresh Data
                            </button>
                        </div>

                        <!-- Data Table -->
                        <div class="table-responsive">
                            <table id="dataList" class="table table-striped table-bordered" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>S No.</th>
                                        <th>Invoice No</th>
                                        <th>Date</th>
                                        <th>User State</th>
                                        <th>Refer Email</th>
                                        <th>Refer Name</th>
                                        <th>Sports</th>
                                        <th>Match Key</th>
                                        <th>Challenge Id</th>
                                        <th>Entry Fee</th>
                                        <th>Match Status</th>
                                        <th>Margin %</th>
                                        <th>Platform Fee</th>
                                        <th>IGST</th>
                                        <th>SGST</th>
                                        <th>CGST</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{asset('new_theme/assets/plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('new_theme/assets/plugins/datatable/js/dataTables.bootstrap5.min.js')}}"></script>
<script type="text/javascript">
    let dataTable;

    $(document).ready(function() {
        // Initialize date pickers
        $('#end_date, #start_date').datetimepicker({
            timepicker: true,
            format: 'Y-m-d H:i:s'
        });

        // Load initial data
        loadGSTReport();

        // Handle filter form submission
        $('#filterForm').on('submit', function(e) {
            e.preventDefault();
            loadGSTReport();
        });

        // Handle export button click
        $('#download-report-btn').on('click', function() {
            exportGSTReport();
        });

        // Handle refresh button click
        $('#refresh-data-btn').on('click', function() {
            loadGSTReport();
        });
    });

    function loadGSTReport() {
        // Show loading indicator
        $('#loading-indicator').removeClass('d-none');
        $('#data-section').addClass('d-none');
        $('#no-data-message').addClass('d-none');

        // Destroy existing DataTable if it exists
        if (dataTable) {
            dataTable.destroy();
        }

        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();

        // Initialize DataTable
        dataTable = $('#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
                },
                beforeSend: function() {
                    $('#loading-indicator').removeClass('d-none');
                },
                complete: function(response) {
                    $('#loading-indicator').addClass('d-none');

                    if (response.responseJSON && response.responseJSON.data && response.responseJSON.data.length > 0) {
                        $('#data-section').removeClass('d-none');
                        $('#no-data-message').addClass('d-none');

                        // Update export form fields
                        $('#export_start_date').val(start_date);
                        $('#export_end_date').val(end_date);
                    } else {
                        $('#data-section').addClass('d-none');
                        $('#no-data-message').removeClass('d-none');
                    }
                },
                error: function(xhr, status, error) {
                    $('#loading-indicator').addClass('d-none');
                    alert('Error loading data: ' + error);
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'transaction_id',
                    name: 'transaction_id'
                },
                {
                    data: 'joineddate',
                    name: 'joineddate'
                },
                {
                    data: 'state',
                    name: 'state'
                },
                {
                    data: 'refer_email',
                    name: 'refer_email'
                },
                {
                    data: 'refer_name',
                    name: 'refer_name'
                },
                {
                    data: 'sport_type_text',
                    name: 'sport_type_text'
                },
                {
                    data: 'matchkey',
                    name: 'matchkey'
                },
                {
                    data: 'challengeid',
                    name: 'challengeid'
                },
                {
                    data: 'entryfee',
                    name: 'entryfee'
                },
                {
                    data: 'final_status',
                    name: 'final_status'
                },
                {
                    data: 'margin',
                    name: 'margin'
                },
                {
                    data: 'platformfee',
                    name: 'platformfee'
                },
                {
                    data: 'igst',
                    name: 'igst'
                },
                {
                    data: 'sgst',
                    name: 'sgst'
                },
                {
                    data: 'cgst',
                    name: 'cgst'
                }
            ],
            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"
                },
                processing: "Loading GST Report..."
            }
        });
    }

    function exportGSTReport() {
        // Show loading state
        $('#download-report-btn').html('<i class="fa fa-spinner fa-spin"></i> Generating Report...');
        $('#download-report-btn').prop('disabled', true);

        // Submit export form
        $('#exportForm').submit();

        // Reset button state after a delay
        setTimeout(function() {
            $('#download-report-btn').html('<i class="fa fa-download"></i> Download CSV Report');
            $('#download-report-btn').prop('disabled', false);
        }, 3000);
    }
</script>

<style>
    /* Custom styles for better UI */
    .card.aos-init .dataTables_wrapper .dataTables_length,
    .card.aos-init .dataTables_wrapper .dataTables_filter {
        position: static;
        margin-bottom: 15px;
        top: auto;
    }

    .card.aos-init .dataTables_wrapper {
        padding-top: 20px;
    }

    .dataTables_wrapper .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #loading-indicator {
        padding: 40px;
    }

    .spinner-border {
        width: 3rem;
        height: 3rem;
    }

    .table th {
        background-color: #212529;
        color: aliceblue;

        font-weight: 600;
    }

    .btn {
        margin-right: 10px;
    }

    .alert {
        margin-top: 20px;
    }

    /* Responsive table improvements */
    @media (max-width: 768px) {
        .table-responsive {
            font-size: 12px;
        }

        .card-body {
            padding: 10px;
        }
    }
</style>
@endsection