<?php
include 'auth_check.php';
include 'db.php';
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Transaction Details</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="assets/style.css">
<style>
  html, body { height: 100%; overflow: hidden; }
  main { margin-left: 0 !important; }
  .page-shell { display: flex; flex-direction: row; height: 100vh; overflow: hidden; width: 100%; }
</style>
</head>
<body class="bg-gray-100">

<div class="page-shell">
    <?php include 'sidebar.php'; ?>

    <main style="flex:1;min-width:0;padding:20px;background:#f3f4f6;min-height:100vh;display:flex;flex-direction:column;box-sizing:border-box;margin-left:0!important;width:0;">

            <!-- White card container -->
<div style="background:#fff;border-radius:16px;box-shadow:0 1px 4px rgba(0,0,0,.08);flex:1;overflow-y:auto;padding:24px;position:relative;">
                
                <!-- Header -->
                <h1 class="text-3xl font-bold mb-6 text-center text-gray-800">Export Report</h1>
                
<!-- Buttons container -->
<div class="flex flex-col md:flex-row gap-32 w-full justify-center mt-32">

<!-- Detail Report Button -->
<button id="openDetailReportModal" class="flex flex-col items-center justify-center w-64 h-64 bg-gray-200 text-gray-800 text-2xl font-bold rounded-3xl shadow-md transform hover:scale-105 hover:bg-gray-300 transition duration-300">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
    </svg>
    Detail Report
</button>

<!-- Monthly Report Button -->
<button id="openMonthlyModal"
    class="flex flex-col items-center justify-center w-64 h-64 bg-gray-200 text-gray-800 text-2xl font-bold rounded-3xl shadow-md transform hover:scale-105 hover:bg-gray-300 transition duration-300">

    <!-- Calendar Icon -->
    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M8 7V3m8 4V3M3 11h18M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
    </svg>

    Monthly Report
</button>
                </div>

            </div>
        </div>
    </main>
</div>


<!-- Modal Backdrop -->
<div id="detailReportModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
    <!-- Modal Content -->
    <div class="bg-white rounded-3xl shadow-xl w-96 p-6 relative">
        <!-- Close Button -->
        <button id="closeModal" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>

        <!-- Modal Header -->
        <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Popup Report</h2>

        <!-- Date Range Form -->
        <form id="generateReportForm" class="flex flex-col gap-4">
            <div>
                <label for="fromDate" class="block text-gray-700 font-medium mb-1">From</label>
                <input type="date" id="fromDate" name="fromDate" class="border border-gray-300 rounded-lg w-full p-3 focus:outline-none focus:ring-2 focus:ring-gray-300" required>
            </div>
            <div>
                <label for="toDate" class="block text-gray-700 font-medium mb-1">To</label>
                <input type="date" id="toDate" name="toDate" class="border border-gray-300 rounded-lg w-full p-3 focus:outline-none focus:ring-2 focus:ring-gray-300" required>
            </div>

            <!-- Generate Report Button -->
            <button type="submit" class="mt-4 bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 rounded-lg transition duration-300">
                Generate Report
            </button>
        </form>
    </div>
</div>

