@extends(backpack_view('blank'))

@section('after_styles')
    <style media="screen">
        .backpack-profile-form .required::after {
            content: ' *';
            color: red;
        }
    </style>
@endsection

@php
  $breadcrumbs = [
      trans('backpack::crud.admin') => url(config('backpack.base.route_prefix'), 'dashboard'),
      trans('backpack::base.my_account') => false,
  ];
@endphp

@section('header')
    <section class="content-header">
        <div class="container-fluid mb-3">
            <h1>Report</h1>
        </div>
    </section>
@endsection

@section('content')

    
    @if (session('success'))
    <div class="row">
        <div class="col-lg-8">
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        </div>
    </div>
    @endif

    @if ($errors->count())
    <div class="row">
        <div class="col-lg-8">
            <div class="alert alert-danger">
                <ul class="mb-1">
                    @foreach ($errors->all() as $e)
                    <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    @endif
    <div class="row p-2">
        <div class="col-lg-12 mb-4"> 
            <div class="card padding-10">
                <div class="card-body">
                    <div class="row">
                        <div class="col-4">
                            <h2 class="card-title">Call Report ({{ $pharmacyName ?? "All" }})</h2>
                        </div>
                        <div class="col-8 d-flex justify-content-end align-items-top gap-2">
                                @if (!empty($pharmacies))
                                    <div class="dropdown">
                                        <a class="btn btn-secondary dropdown-toggle" type="button" id="dropdownPharmacyButton" data-bs-toggle="dropdown" aria-expanded="false">
                                            {{ $pharmacyName ?? "Select Pharmacy" }}
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="dropdownPharmacyButton">
                                            <a class="dropdown-item" href="{{ request()->url() }}">All Pharmacies</a>
                                            @foreach ($pharmacies as $pharmacy )
                                                <a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['pharmacy_id' => $pharmacy->id]) }}">{{ $pharmacy->name }}</a>
                                            
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            
                            <form method="GET" action="" id="selectDateRangeForm">
                                <div class="row d-flex flex-nowrap mb-1 ">
                                    {{-- <div class="col-md-4 d-flex flex-row me-2">
                                        <label for="from" class="me-1">From</label>
                                        <input type="date" name="from" value="{{ request('from') ?? $from }}" class="form-control">
                                    </div>
                                    <div class="col-md-4 d-flex flex-row">
                                        <label for="to" class="me-1">To</label>
                                        <input type="date" name="to" value="{{ request('to') ?? $to }}" class="form-control">
                                    </div> --}}
                                    <div class="col-md-12">
                                        <div class="date-range-wrapper">
                                        <div class="date-presets">
                                            <button type="button" class="preset-btn" data-range="0">Today</button>
                                            <button type="button" class="preset-btn" data-range="7">Last 7 days</button>
                                            <button type="button" class="preset-btn" data-range="14">Last 14 days</button>
                                            <button type="button" class="preset-btn" data-range="30">Last 30 days</button>
                                            <button type="button" class="preset-btn" data-range="month">This month</button>
                                        </div>
                                        <div class="d-flex gap-1">
                                            <input type="text" id="date_range" class="form-control" placeholder="Select date range" >

                                            <input type="hidden" name="from" id="start_date" value="{{ date('Y-m-d', strtotime(request('from') ?? $from))  }}">
                                            <input type="hidden" name="to" id="end_date" value="{{ date('Y-m-d', strtotime(request('to') ?? $to ))  }}">
                                            <input type="hidden" name="pharmacy_id" value="{{ request()->pharmacy_id }}" />
                                            <button type="submit" class="btn btn-primary">Submit</button>
                                            <button type="reset" class="btn btn-primary">Reset</button>
                                        </div>
                                    </div>
                                
                                </div>
                            </form>
                        </div>
                    </div>

                    <div>
                        <table class="table">
                            <tr>
                            <th scope="row">Total Calls</th>
                            <td>{{ $totalCall }}</td>
                            </tr>
                            <tr>
                                <th scope="row">Total SMS Sent</th>
                                <td>{{ $totalSMSSent }}</td>
                            </tr>
                            <tr>
                                <th scope="row">Average Call Duration with AI</th>
                                <td>{{ $callAverageSecondsFormatted }}</td>
                            </tr>
                            <tr>
                                <th scope="row">Average Time Pharmacist Spent Speaking with Patient</th>
                                <td>{{ $pharmacistDurationAverageFormatted }}</td>
                            </tr>
                            <tr>
                                <th scope="row">Number of voice calls</th>
                                <td>{{ $voiceMailCount }}</td>
                            </tr>
                            <tr>
                                <th scope="row">Call Open Length Average</th>
                                <td>{{ $callOpenDurationAverageFormatted }}</td>
                            </tr>
                            <tr>
                                <th scope="row">Total Call time</th>
                                <td>{{ $totalCallTime }}</td>
                            </tr>
                            @if ($dateCommence)
                                <tr>
                                    <th scope="row">Date Commenced</th>
                                    <td>{{ $dateCommence }}</td>
                                </tr>
                            @endif
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row p-2">
        <div class="col-lg-12 mb-4 border rounded p-3">
            <h2>Call Chart</h2> 
            <div style="display:flex; gap:16px; margin-bottom:12px; font-size:12px; color:var(--bs-secondary-color);">
                <span style="display:flex; align-items:center; gap:6px;">
                    <span style="width:12px; height:3px; background:#378ADD; border-radius:2px; display:inline-block;"></span>
                    Total Call
                </span>
            </div>
            <div style="height: 300px;">
                <canvas id="callsChart"></canvas>
            </div>

            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

            <script>
                const ctx = document.getElementById('callsChart');

                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: @json($callsPerDayLabels),
                        datasets: [{
                            label: 'Calls per Day',
                            data: @json($callsPerDayData),
                            borderWidth: 2,
                            fill: false,
                            tension: 0.3
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false, // 👈 IMPORTANT
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    precision: 0
                                }
                            }
                        }
                    }
                });
            </script>
        </div>
    </div>

    <div class="row p-2">
        <div class="col-lg-12 mb-4 border rounded p-3">
            <h2 class="text-center">Average Call Duration with AI</h2>
            <div class="d-flex justify-content-center gap-5">
                <div class="text-center">
                    <div class="fw-bold">Average Call Duration with AI</div>
                    <div id="stat-avg">—</div>
                </div>
                <div class="text-center">
                    <div class="fw-bold">Longest Average Call Duration with AI</div>
                    <div id="stat-peak">—</div>
                </div>
                <div class="text-center">
                    <div class="fw-bold">Shortest Average Call Duration with AI</div>
                    <div id="stat-low">—</div>
                </div>
            </div>

            <div style="display:flex; gap:16px; margin-bottom:12px; font-size:12px; color:var(--bs-secondary-color);">
                <span style="display:flex; align-items:center; gap:6px;">
                    <span style="width:12px; height:3px; background:#378ADD; border-radius:2px; display:inline-block;"></span>
                    Avg duration (mm:ss)
                </span>
                <span style="display:flex; align-items:center; gap:6px;">
                    <span style="width:12px; height:0; border-top:2px dashed #D85A30; display:inline-block;"></span>
                    Period mean
                </span>
            </div>

            <div style="position:relative; width:100%; height:300px;">
                <canvas id="callDurationChart" role="img" aria-label="Line chart of average call duration per day">Average call duration per day.</canvas>
            </div>
        </div>
    </div>

    <script>
    function fmtMmSs(sec) {
        if (!sec) return '0:00';
        const m = Math.floor(sec / 60);
        const s = Math.round(sec % 60);
        return m + ':' + (s < 10 ? '0' : '') + s;
    }

    (function () {
        const raw = @json($callDurationAveragePerDay);

        const labels  = Object.keys(raw);
        const values  = Object.values(raw).map(Number);
        const nonZero = values.filter(v => v > 0);
        const mean    = nonZero.length
            ? Math.round(nonZero.reduce((a, b) => a + b, 0) / nonZero.length)
            : 0;
        const peak = Math.max(...values);
        const low  = Math.min(...nonZero.length ? nonZero : [0]);

        document.getElementById('stat-avg').textContent  = fmtMmSs(mean);
        document.getElementById('stat-peak').textContent = fmtMmSs(peak);
        document.getElementById('stat-low').textContent  = fmtMmSs(low);

        new Chart(document.getElementById('callDurationChart'), {
            type: 'line',
            data: {
                labels,
                datasets: [
                    {
                        label: 'Avg duration',
                        data: values,
                        borderColor: '#378ADD',
                        backgroundColor: 'rgba(55,138,221,0.08)',
                        borderWidth: 2,
                        pointBackgroundColor: '#378ADD',
                        pointRadius: 5,
                        pointHoverRadius: 7,
                        fill: true,
                        tension: 0.35,
                        spanGaps: false,
                    },
                    {
                        label: 'Period mean',
                        data: values.map(() => mean),
                        borderColor: '#D85A30',
                        borderWidth: 1.5,
                        borderDash: [6, 4],
                        pointRadius: 0,
                        fill: false,
                        tension: 0,
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: { mode: 'index', intersect: false },
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: ctx => ctx.datasetIndex === 1
                                ? '  Mean: ' + fmtMmSs(ctx.raw)
                                : '  Duration: ' + fmtMmSs(ctx.raw)
                        }
                    }
                },
                scales: {
                    x: {
                        grid: { color: 'rgba(128,128,128,0.1)' },
                        ticks: { font: { size: 11 }, autoSkip: false, maxRotation: 40, autoSkip: true }
                    },
                    y: {
                        min: 0,
                        grid: { color: 'rgba(128,128,128,0.1)' },
                        ticks: {
                            font: { size: 11 },
                            callback: v => fmtMmSs(v),

                        },
                        title: {
                            display: true,
                            text: 'Duration (mm:ss)',
                            font: { size: 11 }
                        }
                    }
                }
            }
        });
    })();
    </script>

    <div class="row p-2">
        <div class="col-lg-12 mb-4 border rounded p-3">
            <h2 class="text-center">Average Time Pharmacist Spent Speaking with Patient</h2>
            {{-- <div class="d-flex justify-content-center gap-5">
                <div class="text-center">
                    <div class="fw-bold">Average Duratioin  in a day</div>
                    <div id="average-open-call-length-stat-avg">—</div>
                </div>
                <div class="text-center">
                    <div class="fw-bold">Longest Duration in a day</div>
                    <div id="average-open-call-length-stat-peak">—</div>
                </div>
                <div class="text-center">
                    <div class="fw-bold">Shortest Duration in a day</div>
                    <div id="average-open-call-length-stat-low">—</div>
                </div>
            </div> --}}

            <div style="display:flex; gap:16px; margin-bottom:12px; font-size:12px; color:var(--bs-secondary-color);">
                <span style="display:flex; align-items:center; gap:6px;">
                    <span style="width:12px; height:3px; background:#378ADD; border-radius:2px; display:inline-block;"></span>
                    Avg duration (mm:ss)
                </span>
                <span style="display:flex; align-items:center; gap:6px;">
                    <span style="width:12px; height:0; border-top:2px dashed #D85A30; display:inline-block;"></span>
                    Period mean
                </span>
            </div>

            <div style="position:relative; width:100%; height:300px;">
                <canvas id="pharmacistDurationChart" role="img" aria-label="Line chart of average call duration that directed to Pharmacist per day">Average call duration that directed to Pharmacist per day</canvas>
            </div>
        </div>
    </div>

    <script>
    (function () {
        const raw = @json($pharmacistDurationAveragePerDay);

        const labels  = Object.keys(raw);
        const values  = Object.values(raw).map(Number);
        const nonZero = values.filter(v => v > 0);
        const mean    = nonZero.length
            ? Math.round(nonZero.reduce((a, b) => a + b, 0) / nonZero.length)
            : 0;
        const peak = Math.max(...values);
        const low  = Math.min(...nonZero.length ? nonZero : [0]);

        //document.getElementById('average-open-call-length-stat-avg').textContent  = fmtMmSs(mean);
        //document.getElementById('average-open-call-length-stat-peak').textContent = fmtMmSs(peak);
        //document.getElementById('average-open-call-length-stat-low').textContent  = fmtMmSs(low);

        new Chart(document.getElementById('pharmacistDurationChart'), {
            type: 'line',
            data: {
                labels,
                datasets: [
                    {
                        label: 'Avg duration',
                        data: values,
                        borderColor: '#378ADD',
                        backgroundColor: 'rgba(55,138,221,0.08)',
                        borderWidth: 2,
                        pointBackgroundColor: '#378ADD',
                        pointRadius: 5,
                        pointHoverRadius: 7,
                        fill: true,
                        tension: 0.35,
                        spanGaps: false,
                    },
                    {
                        label: 'Period mean',
                        data: values.map(() => mean),
                        borderColor: '#D85A30',
                        borderWidth: 1.5,
                        borderDash: [6, 4],
                        pointRadius: 0,
                        fill: false,
                        tension: 0,
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: { mode: 'index', intersect: false },
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: ctx => ctx.datasetIndex === 1
                                ? '  Mean: ' + fmtMmSs(ctx.raw)
                                : '  Duration: ' + fmtMmSs(ctx.raw)
                        }
                    }
                },
                scales: {
                    x: {
                        grid: { color: 'rgba(128,128,128,0.1)' },
                        ticks: { font: { size: 11 }, autoSkip: false, maxRotation: 40, autoSkip: true }
                    },
                    y: {
                        min: 0,
                        grid: { color: 'rgba(128,128,128,0.1)' },
                        ticks: {
                            font: { size: 11 },
                            callback: v => fmtMmSs(v)
                        },
                        title: {
                            display: true,
                            text: 'Duration (mm:ss)',
                            font: { size: 11 }
                        }
                    }
                }
            }
        });
    })();
    </script>



    <div class="row p-2">
        <div class="col-lg-12 mb-4 border rounded p-3">
            <h2 class="text-center">Open Call Length Average</h2>
            <div class="d-flex justify-content-center gap-5">
                <div class="text-center">
                    <div class="fw-bold">Average Open Call Length in a day</div>
                    <div id="average-open-call-length-stat-avg">—</div>
                </div>
                <div class="text-center">
                    <div class="fw-bold">Longest Open Call Length in a day</div>
                    <div id="average-open-call-length-stat-peak">—</div>
                </div>
                <div class="text-center">
                    <div class="fw-bold">Shortest Open Call Length in a day</div>
                    <div id="average-open-call-length-stat-low">—</div>
                </div>
            </div>

            <div style="display:flex; gap:16px; margin-bottom:12px; font-size:12px; color:var(--bs-secondary-color);">
                <span style="display:flex; align-items:center; gap:6px;">
                    <span style="width:12px; height:3px; background:#378ADD; border-radius:2px; display:inline-block;"></span>
                    Avg duration (mm:ss)
                </span>
                <span style="display:flex; align-items:center; gap:6px;">
                    <span style="width:12px; height:0; border-top:2px dashed #D85A30; display:inline-block;"></span>
                    Period mean
                </span>
            </div>

            <div style="position:relative; width:100%; height:300px;">
                <canvas id="openCallLengthChart" role="img" aria-label="Line chart of average open call length per day">Average open call length per day.</canvas>
            </div>
        </div>
    </div>

    <script>
    (function () {
        const raw = @json($callOpenDurationAveragePerDay);

        const labels  = Object.keys(raw);
        const values  = Object.values(raw).map(Number);
        const nonZero = values.filter(v => v > 0);
        const mean    = nonZero.length
            ? Math.round(nonZero.reduce((a, b) => a + b, 0) / nonZero.length)
            : 0;
        const peak = Math.max(...values);
        const low  = Math.min(...nonZero.length ? nonZero : [0]);

        document.getElementById('average-open-call-length-stat-avg').textContent  = fmtMmSs(mean);
        document.getElementById('average-open-call-length-stat-peak').textContent = fmtMmSs(peak);
        document.getElementById('average-open-call-length-stat-low').textContent  = fmtMmSs(low);

        new Chart(document.getElementById('openCallLengthChart'), {
            type: 'line',
            data: {
                labels,
                datasets: [
                    {
                        label: 'Avg duration',
                        data: values,
                        borderColor: '#378ADD',
                        backgroundColor: 'rgba(55,138,221,0.08)',
                        borderWidth: 2,
                        pointBackgroundColor: '#378ADD',
                        pointRadius: 5,
                        pointHoverRadius: 7,
                        fill: true,
                        tension: 0.35,
                        spanGaps: false,
                    },
                    {
                        label: 'Period mean',
                        data: values.map(() => mean),
                        borderColor: '#D85A30',
                        borderWidth: 1.5,
                        borderDash: [6, 4],
                        pointRadius: 0,
                        fill: false,
                        tension: 0,
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: { mode: 'index', intersect: false },
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: ctx => ctx.datasetIndex === 1
                                ? '  Mean: ' + fmtMmSs(ctx.raw)
                                : '  Duration: ' + fmtMmSs(ctx.raw)
                        }
                    }
                },
                scales: {
                    x: {
                        grid: { color: 'rgba(128,128,128,0.1)' },
                        ticks: { font: { size: 11 }, autoSkip: false, maxRotation: 40, autoSkip: true }
                    },
                    y: {
                        min: 0,
                        grid: { color: 'rgba(128,128,128,0.1)' },
                        ticks: {
                            font: { size: 11 },
                            callback: v => fmtMmSs(v)
                        },
                        title: {
                            display: true,
                            text: 'Duration (mm:ss)',
                            font: { size: 11 }
                        }
                    }
                }
            }
        });
    })();
    </script>


    <div class="row p-2">
        <div class="col-lg-12 mb-4 border rounded p-3">
            <h2 class="text-center">Send SMS</h2>
            <div class="d-flex justify-content-center gap-5">
                <div class="text-center">
                    <div class="fw-bold">Average SMS Length in a day</div>
                    <div id="average-send-sms-stat-avg">—</div>
                </div>
                <div class="text-center">
                    <div class="fw-bold">Most SMS sent in a day</div>
                    <div id="average-send-sms-stat-peak">—</div>
                </div>
                <div class="text-center">
                    <div class="fw-bold">Least SMS Length in a day</div>
                    <div id="average-send-sms-stat-low">—</div>
                </div>
            </div>

            <div style="display:flex; gap:16px; margin-bottom:12px; font-size:12px; color:var(--bs-secondary-color);">
                <span style="display:flex; align-items:center; gap:6px;">
                    <span style="width:12px; height:3px; background:#378ADD; border-radius:2px; display:inline-block;"></span>
                    Number Of SMS Sent
                </span>
                <span style="display:flex; align-items:center; gap:6px;">
                    <span style="width:12px; height:0; border-top:2px dashed #D85A30; display:inline-block;"></span>
                    Period mean
                </span>
            </div>

            <div style="position:relative; width:100%; height:300px;">
                <canvas id="smsSentChart" role="img" aria-label="Line chart of average open call length per day">Average open call length per day.</canvas>
            </div>
        </div>
    </div>

    <script>
    (function () {
        const raw = @json($smsSentPerDay);

        const labels  = Object.keys(raw);
        const values  = Object.values(raw).map(Number);
        const nonZero = values.filter(v => v > 0);
        const mean    = nonZero.length
            ? Math.round(nonZero.reduce((a, b) => a + b, 0) / nonZero.length)
            : 0;
        const peak = Math.max(...values);
        const low  = Math.min(...nonZero.length ? nonZero : [0]);

        document.getElementById('average-send-sms-stat-avg').textContent  = mean;
        document.getElementById('average-send-sms-stat-peak').textContent = peak;
        document.getElementById('average-send-sms-stat-low').textContent  = low;

        new Chart(document.getElementById('smsSentChart'), {
            type: 'line',
            data: {
                labels,
                datasets: [
                    {
                        label: 'Number of SMS Sent',
                        data: values,
                        borderColor: '#378ADD',
                        backgroundColor: 'rgba(55,138,221,0.08)',
                        borderWidth: 2,
                        pointBackgroundColor: '#378ADD',
                        pointRadius: 5,
                        pointHoverRadius: 7,
                        fill: true,
                        tension: 0.35,
                        spanGaps: false,
                    },
                    {
                        label: 'Period mean',
                        data: values.map(() => mean),
                        borderColor: '#D85A30',
                        borderWidth: 1.5,
                        borderDash: [6, 4],
                        pointRadius: 0,
                        fill: false,
                        tension: 0,
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: { mode: 'index', intersect: false },
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: ctx => ctx.datasetIndex === 1
                                ? '  Mean: ' + ctx.raw
                                : '  Count: ' + ctx.raw
                        }
                    }
                },
                scales: {
                    x: {
                        grid: { color: 'rgba(128,128,128,0.1)' },
                        ticks: { font: { size: 11 }, autoSkip: false, maxRotation: 40, autoSkip: true }
                    },
                    y: {
                        min: 0,
                        grid: { color: 'rgba(128,128,128,0.1)' },
                        ticks: {
                            font: { size: 11 },
                            callback: v => v
                        },
                        title: {
                            display: true,
                            text: 'Count',
                            font: { size: 11 }
                        }
                    }
                }
            }
        });
    })();
    </script>


    <div class="row">
        <div class="col-lg-12 mb-4  border rounded p-3">
            <h2 class="text-center">Call Urgency Chart</h2>
            <div class="d-flex justify-content-center gap-5">
                <div style="height: 300px;">
                    <canvas id="urgencyPieChart"></canvas>
                </div>


                <div>
                    <table class="table">
                        <tr>
                            <th>Urgency Level</th>
                            <th>Count</th>
                        </tr>
                        @foreach ($urgencyLabels as $index => $label)
                        <tr>
                            <th scope="row">{{ $label }}</th>
                            <td>{{ $urgencyData[$index] }}</td>
                        </tr>
                        @endforeach
                    </table>
                </div>
            </div>
            <script>
                const ctxUrgencyPieChart = document.getElementById('urgencyPieChart').getContext('2d');

                new Chart(ctxUrgencyPieChart, {
                    type: 'pie',
                    data: {
                        labels: @json($urgencyLabels),
                        datasets: [{
                            data: @json($urgencyData),
                            backgroundColor: [
                                '#239260',
                                '#315ad6',
                                '#ff9900',
                                '#fbff00',
                                '#ff0000',
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'bottom'
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                        const value = context.raw;
                                        const percent = total ? ((value / total) * 100).toFixed(1) : 0;
                                        return `${context.label}: ${value} (${percent}%)`;
                                    }
                                }
                            }
                        }
                    }
                });
            </script>
        </div>
    </div>



    
