@section('title', 'Create Success Stories Record')
<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 Success Stories') }}
            </h2>
            <a href="{{ url('success-stories') }}"
                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-7xl mx-auto sm:px-6 lg:px-8">
            <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('success-stories') }}" class="max-w-screen-md mx-auto"
                            enctype="multipart/form-data">
                            @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="user_id" value="{{ __('Select Users') }}" />
                                        <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>

                                <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="partner_id" value="{{ __('Select Partner') }}" />
                                        <sup class="text-red-500 ml-1">*</sup>
                                    </div>
                                    <div class="md:w-2/3">
                                        <select id="partner_id" name="partner_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 Partner</option>
                                            @foreach ($users as $user)
                                                <option value="{{ $user->id }}"
                                                    {{ old('partner_id') == $user->id ? 'selected' : '' }}>
                                                    {{ $user->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <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="description" value="{{ __('Description') }}" />
                                        <sup class="text-red-500 ml-1">*</sup>
                                    </div>
                                    <div class="md:w-2/3">
                                        <x-textarea id="description" name="description" class="block w-full mt-1"
                                            required placeholder="Enter Description Here">
                                            {{ old('description') }}
                                        </x-textarea>
                                    </div>
                                </div>

                                <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="photos" value="{{ __('Upload Picture') }}" />
                                        <sup class="text-red-500 ml-1">*</sup>

                                    </div>
                                    <div class="md:w-2/3">
                                        <x-input id="photos" type="file" name="photos" required
                                            accept="image/jpeg, image/png" class="block w-full mt-1" />
                                        <p class="text-sm text-red-600 mt-2">Image must be JPG/PNG and max 10MB.</p>
                                        <p id="errorMessage" class="text-red-500 hidden"></p>
                                    </div>
                                </div>

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

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const userDropdown = document.getElementById('user_id');
                const partnerDropdown = document.getElementById('partner_id');
                const originalPartnerOptions = Array.from(partnerDropdown.options);

                userDropdown.addEventListener('change', function() {
                    const selectedUserId = this.value;

                    // Clear and reset partner dropdown
                    partnerDropdown.innerHTML = '';
                    const defaultOption = document.createElement('option');
                    defaultOption.disabled = true;
                    defaultOption.selected = true;
                    partnerDropdown.appendChild(defaultOption);

                    originalPartnerOptions.forEach(option => {
                        if (option.value !== selectedUserId) {
                            partnerDropdown.appendChild(option.cloneNode(true));
                        }
                    });
                });
            });

            // Images
            document.addEventListener("DOMContentLoaded", function() {
                const fileInput = document.getElementById("photos");
                const submitButton = document.getElementById("submitButton");
                const errorMessage = document.getElementById("errorMessage");

                const maxFileSize = 10 * 1024 * 1024; // 10 MB
                const allowedExtensions = ["jpg", "jpeg", "png"];

                fileInput.addEventListener("change", function() {
                    errorMessage.textContent = "";
                    errorMessage.classList.add("hidden");
                    submitButton.removeAttribute("disabled");

                    const file = fileInput.files[0];

                    if (!file) {
                        return;
                    }

                    const fileExtension = file.name.split(".").pop().toLowerCase();

                    if (!allowedExtensions.includes(fileExtension)) {
                        errorMessage.textContent = "Invalid file type. Only JPG and PNG are allowed.";
                        errorMessage.classList.remove("hidden");
                        submitButton.setAttribute("disabled", "disabled");
                        return;
                    }

                    if (file.size > maxFileSize) {
                        errorMessage.textContent = "File too large. Maximum size is 10MB.";
                        errorMessage.classList.remove("hidden");
                        submitButton.setAttribute("disabled", "disabled");
                    }
                });

                document.querySelector("form").addEventListener("submit", function(event) {
                    if (submitButton.hasAttribute("disabled")) {
                        event.preventDefault();
                        errorMessage.textContent = "Please fix the errors before submitting.";
                        errorMessage.classList.remove("hidden");
                    }
                });
            });
        </script>
    @endpush
</x-app-layout>