@extends('app-new')

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">JV Report</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/home">Home</a></li>
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/payroll/components">Payroll</a></li>
                    <li class="breadcrumb-item active">JV Report</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
<div class="report-container">
    <div class="card ">
        <div class="card-body">
            <form method="GET" action="" id="jvFilterForm" class="row g-3">
                <div class="col-2 col-md-auto">
                    <label for="jvMonth" class="form-label">Month:</label>
                    <select name="month" id="jvMonth" class="form-select">
                        @for ($m = 1; $m <= 12; $m++)
                            <option value="{{ $m }}" {{ $m == $month ? 'selected' : '' }}>
                                {{ \Carbon\Carbon::create(null, $m, 1)->format('F') }}
                            </option>
                        @endfor
                    </select>
                </div>

                <div class="col-2 col-md-auto">
                    <label for="jvYear" class="form-label">Year:</label>
                    <select name="year" id="jvYear" class="form-select">
                        @for ($y = now()->year - 2; $y <= now()->year + 1; $y++)
                            <option value="{{ $y }}" {{ $y == $year ? 'selected' : '' }}>{{ $y }}</option>
                        @endfor
                    </select>
                </div>

                <div class="col-8 col-md-auto d-flex align-items-end gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="feather icon-filter"></i> Filter
                    </button>
                    <button type="button" class="btn btn-info" onclick="downloadExcel()">
                        <i class="feather icon-download"></i> Download Excel
                    </button>
                    <button type="button" class="btn btn-danger" onclick="downloadPDF()">
                        <i class="feather icon-download"></i> Download PDF
                    </button>
                    
                </div>
            </form>
        </div>
    </div>
    @if ($jvData && count($jvData) > 0)
        <div class="card">
            <div class="card-body">
                <div class=" text-center">
                    <h5 class="fw-bold mb-2">{{ $organization->company_name ?? 'Organization' }}</h5>
                    <h6 class="fw-bold text-secondary mb-2">Journal Voucher Report</h6>
                    <p class="text-muted mb-2">{{ \Carbon\Carbon::create($year, $month, 1)->format('F Y') }}</p>
                    <p class="text-muted small">Generated on: {{ now()->format('d-m-Y H:i:s') }}</p>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th style="width: 35%;">Description</th>
                                <th style="width: 20%;">Debit GL Code</th>
                                <th style="width: 20%;">Credit GL Code</th>
                                <th style="width: 20%;" class="text-end">Debit</th>
                                <th style="width: 20%;" class="text-end">Credit</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($jvData as $entry)
                                <tr>
                                    <td>{{ $entry['description'] }}</td>
                                    <td>{{ $entry['debit_gl_code'] }}</td>
                                    <td>{{ $entry['credit_gl_code'] }}</td>
                                    <td class="text-end">{{ number_format($entry['debit'], 2) }}</td>
                                    <td class="text-end">{{ number_format($entry['credit'], 2) }}</td>
                                </tr>
                            @endforeach
                            <tr class="table-active fw-bold">
                                <td colspan="3" class="text-end">TOTAL</td>
                                <td class="text-end">{{ number_format($totalDebit, 2) }}</td>
                                <td class="text-end">{{ number_format($totalCredit, 2) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @else
        <div class="card">
            <div class="card-body text-center py-5">
                <div class="fs-1 mb-3 text-muted">
                    <i class="feather icon-inbox"></i>
                </div>
                <p class="text-muted">
                    No data found for {{ \Carbon\Carbon::create($year, $month, 1)->format('F Y') }}
                </p>
            </div>
        </div>
    @endif
</div>
@endsection

@push('footer-script')
<script>
    document.getElementById('jvFilterForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const month = document.getElementById('jvMonth').value;
        const year = document.getElementById('jvYear').value;
        window.location.href = `?month=${month}&year=${year}`;
    });

    function downloadPDF() {
        const month = document.getElementById('jvMonth').value;
        const year = document.getElementById('jvYear').value;
        const path = window.location.pathname;
        const pathParts = path.split('/');
        const alias = pathParts[1];
        window.location.href = `/${alias}/payroll/jv-report/pdf?month=${month}&year=${year}`;
    }

    function downloadExcel() {
        const month = document.getElementById('jvMonth').value;
        const year = document.getElementById('jvYear').value;
        const path = window.location.pathname;
        const pathParts = path.split('/');
        const alias = pathParts[1];
        window.location.href = `/${alias}/payroll/jv-report/excel?month=${month}&year=${year}`;
    }
</script>
@endpush