@extends('layouts.app')

@section('title', 'Demande de devis')

@section('content')
    <!-- Page Header Start -->
    <div class="container-fluid page-header">
        <h1 class="display-3 text-uppercase text-white mb-3">Demande de devis</h1>
        <div class="d-inline-flex text-white">
            <h6 class="text-uppercase m-0"><a href="{{ route('home') }}">Accueil</a></h6>
            <h6 class="text-white m-0 px-3">/</h6>
            <h6 class="text-uppercase text-white m-0">Devis</h6>
        </div>
    </div>
    <!-- Page Header End -->

    <!-- Quote Form Start -->
    <div class="container-fluid py-6 px-5">
        <div class="text-center mx-auto mb-5" style="max-width: 600px;">
            <h1 class="display-5 text-uppercase mb-4">Demandez votre <span class="text-primary">devis</span> personnalisé
            </h1>
        </div>
        <div class="row g-5">
            <div class="col-lg-7">
                <form action="{{ route('quotes.store') }}" method="POST">
                    @csrf
                    <div class="row g-3">
                        <div class="col-12">
                            <select name="product_id"
                                class="form-select bg-light border px-4 @error('product_id') is-invalid @enderror"
                                style="height: 55px;">
                                <option value="">Sélectionnez un produit (optionnel)</option>
                                @foreach ($products as $product)
                                    <option value="{{ $product->id }}"
                                        {{ old('product_id', $selectedProduct?->id) == $product->id ? 'selected' : '' }}>
                                        {{ $product->name }} -
                                        {{ number_format($product->promotion_price ?? $product->price, 2) }}
                                        FCFA
                                    </option>
                                @endforeach
                            </select>
                            @error('product_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-12">
                            <input type="text" name="company_name"
                                class="form-control bg-light border px-4 @error('company_name') is-invalid @enderror"
                                placeholder="Nom de l'entreprise" style="height: 55px;" value="{{ old('company_name') }}"
                                required>
                            @error('company_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-12">
                            <input type="text" name="contact_name"
                                class="form-control bg-light border px-4 @error('contact_name') is-invalid @enderror"
                                placeholder="Nom du contact" style="height: 55px;" value="{{ old('contact_name') }}"
                                required>
                            @error('contact_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-12">
                            <input type="email" name="email"
                                class="form-control bg-light border px-4 @error('email') is-invalid @enderror"
                                placeholder="Email" style="height: 55px;" value="{{ old('email') }}" required>
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-12">
                            <input type="tel" name="phone"
                                class="form-control bg-light border px-4 @error('phone') is-invalid @enderror"
                                placeholder="Téléphone" style="height: 55px;" value="{{ old('phone') }}" required>
                            @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-12">
                            <textarea name="message" class="form-control bg-light border px-4 py-3 @error('message') is-invalid @enderror"
                                rows="4" placeholder="Message" required>{{ old('message') }}</textarea>
                            @error('message')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-12">
                            <button class="btn btn-primary w-100 py-3" type="submit">Envoyer la demande</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-lg-5">
                <div class="bg-light p-5">
                    <h4 class="text-uppercase mb-4">Besoin d'aide ?</h4>

                    <div class="d-flex align-items-center mb-4">
                        <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-white"
                            style="width: 60px; height: 60px;">
                            <i class="fa fa-phone text-primary"></i>
                        </div>
                        <div class="ms-3">
                            <h5 class="text-uppercase">Appelez-nous</h5>
                            <p class="mb-0">(+228) 91 62 35 33</p>
                            <p class="mb-0">97 55 05 70</p>
                        </div>
                    </div>

                    <div class="d-flex align-items-center">
                        <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-white"
                            style="width: 60px; height: 60px;">
                            <i class="fa fa-envelope text-primary"></i>
                        </div>
                        <div class="ms-3">
                            <h5 class="text-uppercase">Email</h5>
                            <p class="mb-0">contact@2ecg-togo.com</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Quote Form End -->
@endsection