@extends('app-new')

@push('head-script')
<style>
    .jv-report-container {
        padding: 25px;
        background-color: #fff;
    }

    .jv-filter-section {
        margin-bottom: 25px;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 6px;
        border: 1px solid #e9ecef;
    }

    .jv-filter-form {
        display: flex;
        align-items: flex-end;
        gap: 20px;
        flex-wrap: wrap;
    }

    .jv-filter-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .jv-filter-group label {
        font-weight: 500;
        color: #495057;
        font-size: 13px;
        margin: 0;
    }

    .jv-filter-group select {
        padding: 8px 12px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        font-size: 13px;
        background-color: white;
        cursor: pointer;
        min-width: 120px;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .jv-filter-group select:focus {
        outline: none;
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }

    .jv-btn-group {
        display: flex;
        gap: 10px;
    }

    .jv-btn {
        padding: 8px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        transition: all 0.15s ease-in-out;
    }

    .jv-btn-filter {
        background-color: #007bff;
        color: white;
    }

    .jv-btn-filter:hover {
        background-color: #0056b3;
        box-shadow: 0 2px 4px rgba(0,86,179,0.25);
    }

    .jv-btn-print {
        background-color: #28a745;
        color: white;
    }

    .jv-btn-print:hover {
        background-color: #218838;
        box-shadow: 0 2px 4px rgba(33,136,56,0.25);
    }

    .jv-header {
        text-align: center;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 2px solid #dee2e6;
    }

    .jv-company-name {
        font-size: 18px;
        font-weight: 600;
        color: #212529;
        margin-bottom: 8px;
    }

    .jv-title {
        font-size: 16px;
        font-weight: 600;
        color: #495057;
        margin-bottom: 6px;
    }

    .jv-period {
        font-size: 14px;
        color: #6c757d;
        margin-bottom: 6px;
    }

    .jv-datetime {
        font-size: 12px;
        color: #999;
    }

    .jv-table {
        width: 100%;
        border-collapse: collapse;
        background-color: white;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .jv-table thead th {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        padding: 14px;
        font-weight: 600;
        color: #212529;
        font-size: 13px;
        text-align: left;
        border-bottom: 2px solid #dee2e6;
    }

    .jv-table tbody td {
        border: 1px solid #dee2e6;
        padding: 12px 14px;
        font-size: 13px;
        color: #212529;
    }

    .jv-table tbody tr:nth-child(even) {
        background-color: #f8f9fa;
    }

    .jv-table tbody tr:hover {
        background-color: #f0f7ff;
    }

    .jv-amount {
        text-align: right;
        font-family: 'Courier New', monospace;
        font-weight: 500;
    }

    .jv-total-row {
        background-color: #e9ecef;
        font-weight: 600;
        border-top: 2px solid #495057;
        border-bottom: 2px solid #495057;
    }

    .jv-total-row td {
        border-color: #495057;
        padding: 14px;
    }

    .jv-no-data {
        text-align: center;
        padding: 50px 20px;
        color: #6c757d;
    }

    .jv-no-data-icon {
        font-size: 40px;
        margin-bottom: 15px;
        opacity: 0.5;
    }

    .jv-no-data-text {
        font-size: 14px;
    }

    @media (max-width: 768px) {
        .jv-filter-form {
            flex-direction: column;
        }

        .jv-filter-group {
            width: 100%;
        }

        .jv-filter-group select {
            min-width: 100%;
        }

        .jv-btn-group {
            width: 100%;
        }

        .jv-btn {
            flex: 1;
        }
    }

    @media print {
        .jv-filter-section {
            display: none;
        }

        .jv-report-container {
            padding: 0;
            background-color: white;
        }

        .jv-table {
            box-shadow: none;
        }

        .jv-table tbody tr {
            page-break-inside: avoid;
        }

        body {
            font-size: 11px;
        }
    }
</style>
@endpush



@push('scripts')
<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}`;
    });
</script>
@endpush

@section('content')

<div class="report-container">
    <!-- Filter Section -->
    <div class="filter-section">
        <form method="GET" action="">
            <div>
                <label for="month" class="form-label">Month:</label>
                <select name="month" id="month" class="form-select" style="width: 150px;">
                    @for($m = 1; $m <= 12; $m++)
                        <option value="{{ $m }}" {{ $month == $m ? 'selected' : '' }}>
                            {{ \Carbon\Carbon::create(2024, $m)->format('F') }}
                        </option>
                    @endfor
                </select>
            </div>
            <div>
                <label for="year" class="form-label">Year:</label>
                <select name="year" id="year" class="form-select" style="width: 150px;">
                    @for($y = now()->year - 2; $y <= now()->year + 1; $y++)
                        <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                    @endfor
                </select>
            </div>
            <button type="submit" class="btn btn-primary btn-sm">Filter</button>
            <button type="button" class="btn btn-secondary btn-sm print-button" onclick="window.print()">
                <i data-feather="printer"></i> Print
            </button>
        </form>
    </div>

    <!-- JV Report -->
    <div class="report-header">
        <div class="report-date">{{ now()->format('d/m/y H:i:s') }}</div>
        <div style="clear: both;"></div>
    </div>

    <div class="report-title">JV FOR REGULAR PAYROLL</div>
    <div class="report-subtitle">{{ $organization->name }}</div>

    <div class="jv-details">
        <div class="jv-detail-row">
            <strong>JV DATE:</strong> {{ \Carbon\Carbon::createFromDate($year, $month, 1)->format('d/m/y') }}
        </div>
        <div class="jv-detail-row">
            <strong>JV NO:</strong> 1
        </div>
    </div>

    <table>
        <thead>
            <tr>
                <th style="width: 35%;">DESCRIPTION</th>
                <th style="width: 20%;">A/C</th>
                <th style="width: 22.5%;">DEBIT</th>
                <th style="width: 22.5%;">CREDIT</th>
            </tr>
        </thead>
        <tbody>
            @forelse($jvData as $entry)
                <tr>
                    <td>{{ $entry['description'] }}</td>
                    <td>{{ $entry['account'] ?? '-' }}</td>
                    <td class="numeric">
                        @if($entry['debit'] > 0)
                            {{ number_format($entry['debit'], 2) }}
                        @endif
                    </td>
                    <td class="numeric">
                        @if($entry['credit'] > 0)
                            {{ number_format($entry['credit'], 2) }}
                        @endif
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="4" style="text-align: center; padding: 20px;">No payroll data found for the selected month.</td>
                </tr>
            @endforelse
            
            @if(count($jvData) > 0)
                <tr class="total-row">
                    <td style="text-align: right;"><strong>TOTAL >>></strong></td>
                    <td></td>
                    <td class="numeric"><strong>{{ number_format($totalDebit, 2) }}</strong></td>
                    <td class="numeric"><strong>{{ number_format($totalCredit, 2) }}</strong></td>
                </tr>
            @endif
        </tbody>
    </table>

    <div class="end-report">End Report</div>
</div>

<script>
    feather.replace();
</script>

@endsection