@extends('layout.app')
@section('title', 'GSTR-1 Report')
@push('header_script')
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5.css') }}">
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css') }}">
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
<style>
    .gstr-tab-container {
        margin-top: 15px;
    }
    .nav-tabs .nav-link {
        font-weight: bold;
        color: #495057;
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        margin-right: 2px;
    }
    .nav-tabs .nav-link.active {
        background-color: #0d6efd !important;
        color: #fff !important;
        border-color: #0d6efd #0d6efd #fff;
    }
    table.dataTable thead th {
        background-color: #f1f3f5;
        font-weight: bold;
        font-size: 12px;
        color: #212529;
    }
    table.dataTable tbody td {
        font-size: 12px;
    }
    .warning-panel {
        background-color: #fff3cd;
        border: 1px solid #ffe69c;
        color: #664d03;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 15px;
        font-size: 13px;
    }
</style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item">
            <a href="javascript:void(0);">GSTR-1 Report</a>
        </li>
    </ol>
</div>

<div class="app-body">
    <div class="card mb-3">
        <div class="card-body">
            <div class="row gx-3 align-items-end">
                <div class="col-sm-2">
                    <label class="form-label" for="fy">Financial Year</label>
                    <select id="fy" class="form-select">
                        @foreach($financial_years as $yearVal => $yearLabel)
                            <option value="{{ $yearVal }}" {{ $default_financial_year == $yearVal ? 'selected' : '' }}>{{ $yearLabel }}</option>
                        @endforeach
                    </select>
                </div>
                {{-- <div class="col-sm-2">
                    <label class="form-label" for="month">Month</label>
                    <select id="month" class="form-select">
                        <option value="">Choose Month</option>
                        <option value="4" selected>April</option>
                        <option value="5">May</option>
                        <option value="6">June</option>
                        <option value="7">July</option>
                        <option value="8">August</option>
                        <option value="9">September</option>
                        <option value="10">October</option>
                        <option value="11">November</option>
                        <option value="12">December</option>
                        <option value="1">January</option>
                        <option value="2">February</option>
                        <option value="3">March</option>
                    </select>
                </div> --}}

                <div class="col-sm-2">
                    <label class="form-label" for="from_date">From Date</label>
                    <input type="text" id="from_date" class="form-control datepicker" placeholder="DD-MM-YYYY">
                </div>
                <div class="col-sm-2">
                    <label class="form-label" for="to_date">To Date</label>
                    <input type="text" id="to_date" class="form-control datepicker" placeholder="DD-MM-YYYY">
                </div>
            </div>
        </div>
    </div>

    <!-- Warnings Panel -->
    {{-- <div id="missing-requirements-warning" class="warning-panel d-none">
        <strong><i class="ri-error-warning-line"></i> Missing Requirements:</strong>
        <ul class="mb-0" id="warnings-list">
            <li>GST configuration threshold is missing. Defaults to standard 2,50,000 for B2CL.</li>
        </ul>
    </div>
 --}}
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">Report Preview</h5>
            <button type="button" class="btn btn-success btn-sm" onclick="exportExcel()">
                <i class="ri-file-excel-2-line"></i> Export GSTR-1 Excel
            </button>
        </div>
        <div class="card-body">
            <!-- Nav Tabs -->
            <ul class="nav nav-tabs" id="gstrTabs" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active" id="b2b-tab" data-bs-toggle="tab" data-bs-target="#b2b" type="button" role="tab">1. B2B, SEZ, DE</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="b2cl-tab" data-bs-toggle="tab" data-bs-target="#b2cl" type="button" role="tab">2. B2CL</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="b2cs-tab" data-bs-toggle="tab" data-bs-target="#b2cs" type="button" role="tab">3. B2CS</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="cdnr-tab" data-bs-toggle="tab" data-bs-target="#cdnr" type="button" role="tab">4. CDNR</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="cdnur-tab" data-bs-toggle="tab" data-bs-target="#cdnur" type="button" role="tab">CDNUR</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="exempt-tab" data-bs-toggle="tab" data-bs-target="#exempt" type="button" role="tab">6. Exempt</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="hsn-tab" data-bs-toggle="tab" data-bs-target="#hsn" type="button" role="tab">7. HSN</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="docs-tab" data-bs-toggle="tab" data-bs-target="#docs" type="button" role="tab">8. Docs</button>
                </li>
            </ul>

            <!-- Tab Content -->
            <div class="tab-content gstr-tab-container" id="gstrTabContent">
                <!-- B2B -->
                <div class="tab-pane fade show active" id="b2b" role="tabpanel">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered w-100" id="table-b2b">
                            <thead>
                                <tr>
                                    <th>GSTIN</th>
                                    <th>Receiver Name</th>
                                    <th>Invoice No</th>
                                    <th>Invoice Date</th>
                                    <th>Invoice Value</th>
                                    <th>POS</th>
                                    <th>RCM</th>
                                    <th>Invoice Type</th>
                                    <th>Rate %</th>
                                    <th>Taxable Value</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

                <!-- B2CL -->
                <div class="tab-pane fade" id="b2cl" role="tabpanel">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered w-100" id="table-b2cl">
                            <thead>
                                <tr>
                                    <th>Invoice No</th>
                                    <th>Invoice Date</th>
                                    <th>Invoice Value</th>
                                    <th>POS</th>
                                    <th>Rate %</th>
                                    <th>Taxable Value</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

                <!-- B2CS -->
                <div class="tab-pane fade" id="b2cs" role="tabpanel">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered w-100" id="table-b2cs">
                            <thead>
                                <tr>
                                    <th>Type</th>
                                    <th>Place Of Supply</th>
                                    <th>Rate %</th>
                                    <th>Taxable Value</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

                <!-- CDNR -->
                <div class="tab-pane fade" id="cdnr" role="tabpanel">
                    {{-- <div class="warning-panel">
                        <strong>CDNR Module Status: Not Found During Initial Analysis.</strong>
                        <p class="mb-0">Please note that the database does not contain schema objects for credit/debit notes. If implemented later, entries will appear here automatically.</p>
                    </div> --}}
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered w-100" id="table-cdnr">
                            <thead>
                                <tr>
                                    <th>GSTIN</th>
                                    <th>Receiver Name</th>
                                    <th>Note Number</th>
                                    <th>Note Date</th>
                                    <th>Note Type</th>
                                    <th>Note Supply Type</th>
                                    <th>Note Value</th>
                                    <th>Rate %</th>
                                    <th>Taxable Value</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

                <!-- CDNUR -->
                <div class="tab-pane fade" id="cdnur" role="tabpanel">
                    {{-- <div class="warning-panel">
                        <strong>CDNUR Module Status: Not Found During Initial Analysis.</strong>
                        <p class="mb-0">Debit/Credit notes for unregistered taxpayers are currently not tracked in the active schema.</p>
                    </div> --}}
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered w-100" id="table-cdnur">
                            <thead>
                                <tr>
                                    <th>UR Type</th>
                                    <th>Note Number</th>
                                    <th>Note Date</th>
                                    <th>Note Type</th>
                                    <th>Note Value</th>
                                    <th>Rate %</th>
                                    <th>Taxable Value</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

                <!-- Exempt -->
                <div class="tab-pane fade" id="exempt" role="tabpanel">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered w-100" id="table-exempt">
                            <thead>
                                <tr>
                                    <th>Description</th>
                                    <th>Nil Rated Value</th>
                                    <th>Exempted Value</th>
                                    <th>Non-GST Value</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

                <!-- HSN -->
                <div class="tab-pane fade" id="hsn" role="tabpanel">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered w-100" id="table-hsn">
                            <thead>
                                <tr>
                                    <th>HSN/SAC</th>
                                    <th>Description</th>
                                    <th>UQC</th>
                                    <th>Quantity</th>
                                    <th>Total Value</th>
                                    <th>Rate %</th>
                                    <th>Taxable Value</th>
                                    <th>IGST</th>
                                    <th>CGST</th>
                                    <th>SGST</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

                <!-- Docs -->
                <div class="tab-pane fade" id="docs" role="tabpanel">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered w-100" id="table-docs">
                            <thead>
                                <tr>
                                    <th>Nature of Document</th>
                                    <th>Series Prefix</th>
                                    <th>Sr. No From</th>
                                    <th>Sr. No To</th>
                                    <th>Total Number</th>
                                    <th>Cancelled</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@push('footer_script')
