@section('title', 'Create New Users Membership')
<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">
                {{ __('Create New Users Membership Details') }}
            </h2>
            <a href="{{ url('user-membership') }}"
                class="text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-sm px-3 py-1.5 text-center me-2 mt-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">Back</a>
        </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" action="{{ url('user-membership') }}" class="max-w-screen-md mx-auto">
                            @csrf
                            <div class="flex flex-col space-y-4">
                                <!-- User Name Field -->
                                <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="user_id" value="{{ __('User Name') }}" />
                                        <sup class="text-red-500 ml-1">*</sup>
                                    </div>
                                    <div class="md:w-2/3">
                                        <select id="user_id" name="user_id"
                                            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 a User</option>
                                            @foreach ($users as $user)
                                                <option value="{{ $user->id }}"
                                                    {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                                    {{ $user->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <!-- Status Field -->
                                <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="status" value="{{ __('Status') }}" />
                                        <sup class="text-red-500 ml-1">*</sup>
                                    </div>
                                    <div class="md:w-2/3">
                                        <select id="status" name="status"
                                            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 a Status</option>
                                            <option value="Active" {{ old('status') == 'Active' ? 'selected' : '' }}>
                                                Active</option>
                                            <option value="Pending For Approval"
                                                {{ old('status') == 'Pending For Approval' ? 'selected' : '' }}>Pending
                                                For Approval
                                            </option>
                                            <option value="Expired" {{ old('status') == 'Expired' ? 'selected' : '' }}>
                                                Expired</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Package Field -->
                                <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="package" value="{{ __('Package') }}" />
                                        <sup class="text-red-500 ml-1">*</sup>
                                    </div>
                                    <div class="md:w-2/3">
                                        <select id="package" name="package"
                                            class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
                                            onchange="updatePackageDetails()" required>
                                            <option value="" disabled selected>Select a package</option>
                                            @foreach ($memberships as $membership)
                                                <option value="{{ $membership->id }}"
                                                    data-amount="{{ $membership->amount }}"
                                                    data-duration="{{ $membership->duration }}">
                                                    {{ $membership->package_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <!-- Amount Field -->
                                <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="amount" value="{{ __('Amount') }}" />
                                        <sup class="text-red-500 ml-1">*</sup>
                                    </div>
                                    <div class="md:w-2/3">
                                        <x-input id="amount" class="block w-full" type="number" name="amount"
                                            :value="old('amount')" autocomplete="amount" readonly />
                                    </div>
                                </div>

                                <!-- Duration Field -->
                                <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="duration" value="{{ __('Duration (in days)') }}" />
                                        <sup class="text-red-500 ml-1">*</sup>
                                    </div>
                                    <div class="md:w-2/3">
                                        <x-input id="duration" class="block w-full" type="number" name="duration"
                                            :value="old('duration')" autocomplete="duration" readonly />
                                    </div>
                                </div>

                                <!-- Registration Date Field -->
                                <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="registration_date" value="{{ __('Registration Date') }}" />
                                        <sup class="text-red-500 ml-1">*</sup>
                                    </div>
                                    <div class="md:w-2/3">
                                        <x-input id="registration_date" name="registration_date" type="date"
                                            value="{{ old('registration_date', now()->format('Y-m-d')) }}"
                                            class="block w-full" required onchange="updateRenewalDate()" />
                                    </div>
                                </div>

                                <!-- Renewal Date Field -->
                                <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="renewal_date" value="{{ __('Renewal Date') }}" />
                                        <sup class="text-red-500 ml-1">*</sup>
                                    </div>
                                    <div class="md:w-2/3">
                                        <x-input id="renewal_date" name="renewal_date" type="date"
                                            class="block w-full" required />
                                    </div>
                                </div>


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

    @push('scripts')
        <script>
            function updatePackageDetails() {
                const packageSelect = document.getElementById('package');
                const selectedOption = packageSelect.options[packageSelect.selectedIndex];
                if (!selectedOption) return;
                const amount = selectedOption.getAttribute('data-amount');
                const duration = selectedOption.getAttribute('data-duration');

                document.getElementById('amount').value = amount;
                document.getElementById('duration').value = duration;

                updateRenewalDate();
            }

            function updateRenewalDate() {

                const registrationDateInput = document.getElementById('registration_date');
                if (!registrationDateInput.value) return;

                const registrationDate = new Date(registrationDateInput.value);
                const duration = parseInt(document.getElementById('duration').value, 10) || 0;
                const renewalDate = new Date(registrationDate);

                renewalDate.setDate(renewalDate.getDate() + duration);

                // Set the renewal date in the input field
                document.getElementById('renewal_date').value = renewalDate.toISOString().split('T')[0];
            }

            document.addEventListener('DOMContentLoaded', function() {
                if (document.getElementById('package')) {
                    document.getElementById('package').addEventListener('change', updatePackageDetails);
                }
                if (document.getElementById('registration_date')) {
                    document.getElementById('registration_date').addEventListener('change', updateRenewalDate);
                }
                updatePackageDetails();
            });
        </script>
    @endpush
</x-app-layout>