<!-- Modal Overlay -->
<div id="monthlyModal"
     class="fixed inset-0 bg-black bg-opacity-40 hidden items-center justify-center z-50">

    <!-- Modal Container -->
    <div class="bg-white rounded-3xl shadow-xl w-full max-w-lg p-8">

        <!-- Header -->
        <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">
            Monthly Report
        </h2>

            <!-- Form -->
    <form id="monthlyReportForm" method="POST" action="generate_monthly_report.php" class="space-y-6">

            <!-- Month & Year -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                <!-- Month -->
                <div class="relative">
                    <label class="block text-sm font-semibold text-gray-600 mb-2">
                        Month
                    </label>

                    <button type="button"
                        class="dropdown-btn w-full flex justify-between items-center
                               bg-white border border-gray-300 rounded-xl px-4 py-3
                               text-gray-800 hover:border-gray-400 transition">
                        <span class="dropdown-text">Select Month</span>
                        <svg class="w-5 h-5 text-gray-400"
                             xmlns="http://www.w3.org/2000/svg" fill="none"
                             viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M19 9l-7 7-7-7"/>
                        </svg>
                    </button>

                    <!-- Month Dropdown -->
                    <div id="monthDropdownList"
                         class="dropdown-menu hidden absolute z-20 mt-2 w-full
                                bg-white border border-gray-200 rounded-xl shadow-lg">
                        <div class="max-h-60 overflow-y-auto"></div>
                    </div>

                    <input type="hidden" name="month" id="reportMonth">
                </div>

                <!-- Year -->
                <div class="relative">
                    <label class="block text-sm font-semibold text-gray-600 mb-2">
                        Year
                    </label>

                    <button type="button"
                        class="dropdown-btn w-full flex justify-between items-center
                               bg-white border border-gray-300 rounded-xl px-4 py-3
                               text-gray-800 hover:border-gray-400 transition">
                        <span class="dropdown-text">Select Year</span>
                        <svg class="w-5 h-5 text-gray-400"
                             xmlns="http://www.w3.org/2000/svg" fill="none"
                             viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M19 9l-7 7-7-7"/>
                        </svg>
                    </button>

                    <!-- Year Dropdown -->
                    <div id="yearDropdownList"
                         class="dropdown-menu hidden absolute z-20 mt-2 w-full
                                bg-white border border-gray-200 rounded-xl shadow-lg">
                        <div class="max-h-60 overflow-y-auto"></div>
                    </div>

                    <input type="hidden" name="year" id="reportYear">
                </div>

            </div>

            <!-- Report Types -->
            <div class="space-y-3">
                <label class="flex items-center gap-3">
                    <input type="checkbox" name="report_type[]" value="petty_cash"
                           class="w-5 h-5 accent-gray-600">
                    <span class="text-gray-700 font-medium">Petty Cash Report</span>
                </label>

                <label class="flex items-center gap-3">
                    <input type="checkbox" name="report_type[]" value="monthly"
                           class="w-5 h-5 accent-gray-600">
                    <span class="text-gray-700 font-medium">Monthly Report</span>
                </label>

                <label class="flex items-center gap-3">
                    <input type="checkbox" name="report_type[]" value="details"
                           class="w-5 h-5 accent-gray-600">
                    <span class="text-gray-700 font-medium">Details Report</span>
                </label>
            </div>
            
            <!-- Report Format -->
<div class="relative mt-4">
    <label class="block text-sm font-semibold text-gray-600 mb-2">
        Report Format
    </label>

    <button type="button"
        id="reportFormatBtn"
        class="dropdown-btn w-full flex justify-between items-center
               bg-white border border-gray-300 rounded-xl px-4 py-3
               text-gray-800 hover:border-gray-400 transition">
        <span class="dropdown-text">Select Format</span>
        <svg class="w-5 h-5 text-gray-400"
             xmlns="http://www.w3.org/2000/svg" fill="none"
             viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M19 9l-7 7-7-7"/>
        </svg>
    </button>

    <!-- Dropdown List -->
    <div id="reportFormatDropdown" 
         class="dropdown-menu hidden absolute z-20 mt-2 w-full
                bg-white border border-gray-200 rounded-xl shadow-lg">
        <div class="max-h-40 overflow-y-auto">
            <div class="dropdown-item px-4 py-3 cursor-pointer hover:bg-gray-100 transition"
                 data-value="excel">Excel</div>
        </div>
    </div>

    <!-- Hidden Input -->
    <input type="hidden" name="report_format" id="reportFormat">
</div>


            <!-- Buttons -->
            <div class="flex justify-end gap-4 pt-6">
                <button type="button" id="closeMonthlyModal"
                    class="px-6 py-3 rounded-xl bg-gray-200 text-gray-700 hover:bg-gray-300 transition">
                    Close
                </button>

<button type="submit" id="generateReportBtn" disabled
    class="px-6 py-3 rounded-xl bg-gray-300 text-gray-500 cursor-not-allowed transition">
    Generate
</button>
            </div>

        </form>
</div>


<script>

// Report Format dropdown
const formatBtn = document.getElementById('reportFormatBtn');
const formatDropdown = document.getElementById('reportFormatDropdown');
const formatInput = document.getElementById('reportFormat');

formatBtn.addEventListener('click', e => {
    e.stopPropagation();
    closeAllDropdowns();
    formatDropdown.classList.toggle('hidden');
});

formatDropdown.querySelectorAll('.dropdown-item').forEach(item => {
    item.addEventListener('click', () => {
        formatDropdown.classList.add('hidden');
        formatInput.value = item.dataset.value;
        formatBtn.querySelector('.dropdown-text').textContent = item.textContent;
    });
});

// Default value = Excel
formatInput.value = 'excel';
formatBtn.querySelector('.dropdown-text').textContent = 'Excel';

const monthInput = document.getElementById('reportMonth');
const yearInput  = document.getElementById('reportYear');
const generateBtn = document.getElementById('generateReportBtn');

