@section('title', 'Download Reports')
<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Export CSV Records') }}
            </h2>
        </div>
    </x-slot>

    <div class="py-2">
        <div class="max-w-full mx-auto sm:px-6 lg:px-4">
            @include('_message')
            <div class="bg-white overflow-hidden sm:rounded-lg">
                <x-validation-errors class="mb-4" />
                <div class="flex items-center justify-center">
                    <div class="w-full max-w-2xl rounded-lg p-4">
                        <form method="POST" id="reportForm" action="{{ url('reports/type-placeholder/download') }}"
                            class="max-w-screen-md mx-auto">
                            @csrf

                            <div class="flex flex-col space-y-4">
                                <div class="flex flex-col md:flex-row md:items-center md:space-x-4">
                                    <div class="md:w-1/3 flex items-center">
                                        <x-label for="report_type" value="{{ __('Select Report Type') }}" />
                                        <sup class="text-red-500 ml-1">*</sup>
                                    </div>
                                    <div class="md:w-2/3">
                                        <select id="report_type" name="report_type"
                                            class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
                                            required>
                                            <option value="" disabled selected>Select Report Type</option>
                                            <option value="paid-users">Paid Users (LIVE-Data)</option>
                                            <option value="unpaid-users">Unpaid Users (LIVE-Data)</option>
                                            <option value="complete-users">Complete User Data (All)</option>
                                            <option value="transactions">Payment & Transactions</option>
                                            <option value="renewals-30-days">Renewals in 30 Days</option>
                                            <option value="renewals-7-days">Renewals in 7 Days</option>
                                            <option value="renewals-expired">Renewals (Expired)</option>
                                            <option value="incomplete-profiles">Incomplete Profiles</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="flex items-center justify-center mt-4">
                                    <x-button>
                                        {{ __('Download CSV') }}
                                    </x-button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const reportTypeSelect = document.getElementById('report_type');
            const form = document.getElementById('reportForm');
            reportTypeSelect.addEventListener('change', function() {
                const selectedType = this.value;
                // Always replace 'type-placeholder' with the selected type
                form.action = form.action.replace(/\/[^\/]+\/download$/, `/${selectedType}/download`);
            });


            form.addEventListener('submit', function(event) {
                const selectedType = reportTypeSelect.value;
                // Replace 'type-placeholder' in the form action with the selected type
                form.action = form.action.replace(/\/[^\/]+\/download$/, `/${selectedType}/download`);
            });
        });
    </script>


    @endpush
</x-app-layout>