@extends('layouts.app')
@section('title', 'Export · SakuApp')
@section('page-title', 'Export')

@section('content')
<div style="max-width:680px;">
    <div class="card">
        <p style="font-size:.8rem; font-weight:600; color:var(--t2); margin-bottom:4px;">Export Transactions</p>
        <p style="font-size:.77rem; color:var(--t3); margin-bottom:20px;">Apply a filter then download as Excel or PDF. Only your data is exported.</p>

        <form id="ef">
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px;">
                <div class="form-group mb0">
                    <label class="form-label" for="filter_type">Filter by</label>
                    <select name="filter_type" id="filter_type" class="form-control">
                        <option value="">All time</option>
                        <option value="month_year">Month + Year</option>
                        <option value="year">Year only</option>
                        <option value="custom">Custom range</option>
                    </select>
                </div>
                <div class="form-group mb0">
                    <label class="form-label" for="year">Year</label>
                    <select name="year" id="year" class="form-control">
                        <option value="">—</option>
                        @for($y = now()->year; $y >= now()->year - 10; $y--)
                            <option value="{{ $y }}">{{ $y }}</option>
                        @endfor
                    </select>
                </div>
                <div class="form-group mb0">
                    <label class="form-label" for="month">Month</label>
                    <select name="month" id="month" class="form-control">
                        <option value="">—</option>
                        @for($m = 1; $m <= 12; $m++)
                            <option value="{{ $m }}">{{ DateTime::createFromFormat('!m', $m)->format('F') }}</option>
                        @endfor
                    </select>
                </div>
                <div class="form-group mb0">
                    <label class="form-label" for="date_from">Date From</label>
                    <input type="date" name="date_from" id="date_from" class="form-control">
                </div>
                <div class="form-group mb0">
                    <label class="form-label" for="date_to">Date To</label>
                    <input type="date" name="date_to" id="date_to" class="form-control">
                </div>
            </div>

            <hr class="rule">

            <p style="font-size:.76rem; font-weight:600; color:var(--t2); margin-bottom:10px;">Download Format</p>
            <div style="display:flex; gap:10px;">
                <a id="btn-xlsx" href="{{ route('exports.excel') }}" class="btn btn-success">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    Export Excel
                </a>
                <a id="btn-pdf" href="{{ route('exports.pdf') }}" class="btn btn-danger">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75"><path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                    Export PDF
                </a>
            </div>
        </form>
    </div>
</div>

<script>
    function sync() {
        var p = new URLSearchParams();
        ['filter_type','month','year','date_from','date_to'].forEach(function(k) {
            var v = document.getElementById('ef').querySelector('[name='+k+']').value;
            if (v) p.set(k, v);
        });
        var qs = p.toString();
        document.getElementById('btn-xlsx').href = '{{ route("exports.excel") }}' + (qs ? '?'+qs : '');
        document.getElementById('btn-pdf').href  = '{{ route("exports.pdf") }}'  + (qs ? '?'+qs : '');
    }
    document.getElementById('ef').querySelectorAll('select,input').forEach(function(el) {
        el.addEventListener('change', sync);
    });
</script>
@endsection