function updateGenerateButton() {
    if (monthInput.value && yearInput.value) {
        generateBtn.disabled = false;
        generateBtn.classList.remove(
            'bg-gray-300', 'text-gray-500', 'cursor-not-allowed'
        );
        generateBtn.classList.add(
            'bg-gray-700', 'text-white', 'hover:bg-gray-800'
        );
    } else {
        generateBtn.disabled = true;
        generateBtn.classList.remove(
            'bg-gray-700', 'text-white', 'hover:bg-gray-800'
        );
        generateBtn.classList.add(
            'bg-gray-300', 'text-gray-500', 'cursor-not-allowed'
        );
    }
}

document.querySelectorAll('.dropdown-btn').forEach(btn => {
    btn.addEventListener('click', e => {
        e.stopPropagation();
        closeAllDropdowns();
        btn.nextElementSibling.classList.toggle('hidden');
    });
});

document.querySelectorAll('.dropdown-item').forEach(item => {
    item.addEventListener('click', () => {
        const menu = item.closest('.dropdown-menu');
        const button = menu.previousElementSibling;
        const text = button.querySelector('.dropdown-text');
        const input = menu.parentElement.querySelector('input[type="hidden"]');

        text.textContent = item.textContent;
        input.value = item.dataset.value;
        menu.classList.add('hidden');
    });
});

document.addEventListener('click', closeAllDropdowns);

function closeAllDropdowns() {
    document.querySelectorAll('.dropdown-menu').forEach(menu => {
        menu.classList.add('hidden');
    });
}

const openBtn = document.getElementById('openMonthlyModal');
const modalmr = document.getElementById('monthlyModal');
const closeBtn = document.getElementById('closeMonthlyModal');

openBtn.addEventListener('click', () => {
    modalmr.classList.remove('hidden');
    modalmr.classList.add('flex');
    loadMonthYear();
});

closeBtn.addEventListener('click', () => {
    modalmr.classList.add('hidden');
    modalmr.classList.remove('flex');
});

function loadMonthYear() {
    fetch('get_month_year.php')
        .then(res => res.json())
        .then(data => {

            const monthList = document.querySelector('#monthDropdownList .max-h-60');
            const yearList  = document.querySelector('#yearDropdownList .max-h-60');

            // Reset
            monthList.innerHTML = '';
            yearList.innerHTML = '';

            // Months
            data.months.forEach(m => {
                monthList.innerHTML += `
                    <div class="dropdown-item px-4 py-3 cursor-pointer
                                hover:bg-gray-100 transition"
                         data-value="${m.value}">
                        ${m.label}
                    </div>
                `;
            });

            // Years
            data.years.forEach(y => {
                yearList.innerHTML += `
                    <div class="dropdown-item px-4 py-3 cursor-pointer
                                hover:bg-gray-100 transition"
                         data-value="${y}">
                        ${y}
                    </div>
                `;
            });

            bindDropdownItems();
        });
}

function bindDropdownItems() {
    document.querySelectorAll('.dropdown-item').forEach(item => {
        item.onclick = () => {
            const menu = item.closest('.dropdown-menu');
            const button = menu.previousElementSibling;
            const text = button.querySelector('.dropdown-text');
            const input = menu.parentElement.querySelector('input[type="hidden"]');

            text.textContent = item.textContent;
            input.value = item.dataset.value;

            menu.classList.add('hidden');

            updateGenerateButton(); // 👈 ADD THIS
        };
    });
}

// Open dropdown
document.querySelectorAll('.dropdown-btn').forEach(btn => {
    btn.onclick = (e) => {
        e.stopPropagation();
        closeAllDropdowns();
        btn.nextElementSibling.classList.toggle('hidden');
    };
});

// Close on outside click
document.addEventListener('click', closeAllDropdowns);

function closeAllDropdowns() {
    document.querySelectorAll('.dropdown-menu').forEach(menu => {
        menu.classList.add('hidden');
    });
}


const openModalBtn = document.getElementById('openDetailReportModal');
const modal = document.getElementById('detailReportModal');
const closeModalBtn = document.getElementById('closeModal');

openModalBtn.addEventListener('click', () => {
    modal.classList.remove('hidden');
});

closeModalBtn.addEventListener('click', () => {
    modal.classList.add('hidden');
});

// Optional: Close when clicking outside modal
window.addEventListener('click', (e) => {
    if (e.target === modal) modal.classList.add('hidden');
});

// Submit form
document.getElementById('generateReportForm').addEventListener('submit', (e) => {
    e.preventDefault();
    const fromDate = document.getElementById('fromDate').value;
    const toDate = document.getElementById('toDate').value;

    // Open export report with date range
    window.location.href = `export_detail_report.php?from=${fromDate}&to=${toDate}`;
});
</script>

</body>
</html>
