@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 Deposit Report</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">
                            <label for="transaction_by">Transaction By</label>
                            <select name="transaction_by" id="transaction_by" class="form-control">
                                <option value="">All</option>
                                <option value="admin">Admin</option>
                                <option value="user">User</option>
                                <option value="system">System</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="states">State</label>
                            <input type="text" name="states" id="states"
                                class="form-control" placeholder="Enter state name"
                                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>

                    <!-- 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 criteria
                    </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>

                        <!-- Summary Cards -->
                        <div class="row mb-4">
                            <div class="col-md-3">
                                <div class="card bg-primary text-white">
                                    <div class="card-body">
                                        <h5 class="card-title">Total Records</h5>
                                        <h3 id="total-records">0</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card bg-success text-white">
                                    <div class="card-body">
                                        <h5 class="card-title">Total Deposit</h5>
                                        <h3 id="total-deposit">₹0.00</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card bg-warning text-white">
                                    <div class="card-body">
                                        <h5 class="card-title">Total GST</h5>
                                        <h3 id="total-gst">₹0.00</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card bg-info text-white">
                                    <div class="card-body">
                                        <h5 class="card-title">Total Wallet</h5>
                                        <h3 id="total-wallet">₹0.00</h3>
                                    </div>
                                </div>
                            </div>
                        </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>CUSTOMER ID</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Mobile</th>
                                        <th>Team Name</th>
                                        <th>State</th>
                                        <th>Deposit Amount</th>
                                        <th>GST Amount</th>
                                        <th>IGST</th>
                                        <th>SGST</th>
                                        <th>CGST</th>
                                        <th>Wallet Amount</th>
                                        <th>Transaction By</th>
                                        <th>Transaction Date</th>
                                        <th>Total Tax</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;
    let currentFilters = {};

    $(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();
        }

        // Get filter values
        currentFilters = {
            start_date: $('#start_date').val(),
            end_date: $('#end_date').val(),
            transaction_by: $('#transaction_by').val(),
            states: $('#states').val()
        };

        // Initialize DataTable
        dataTable = $('#dataList').DataTable({
            order: [1, 'desc'],
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route($modelName . '.depositgstreport_new') }}",
                type: "POST",
                data: function(d) {
                    return $.extend(d, {
                        "_token": "{{ csrf_token() }}",
                        start_date: currentFilters.start_date,
                        end_date: currentFilters.end_date,
                        transaction_by: currentFilters.transaction_by,
                        states: currentFilters.states
                    });
                },
                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 summary cards
                        updateSummaryCards(response.responseJSON.data);
                    } 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: 'user_id',
                    name: 'user_id'
                },
                {
                    data: 'user_name',
                    name: 'user_name'
                },
                {
                    data: 'user_email',
                    name: 'user_email'
                },
                {
                    data: 'user_mobile',
                    name: 'user_mobile'
                },
                {
                    data: 'user_team',
                    name: 'user_team'
                },
                {
                    data: 'state',
                    name: 'state'
                },
                {
                    data: 'add_fund',
                    name: 'add_fund',
                    className: 'text-right'
                },
                {
                    data: 'gst_amount',
                    name: 'gst_amount',
                    className: 'text-right'
                },
                {
                    data: 'igst',
                    name: 'igst',
                    className: 'text-right'
                },
                {
                    data: 'sgst',
                    name: 'sgst',
                    className: 'text-right'
                },
                {
                    data: 'cgst',
                    name: 'cgst',
                    className: 'text-right'
                },
                {
                    data: 'wallet_amount',
                    name: 'wallet_amount',
                    className: 'text-right'
                },
                {
                    data: 'transaction_by',
                    name: 'transaction_by'
                },
                {
                    data: 'transaction_date',
                    name: 'transaction_date'
                },
                {
                    data: 'total_gst_amount',
                    name: 'total_gst_amount',
                    className: 'text-right'
                }
            ],
            pagingType: "full_numbers",
            paging: true,
            lengthChange: true,
            pageLength: 25,
            lengthMenu: [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, "All"]
            ],
            dom: '<"top"lf>rt<"bottom"ip><"clear">',
            language: {
                paginate: {
                    next: "Next",
                    previous: "Previous"
                },
                processing: "Loading GST Report...",
                emptyTable: "No data available in table",
                zeroRecords: "No matching records found"
            }
        });
    }

    function updateSummaryCards(data) {
        let totalRecords = data.length;
        let totalDeposit = 0;
        let totalGST = 0;
        let totalWallet = 0;

        data.forEach(function(item) {
            totalDeposit += parseFloat(item.add_fund.replace(/[^\d.-]/g, '')) || 0;
            totalGST += parseFloat(item.total_gst_amount.replace(/[^\d.-]/g, '')) || 0;
            totalWallet += parseFloat(item.wallet_amount.replace(/[^\d.-]/g, '')) || 0;
        });

        $('#total-records').text(totalRecords);
        $('#total-deposit').text('₹' + totalDeposit.toFixed(2));
        $('#total-gst').text('₹' + totalGST.toFixed(2));
        $('#total-wallet').text('₹' + totalWallet.toFixed(2));
    }

    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);

        // Create a form and submit it
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = "{{ route($modelName . '.depositgstreport_new') }}";
        form.style.display = 'none';

        // Add CSRF token
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);

        // Add download flag
        const downloadFlag = document.createElement('input');
        downloadFlag.type = 'hidden';
        downloadFlag.name = 'download';
        downloadFlag.value = '1';
        form.appendChild(downloadFlag);

        // Add filter parameters
        Object.keys(currentFilters).forEach(key => {
            if (currentFilters[key]) {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = key;
                input.value = currentFilters[key];
                form.appendChild(input);
            }
        });

        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);

        // 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;
        white-space: nowrap;
    }

    .table td {
        white-space: nowrap;
    }

    .btn {
        margin-right: 10px;
    }

    .alert {
        margin-top: 20px;
    }

    .text-right {
        text-align: right !important;
    }

    /* Summary cards styling */
    .card.bg-primary,
    .card.bg-success,
    .card.bg-warning,
    .card.bg-info {
        border: none;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .card.bg-primary .card-body,
    .card.bg-success .card-body,
    .card.bg-warning .card-body,
    .card.bg-info .card-body {
        padding: 20px;
    }

    .card-title {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .card h3 {
        font-size: 24px;
        font-weight: bold;
        margin: 0;
    }

    /* Filter form styling */
    .form-group {
        margin-bottom: 15px;
    }

    .form-group label {
        font-weight: 600;
        margin-bottom: 5px;
    }

    .gap-3 {
        gap: 1rem !important;
    }

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

        .card-body {
            padding: 10px;
        }

        .d-flex.flex-wrap {
            flex-direction: column;
        }

        .form-group {
            width: 100% !important;
        }
    }

    /* DataTables custom styling */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0.5rem 1rem;
        margin: 0 2px;
        border-radius: 4px;
    }

    .dataTables_wrapper .dataTables_info {
        padding-top: 0.85rem;
    }

    .dataTables_wrapper .dataTables_length select {
        width: 70px;
    }
</style>
@endsection