@section('title', 'Edit Users Membership')
<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <h2 class="text-xl font-semibold leading-tight text-gray-800">
                {{ __('Edit 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="overflow-hidden bg-white sm:rounded-lg">
                <x-validation-errors class="mb-4" />
                <div class="flex items-center justify-center">
                    <div class="w-full max-w-2xl p-4 rounded-lg">
                        <form method="POST" action="{{ url('user-membership/' . $record->id) }}"
                            class="max-w-screen-md mx-auto">
                            @csrf
                            @method('PUT')
                            <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="flex items-center md:w-1/3">
                                        <x-label for="user_id" value="{{ __('User Name') }}" />
                                        <sup class="ml-1 text-red-500">*</sup>
                                    </div>
                                    <div class="md:w-2/3">
                                        <x-input id="user_name" class="block w-full" type="text"
                                            value="{{ $record->user->name ?? 'N/A' }}" disabled />
                                        <input type="hidden" name="user_id"
                                            value="{{ old('user_id', $record->user_id) }}">
                                    </div>
                                </div>

                                <!-- Status Field -->
                                <div class="flex flex-col md:flex-row md:items-center md:space-x-4">
                                    <div class="flex items-center md:w-1/3">
                                        <x-label for="status" value="{{ __('Status') }}" />
                                        <sup class="ml-1 text-red-500">*</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>
                                            @foreach ($statusOptions as $key => $status)
                                                <option value="{{ $key }}"
                                                    {{ old('status', $record->status) == $key ? 'selected' : '' }}>
                                                    {{ $status }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <!-- Package Field -->
                                <div class="flex flex-col md:flex-row md:items-center md:space-x-4">
                                    <div class="flex items-center md:w-1/3">
                                        <x-label for="package" value="{{ __('Package') }}" />
                                        <sup class="ml-1 text-red-500">*</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 }}"
                                                    {{ old('package', $record->package) == $membership->id ? 'selected' : '' }}>
                                                    {{ $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="flex items-center md:w-1/3">
                                        <x-label for="amount" value="{{ __('Amount') }}" />
                                        <sup class="ml-1 text-red-500">*</sup>
                                    </div>
                                    <div class="md:w-2/3">
                                        <x-input id="amount" class="block w-full" type="number" name="amount"
                                            :value="old('amount', $record->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', $record->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="flex items-center md:w-1/3">
                                        <x-label for="registration_date" value="{{ __('Registration Date') }}" />
                                        <sup class="ml-1 text-red-500">*</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="flex items-center md:w-1/3">
                                        <x-label for="renewal_date" value="{{ __('Renewal Date') }}" />
                                        <sup class="ml-1 text-red-500">*</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>{{ __('Update') }}</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];
                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 registrationDate = new Date(document.getElementById('registration_date').value);
                const duration = document.getElementById('duration').value;
                const renewalDate = new Date(registrationDate);

                if (duration === '30') {
                    renewalDate.setMonth(renewalDate.getMonth() + 1);
                } else if (duration === '90') {
                    renewalDate.setMonth(renewalDate.getMonth() + 3);
                } else if (duration === '180') {
                    renewalDate.setMonth(renewalDate.getMonth() + 6);
                } else if (duration === '360') {
                    renewalDate.setFullYear(renewalDate.getFullYear() + 1);
                }

                // 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').value) {
                    updatePackageDetails();
                }
                updateRenewalDate();
            });
        </script>
    @endpush
</x-app-layout>