{{-- resources/views/engage-city-consultants.blade.php --}}
@extends('layouts.master')

@section('content')
<div class="container mt-5">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <h1 class="mb-4">Engage as a City Consultant with Polisplexity</h1>
            <p class="lead">Join our network of esteemed city consultants and play a pivotal role in shaping resilient, smart, and inclusive cities.</p>

            {{-- Introduction Section --}}
            <section class="my-5">
                <h2>Why Engage with Polisplexity?</h2>
                <p>Polisplexity orchestrates the collaboration between technology creators, city consultants, and citizens, driving forward the future of urban living. Your expertise as a city consultant is invaluable in this collaborative effort.</p>
                <ul>
                    <li>Strategic Impact: Leverage your expertise to influence urban development projects on a global scale.</li>
                    <li>Collaborative Opportunities: Work alongside innovative tech makers and engaged citizens to co-create sustainable urban solutions.</li>
                    <li>Token-Based Recognition: Earn PLY tokens as a mark of trust and contribution, opening up new opportunities for influence and collaboration within the Polisplexity ecosystem.</li>
                </ul>
            </section>

            {{-- Engagement Form --}}
            <section class="my-5">
                <h2>Become a Part of Polisplexity</h2>
                <form id="Web3Form" action="{{ route('rfp.store') }}" method="POST" class="needs-validation" novalidate>
                    @csrf {{-- CSRF token for security --}}

                    @php
                        // Extract the last segment from the URL
                        $formLabelSegment = last(request()->segments());
                    @endphp
                    {{-- Hidden Field for Form Identifier/Label --}}
                    <input type="hidden" name="formLabel" value="{{ $formLabelSegment }}" id="formLabel">

                    {{-- Consultant Information --}}
                    <div class="form-group mb-3">
                        <label for="fullName" class="form-label">Full Name:</label>
                        <input type="text" name="fullName" id="fullName" class="form-control" required>
                        <div class="invalid-feedback">
                            Please enter your full name.
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="emailAddress" class="form-label">Email Address:</label>
                        <input type="email" name="emailAddress" id="emailAddress" class="form-control" required>
                        <div class="invalid-feedback">
                            Please enter a valid email address.
                        </div>
                    </div>

                    {{-- Expertise Area --}}
                    <div class="form-group mb-3">
                        <label for="expertiseArea" class="form-label">Area of Expertise:</label>
                        <select name="expertiseArea" id="expertiseArea" class="form-select" required>
                            <option value="">--Select Your Expertise Area--</option>
                            <option value="urban-planning">Urban Planning</option>
                            <option value="sustainable-development">Sustainable Development</option>
                            <option value="public-policy">Public Policy</option>
                            {{-- Additional expertise areas as necessary --}}
                        </select>
                        <div class="invalid-feedback">
                            Please select your area of expertise.
                        </div>
                    </div>

                    {{-- Service Offering Introduction --}}
                    <div class="form-group mb-4">
                        <label for="serviceIntroduction" class="form-label">Brief Introduction to Your Services:</label>
                        <textarea name="serviceIntroduction" id="serviceIntroduction" class="form-control" rows="4" required></textarea>
                        <small class="form-text text-muted">Provide a brief overview of the consultancy services you offer.</small>
                        <div class="invalid-feedback">
                            Please provide an introduction to your services.
                        </div>
                    </div>
                    {{-- Hidden Fields for Web3 Address and Signature --}}
                    <input type="hidden" name="web3Address" id="web3Address">
                    <input type="hidden" name="web3Signature" id="web3Signature">
                    
                    {{-- Web3 Sign Checkbox --}}
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" value="" id="web3SignCheck">
                        <label class="form-check-label" for="web3SignCheck">
                            Check to Sign with Web3
                        </label>
                        <small class="form-text text-muted">Checking this will prompt you to sign the form with your Web3 wallet upon submission.</small>
                    </div>

                    <button type="submit" class="btn btn-primary">Submit Engagement Form</button>
                </form>
            </section>

            {{-- Guidance Section --}}
            <section class="my-5">
                <h2>Next Steps</h2>
                <p>Upon submitting your engagement form, our team will review your information and reach out to discuss potential collaboration opportunities and how you can actively participate in the Polisplexity ecosystem.</p>
            </section>
        </div>
    </div>
</div>

<script>
document.getElementById('Web3Form').addEventListener('submit', async (e) => {
    if (document.getElementById('web3SignCheck').checked) {
        e.preventDefault(); // Prevent form from submitting immediately

        const signResult = await web3Login(); // Trigger the Web3 login and sign function

        if (signResult && signResult.signature) {
            // Populate the hidden fields with the address and signature
            document.getElementById('web3Address').value = signResult.address;
            document.getElementById('web3Signature').value = signResult.signature;

            e.target.submit(); // Submit the form after populating the hidden fields
        } else {
            alert('Signing with Web3 failed or was cancelled. Please try again or submit without signing.');
        }
    }
});
</script>
@endsection