<script src="{{ asset('theme/assets/vendor/datatables/dataTables.min.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
<script>
    $(document).ready(function() {
        $('.datepicker').daterangepicker({
            singleDatePicker: true,
            autoUpdateInput: false,
            locale: {
                format: 'DD-MM-YYYY'
            }
        });

        $('.datepicker').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD-MM-YYYY'));
            refreshReport();
        });

        // Trigger auto load on filter change
        $('#fy, #month').on('change', function() {
            refreshReport();
        });

        // Clear date picker inputs triggers refresh too
        $('#from_date, #to_date').on('change', function() {
            refreshReport();
        });

        // Trigger warning alert dynamically
        $('#missing-requirements-warning').removeClass('d-none');

        // Initial Load
        refreshReport();
    });

    function getFilters() {
        return {
            financial_year: $('#fy').val(),
            month: $('#month').val(),
            from_date: $('#from_date').val(),
            to_date: $('#to_date').val()
        };
    }

    function refreshReport() {
        var filters = getFilters();

        // Datatables Load
        $('#table-b2b').DataTable({
            destroy: true,
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('gstr1-report.b2b') }}",
                data: filters
            },
            columns: [
                { data: 'recipient_gstin', name: 'recipient_gstin' },
                { data: 'recipient_name', name: 'recipient_name' },
                { data: 'invoice_no', name: 'invoice_no' },
                { data: 'invoice_date', name: 'invoice_date' },
                { data: 'invoice_value', name: 'invoice_value' },
                { data: 'pos', name: 'pos' },
                { data: 'reverse_charge', name: 'reverse_charge' },
                { data: 'invoice_type', name: 'invoice_type' },
                { data: 'gst_rate', name: 'gst_rate' },
                { data: 'taxable_value', name: 'taxable_value' },
                { data: 'warnings', name: 'warnings', orderable: false, searchable: false }
            ]
        });

        $('#table-b2cl').DataTable({
            destroy: true,
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('gstr1-report.b2cl') }}",
                data: filters
            },
            columns: [
                { data: 'invoice_no', name: 'invoice_no' },
                { data: 'invoice_date', name: 'invoice_date' },
                { data: 'invoice_value', name: 'invoice_value' },
                { data: 'pos', name: 'pos' },
                { data: 'gst_rate', name: 'gst_rate' },
                { data: 'taxable_value', name: 'taxable_value' },
                { data: 'warnings', name: 'warnings', orderable: false, searchable: false }
            ]
        });

        $('#table-b2cs').DataTable({
            destroy: true,
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('gstr1-report.b2cs') }}",
                data: filters
            },
            columns: [
                { data: 'type', name: 'type' },
                { data: 'pos', name: 'pos' },
                { data: 'gst_rate', name: 'gst_rate' },
                { data: 'taxable_value', name: 'taxable_value' }
            ]
        });

        $('#table-exempt').DataTable({
            destroy: true,
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('gstr1-report.exempt') }}",
                data: filters
            },
            columns: [
                { data: 'description', name: 'description' },
                { data: 'nil_rated', name: 'nil_rated' },
                { data: 'exempted', name: 'exempted' },
                { data: 'non_gst', name: 'non_gst' }
            ]
        });

        $('#table-hsn').DataTable({
            destroy: true,
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('gstr1-report.hsn') }}",
                data: filters
            },
            columns: [
                { data: 'hsn', name: 'hsn' },
                { data: 'desc', name: 'desc' },
                { data: 'uqc', name: 'uqc' },
                { data: 'qty', name: 'qty' },
                { data: 'value', name: 'value' },
                { data: 'rate', name: 'rate' },
                { data: 'taxable', name: 'taxable' },
                { data: 'igst', name: 'igst' },
                { data: 'cgst', name: 'cgst' },
                { data: 'sgst', name: 'sgst' }
            ]
        });

        $('#table-docs').DataTable({
            destroy: true,
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('gstr1-report.docs') }}",
                data: filters
            },
            columns: [
                { data: 'nature', name: 'nature' },
                { data: 'prefix', name: 'prefix' },
                { data: 'from', name: 'from' },
                { data: 'to', name: 'to' },
                { data: 'total', name: 'total' },
                { data: 'cancelled', name: 'cancelled' }
            ]
        });
    }

    function exportExcel() {
        var filters = getFilters();
        var query = $.param(filters);
        window.location.href = "{{ route('gstr1-report.export') }}?" + query;
    }
</script>
@endpush