@extends('layouts.app')

@section('content')
<style>
.page-padding{padding-bottom:100px;}
.opening, .closing{font-weight:700;margin-bottom:10px;}
.filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:15px;}
.filter-btn{padding:8px 12px; border-radius:8px; border:none; background:#e5e7eb; cursor:pointer; font-size:13px;}
.filter-btn.active{background:#2563eb;color:#fff;}
#go-btn{display:none;} /* hide Go button by default */
</style>


<div class="header">
    <h2>Transactions</h2>
    <a href="{{ route('dashboard') }}">Back</a>
</div>
   
<!-- ==================== -->
<!-- 1️⃣ Search / Date Range -->
<!-- ==================== -->
<div class="filter-bar">
    <form method="get" id="filterForm" style="flex:1; display:flex; gap:5px; flex-wrap:wrap;">
        <select name="filter_period" id="filter_period">
            <option value="daily" >Daily</option>
            <option value="weekly" >Weekly</option>
            <option value="monthly" >Monthly</option>
            <option value="custom" >Custom</option>
        </select>

        <input type="date" name="from_date" id="from_date" value="" required>
        <input type="date" name="to_date" id="to_date" value="" required>

        <input type="hidden" name="filter_type" id="hidden_filter" value="">

        <button class="btn" type="submit" id="go-btn">Go</button>
    </form>
</div>
<!-- ==================== -->
<!-- 2️⃣ Type Filter (ALL / IN / OUT) -->
<!-- ==================== -->
<div class="filter-bar">
    <button class="filter-btn " onclick="filterType('ALL')">ALL</button>
    <button class="filter-btn " onclick="filterType('IN')">IN</button>
    <button class="filter-btn " onclick="filterType('OUT')">OUT</button>
</div>

<div class="opening">Opening Balance: ৳ 0.00</div>

<div class="card">
  
</div>

<div class="closing">Closing Balance: ৳ 0.00</div>


</div>

<script>
// ====================
// Auto show/hide date range + Go button
// ====================
const filterPeriod = document.getElementById('filter_period');
const goBtn = document.getElementById('go-btn');
const fromDate = document.getElementById('from_date');
const toDate   = document.getElementById('to_date');
const filterForm = document.getElementById('filterForm');

function updateDateInputs(){
    if(filterPeriod.value === 'custom'){
        fromDate.style.display = 'inline-block';
        toDate.style.display = 'inline-block';
        goBtn.style.display = 'inline-block';
    } else {
        fromDate.style.display = 'none';
        toDate.style.display = 'none';
        goBtn.style.display = 'none';

        // Only submit if user changed selection
        if(window.filterPeriodChanged){
            filterForm.submit();
        }
    }
}

filterPeriod.addEventListener('change', ()=>{
    window.filterPeriodChanged = true; // mark user change
    updateDateInputs();
});

// initial call
updateDateInputs();

// ====================
// Type filter
// ====================
function filterType(type){
    document.getElementById('hidden_filter').value = type;
    filterForm.submit();
}
</script>



@endsection