@if(session('success'))
<div class="p-4 mb-6 text-white bg-green-500 rounded">
    {{ session('success') }}
</div>
@endif
<div class="p-4 shadow-xl bg-white border-t-4 rounded-t-lg border-t-[#FBAF43]">
    <form action="{{ route('save.form') }}" method="POST" onsubmit="return validateCode()">
        @csrf
        <div>
            <h1 class="font-bold text-[#115D8D] text-center text-2xl py-2">Let's Discuss Your Needs Today</h1>
            <div class="flex flex-col gap-4">
                <div>
                    <input required type="text" name="full_name" id="full_name" class="w-full p-2 focus:placeholder-[#115D8D] rounded-xl focus:border-[#115D8D] border" placeholder="Full Name">
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <input required type="text" id="phone_number" name="phone_number" class="w-full p-2 focus:placeholder-[#115D8D] rounded-xl focus:border-[#115D8D] border" placeholder="Phone Number">
                    </div>
                    <div>
                        <input required type="email" id="email" name="email" class="w-full p-2 focus:placeholder-[#115D8D] rounded-xl focus:border-[#115D8D] border" placeholder="Email">
                    </div>
                    <div>
                        <input required type="text" id="job_title" name="job_title" class="w-full p-2 focus:placeholder-[#115D8D] rounded-xl focus:border-[#115D8D] border" placeholder="Job Title">
                    </div>
                    <div>
                        <input required type="text" id="company_name" name="company_name" class="w-full p-2 focus:placeholder-[#115D8D] rounded-xl focus:border-[#115D8D] border" placeholder="Company Name">
                    </div>
                </div>
                <div>
                    <input required type="text" id="company_address" name="company_address" class="w-full p-2 focus:placeholder-[#115D8D] rounded-xl focus:border-[#115D8D] border" placeholder="Company Address">
                </div>
            </div>

            <h1 class="font-bold text-[#115D8D] text-xl py-4">Location</h1>
            <div class="flex flex-col gap-4">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <select required id="regions" name="region" class="w-full p-2 focus:placeholder-[#115D8D] rounded-xl focus:border-[#115D8D] border" onchange="loadCities(this)">
                            <option value="">Select Region</option>
                        </select>
                    </div>
                    <div>
                        <select required id="cities" name="city" class="w-full p-2 focus:placeholder-[#115D8D] rounded-xl focus:border-[#115D8D] border">
                            <option value="">Select City</option>
                        </select>
                    </div>
                    <div>
                        <input type="number" id="headcount" name="headcount" class="w-full p-2 focus:placeholder-[#115D8D] rounded-xl focus:border-[#115D8D] border" placeholder="Number of Headcount required">
                    </div>
                    <div>
                        <input required type="text" id="start_date" name="start_date" class="w-full p-2 focus:placeholder-[#115D8D] rounded-xl focus:border-[#115D8D] border" placeholder="Preferred Start Date" onfocus="(this.type='date')" onblur="(this.type='text')">
                    </div>
                </div>
                <div>
                    <select required type="text" name="services" id="services" class="w-full p-2 focus:placeholder-[#115D8D] rounded-xl focus:border-[#115D8D] border" placeholder="Type of service needed">
                        <option value="" disabled selected>Type of service needed</option>
                        @foreach ( $services as $service)
                        <option value="{{$service->services}}">{{$service->services}}</option>
                        @endforeach

                    </select>
                </div>
                <div>
                    <textarea required rows="4" name="message" id="message" class="w-full p-2 focus:text-[#115D8D] focus:placeholder-[#115D8D] rounded-xl focus:border-[#115D8D] border" placeholder="Write your message"></textarea>
                </div>
                <div>
                    <div class="flex flex-col items-center space-x-4 md:flex-row">
                        <input type="text" name="code" id="code2" placeholder="Enter the code" class="p-2 focus:text-[#115D8D] focus:placeholder-[#115D8D] rounded-xl focus:border-[#115D8D] border">
                        <p id="generatedCode2"></p>
                    </div>
                    <p id="error-message" class="text-red-500"></p>
                </div>
                <div>
                    <button type="submit" class="bg-[#FBAF43] w-full p-2 rounded-full text-white shadow-xl">Submit</button>
                </div>
            </div>
        </div>
    </form>

    <script>
        // Function to generate a random alphanumeric code
        function generateCode(length) {
            const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let result = '';
            for (let i = 0; i < length; i++) {
                result += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            return result;
        }

        // Display the generated code
        const generatedCode2 = generateCode(6);
        document.getElementById('generatedCode2').textContent = generatedCode2;

        // Function to validate code input
        function validateCode() {
            const inputCode = document.getElementById('code2').value;
            const errorMessage = document.getElementById('error-message');
            if (inputCode !== generatedCode2) {
                errorMessage.textContent = 'Code does not match. Please try again.';
                return false; // Prevent form submission
            }
            errorMessage.textContent = ''; // Clear error message if code matches
            return true;
        }
    </script>


</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const regionSelect = document.getElementById('regions');
        const citySelect = document.getElementById('cities');

        // Fetch and populate provinces
        fetch('https://psgc.gitlab.io/api/regions/')
            .then(response => response.json())
            .then(data => {

                data.forEach(region => {
                    const option = document.createElement('option');
                    option.value = region.name; // Use province name for display value
                    option.setAttribute('data-code', region.code); // Store province code in data attribute
                    option.textContent = region.name;
                    regionSelect.appendChild(option);
                });
            })
            .catch(error => console.error('Error fetching provinces:', error));

        // Fetch and populate cities based on selected province
        regionSelect.addEventListener('change', function() {
            const selectedRegionCode = regionSelect.options[regionSelect.selectedIndex].getAttribute('data-code');


            if (selectedRegionCode) {
                fetch(`https://psgc.gitlab.io/api/regions/${selectedRegionCode}/cities-municipalities/`)
                    .then(response => response.json())
                    .then(data => {
                        data.forEach(city => {
                            const option = document.createElement('option');
                            option.value = city.name; // Use city name for display value
                            option.setAttribute('data-code', city.code); // Store city code in data attribute
                            option.textContent = city.name;
                            citySelect.appendChild(option);
                        });
                    })
                    .catch(error => console.error('Error fetching cities:', error));
            }
        });
    });
</script>