@endsection


@push('after_scripts')
{{-- For dropdown --}}
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {

    const startInput = document.getElementById('start_date');
    const endInput = document.getElementById('end_date');

    function formatNZDate(date) {
        const [year, month, day] = date.split('-');
        return `${day}/${month}/${year}`;
    }


    const fp = flatpickr("#date_range", {
        mode: "range",
        dateFormat: "d/m/Y",
        defaultDate: [
            formatNZDate( document.getElementById('start_date').value ),
            formatNZDate( document.getElementById('end_date').value )
        ],
        onChange: function (selectedDates, dateStr, instance) {
            if (selectedDates.length === 2) {
                startInput.value = instance.formatDate(selectedDates[0], "Y-m-d");
                endInput.value = instance.formatDate(selectedDates[1], "Y-m-d");
            }
        }
    });

    // Helpers
    function formatDate(date) {
        return date.toISOString().split('T')[0];
    }

    function today() {
        return new Date();
    }

    function daysAgo(days) {
        const d = new Date();
        d.setDate(d.getDate() - days);

        console.log(d.getDate());        
        return d;
    }

    function startOfMonth() {
        const d = new Date();
        return new Date(d.getFullYear(), d.getMonth(), 1);
    }

    // Preset buttons
    function todayNZT() {
        const now = new Date();

        const nzDate = new Intl.DateTimeFormat('en-NZ', {
            timeZone: 'Pacific/Auckland',
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
        }).formatToParts(now);

        const parts = Object.fromEntries(
            nzDate.map(({ type, value }) => [type, value])
        );

        return new Date(`${parts.year}-${parts.month}-${parts.day}T00:00:00`);
    }



    const form = document.getElementById("selectDateRangeForm");
    document.querySelectorAll('.preset-btn').forEach(btn => {
        btn.addEventListener('click', function () {

            let start, end = today();

            console.log(end.getDate());

            const range = this.dataset.range;

            if (range === '0') start = daysAgo(0);
            if (range === '7') start = daysAgo(7);
            if (range === '14') start = daysAgo(14);
            if (range === '30') start = daysAgo(30);
            if (range === 'month') start = startOfMonth();

            fp.setDate([start, end], true);

            startInput.value = formatDate(start);
            endInput.value = formatDate(end);
            form.submit();

        });
    });

    function formatDate(date) {
        // return date.toISOString().split('T')[0];
        const nzDate = new Date(
            date.toLocaleString('en-US', {
                timeZone: 'Pacific/Auckland'
            })
        );

        return [
            nzDate.getFullYear(),
            String(nzDate.getMonth() + 1).padStart(2, '0'),
            String(nzDate.getDate()).padStart(2, '0')
        ].join('-');
    }

});
</script>

<style>
.date-presets {
    margin-bottom: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.preset-btn {
    font-size: 12px;
    padding: 4px 10px;
    border: 1px solid #ddd;
    background: #f8f9fa;
    border-radius: 4px;
    cursor: pointer;
}

.preset-btn:hover {
    background: #e9ecef;
}
</style>
@endpush