@extends('layouts.app')

@section('content')
<div class="text-center py-4">
    <h1 class="fw-bold">{{ __('form.title') }}</h1>
    <p class="fs-5">{{ __('form.subtitle') }}</p>
</div>
<div class="bg-light">
    @if(session('success'))
    <div class="alert alert-success text-center">
        {{ session('success') }}
    </div>
    @endif
    @if ($errors->any())
    <div class="alert alert-danger text-center">
        <ul>
            @foreach ($errors->all() as $error)
            <p>{{ $error }}</p>
            @endforeach
        </ul>
    </div>
    @endif
    <div class="container p-4" style="max-width: 600px;">
        <h1 class="text-center mb-3">{{ __('form.project_title') }}</h1>
        <h4 class="text-center text-muted">{{ __('form.project_subtitle') }}</h4>
        <div class="mt-5 text-muted text-center mb-3">
            <a href="{{ route('login') }}" class="fw-bold">{{ __('form.already_have_account') }}</a>
        </div>
        <form action="{{ route('form.submit') }}" method="POST">
            @csrf
            <div class="mb-3">
                <label class="form-label">{{ __('form.first_name') }}</label>
                <input type="text" class="form-control" name="firstName" required>
            </div>
            <div class="mb-3">
                <label class="form-label">{{ __('form.last_name') }}</label>
                <input type="text" class="form-control" name="lastName" required>
            </div>
            <div class="mb-3">
                <label class="form-label">{{ __('form.email') }}</label>
                <input type="email" class="form-control" name="email" required>
            </div>
            <div class="mb-3">
                <label class="form-label">{{ __('form.phone') }}</label>
                <input type="tel" class="form-control" name="téléphone" required>
            </div>
            <div class="mb-3">
                <label class="form-label">{{ __('form.project_type') }}</label>
                <select class="form-select" name="type" id="projectType">
                    @foreach(__('form.project_types') as $key => $value)
                        <option value="{{ $key }}">{{ $value }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-3 d-none" id="autreDiv">
                <label class="form-label">{{ __('form.other_project') }}</label>
                <input type="text" class="form-control" name="autre-type" id="autreInput">
            </div>
            <div class="mb-3">
                <label class="form-label">{{ __('form.budget') }}</label>
                <select class="form-select" name="budget">
                    @foreach(__('form.budgets') as $key => $value)
                        <option value="{{ $key }}">{{ $value }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">{{ __('form.deadline') }}</label>
                <select class="form-select" name="délai">
                    @foreach(__('form.deadlines') as $key => $value)
                        <option value="{{ $key }}">{{ $value }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">{{ __('form.project_details') }}</label>
                <textarea name="détails" rows="4" class="form-control" required></textarea>
            </div>
            <div class="mb-3">
                <label class="form-label">{{ __('form.current_url') }}</label>
                <input type="url" class="form-control" name="url" placeholder="https://example.com">
            </div>
            <div class="mb-3">
                <label class="form-label">{{ __('form.preferred_tech') }}</label>
                <div >
                    @foreach(__('form.technologies_list') as $key => $value)
                    <div class="form-check me-3">
                        <input class="form-check-input" type="checkbox" name="technologies[]" value="{{ $key }}" id="tech-{{ $key }}">
                        <label class="form-check-label" for="tech-{{ $key }}">{{ $value }}</label>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="mb-3">
                <label class="form-label">{{ __('form.heard_about_us') }}</label>
                <select class="form-select" name="entendu_parler_de_nous" id="entendu">
                    @foreach(__('form.heard_options') as $key => $value)
                        <option value="{{ $key }}">{{ $value }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-3 d-none" id="autreEntenduDiv">
                <label class="form-label">{{ __('form.other_project') }}</label>
                <input type="text" class="form-control" name="autre-entendu" id="autreEntenduInput">
            </div>
            <input type="hidden" id="recaptcha-token" name="recaptcha_token">
            <button type="submit" class="btn btn-primary w-100">{{ __('form.submit') }}</button>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.getElementById("projectType").addEventListener("change", function() {
        var otherDiv = document.getElementById("autreDiv");
        var otherInput = document.getElementById("autreInput");

        if (this.value === "other") {
            otherDiv.classList.remove("d-none");
            otherInput.setAttribute("required", "true"); 
        } else {
            otherDiv.classList.add("d-none");
            otherInput.removeAttribute("required");
        }
    });

    document.getElementById("entendu").addEventListener("change", function() {
        var otherDiv = document.getElementById("autreEntenduDiv");
        var otherInput = document.getElementById("autreEntenduInput");

        if (this.value === "other") {
            otherDiv.classList.remove("d-none");
            otherInput.setAttribute("required", "true"); 
        } else {
            otherDiv.classList.add("d-none");
            otherInput.removeAttribute("required");
        }
    });
    grecaptcha.ready(function () {
        grecaptcha.execute('{{ config('services.recaptcha.site_key') }}', { action: 'submit' })
            .then(function (token) {
                document.getElementById('recaptcha-token').value = token;
            });
    });
</script>
@endsection