<div>
    @php
        $companyData = $this->company;
        $serviceCategories = $this->serviceCategories;
    @endphp

    <!-- breadcrumb-area -->
    <section class="breadcrumb__area breadcrumb__bg" data-background="{{url('/')}}/assets/img/bg/breadcrumb__bg.jpg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb__content">
                        <h2 class="title">Free Consultation</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb-area-end -->

    <!-- quote-area -->
    <section class="contact__area section-pb-140 mt-30">
        <div class="container">
            <div class="row">                
                <div class="col-lg-6 offset-3">
                    <div class="contact__form-wrap">
                        <h2 class="title">Fill the form below</h2>
                        
                        <!-- Success Message -->
                        @if(session()->has('success'))
                            <div class="alert alert-success mb-4" style="padding: 15px; background: #d4edda; border: 1px solid #c3e6cb; border-radius: 8px; color: #155724;">
                                <i class="fas fa-check-circle"></i> {{ session('success') }}
                            </div>
                        @endif

                        <!-- Error Message -->
                        @if(session()->has('error'))
                            <div class="alert alert-danger mb-4" style="padding: 15px; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 8px; color: #721c24;">
                                <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
                            </div>
                        @endif

                        <form wire:submit.prevent="submitQuote" class="contact__form">
                            <div class="form-grp">
                                <input type="text" id="name" placeholder="Enter Your Name *" wire:model="name" required>
                                @error('name') 
                                    <span class="error-text" style="color: #dc3545; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-grp">
                                <input type="text" id="company" placeholder="Company Name" wire:model="companyName">
                                @error('companyName') 
                                    <span class="error-text" style="color: #dc3545; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-grp select-grp">
                                <select id="service" name="service" wire:model="service" class="country-name">
                                    <option value="">Select Service *</option>
                                    @foreach($serviceCategories as $serviceItem)
                                        <option value="{{$serviceItem->name}}">{{$serviceItem->name}}</option>
                                    @endforeach
                                </select>
                                @error('service') 
                                    <span class="error-text" style="color: #dc3545; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-grp">
                                        <input type="tel" id="phone" placeholder="Phone Number *" wire:model="phone" required>
                                        @error('phone') 
                                            <span class="error-text" style="color: #dc3545; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-grp">
                                        <input type="email" id="email" placeholder="Email Address *" wire:model="email" required>
                                        @error('email') 
                                            <span class="error-text" style="color: #dc3545; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-grp">
                                        <input type="text" id="district" placeholder="District" wire:model="district">
                                        @error('district') 
                                            <span class="error-text" style="color: #dc3545; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-grp">
                                        <input type="text" id="region" placeholder="Region" wire:model="region">
                                        @error('region') 
                                            <span class="error-text" style="color: #dc3545; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="form-grp">
                                <input type="text" id="address" placeholder="Address" wire:model="address">
                                @error('address') 
                                    <span class="error-text" style="color: #dc3545; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-grp">
                                <textarea id="note" wire:model="note" placeholder="Note Description Here" rows="5"></textarea>
                                @error('note') 
                                    <span class="error-text" style="color: #dc3545; font-size: 12px; margin-top: 4px; display: block;">{{ $message }}</span>
                                @enderror
                            </div>
                            
                            <button type="submit"> Submit </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- quote-area-end -->
</div>
