@extends('layouts.app')

@section('content')



<style>
body{font-family:sans-serif; background:#f4f4f4; padding:20px;}
.card{background:#fff; padding:20px; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.1);}
.filter-bar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:15px;}
.filter-bar select, .filter-bar input, .filter-bar button{padding:8px; border-radius:8px; border:1px solid #ccc;}
</style>

<div class="header">
    <h2>Transactions Chart</h2>
    <a href="{{ route('dashboard') }}">Back</a>
</div>

<!-- Filter Form -->
<div class="filter-bar">
    <form method="get" id="chartFilterForm" style="display:flex; gap:10px; 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 style="display:none;" type="date" name="from_date" id="from_date" value="" required>
        <input style="display:none;" type="date" name="to_date" id="to_date" value="" required>

        <button style="display:none;" type="submit" id="go-btn">Go</button>
    </form>
</div>

    <div class="card">
        <canvas id="transactionChart"></canvas>
    </div>


@section('scripts')
<script>


// Show/hide date inputs for custom
const filterPeriod = document.getElementById('filter_period');
const fromDate = document.getElementById('from_date');
const toDate = document.getElementById('to_date');
const goBtn = document.getElementById('go-btn');
const form = document.getElementById('chartFilterForm');

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';
        if(window.filterChanged){
            form.submit();
        }
    }
}

filterPeriod.addEventListener('change', ()=>{
    window.filterChanged = true;
    updateDateInputs();
});

// Init
updateDateInputs();









const ctx = document.getElementById('transactionChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: @json($labels),
        datasets: [
            {
                label: 'Cash In',
                data: @json($data_in),
                backgroundColor: 'rgba(34,197,94,0.7)',
            },
            {
                label: 'Cash Out',
                data: @json($data_out),
                backgroundColor: 'rgba(239,68,68,0.7)',
            }
        ]
    },
    options: {
        responsive:true,
        plugins:{
            legend:{position:'top'},
            tooltip:{mode:'index', intersect:false}
        },
        scales:{
            x:{stacked:true},
            y:{stacked:true, title:{display:true, text:'Amount (৳)'}}
        }
    }
});
</script>
@endsection