@extends($layout)

@section('title', 'Post Your Requirement')

@section(Auth::check() && Auth::user()->hasRole('buyer') ? 'buyer-content' : 'content')

<div class="py-5 bg-light" style="min-height: calc(100vh - 80px);">
    <div class="container">
        <div class="row justify-content-center align-items-stretch g-4">
            
            <!-- Left Column: Value Proposition -->
            <div class="col-12 col-lg-5 d-flex">
                <div class="card border-0 shadow-lg w-100 text-white overflow-hidden rounded-4" style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);">
                    <!-- Decorative Background -->
                    <div class="position-absolute top-0 end-0 p-5 mt-n4 me-n4 rounded-circle bg-primary bg-opacity-25 blur-3xl" style="width: 300px; height: 300px; filter: blur(60px);"></div>
                    <div class="position-absolute bottom-0 start-0 p-5 mb-n4 ms-n4 rounded-circle bg-info bg-opacity-10 blur-3xl" style="width: 200px; height: 200px; filter: blur(40px);"></div>

                    <div class="card-body p-5 position-relative z-1 d-flex flex-column justify-content-center">
                        <h2 class="display-6 fw-bold mb-4">Why Post Your Requirement?</h2>
                        
                        <div class="d-flex flex-column gap-4">
                            <div class="d-flex align-items-start">
                                <div class="icon-square bg-white bg-opacity-10 rounded-3 p-3 me-3 text-warning">
                                    <i class="bi bi-shield-check fs-4"></i>
                                </div>
                                <div>
                                    <h5 class="fw-bold mb-1">KYC Submitted Suppliers</h5>
                                    <p class="text-white-50 mb-0 small">Connect with genuine, KYC submitted sellers who are ready to fulfill your orders.</p>
                                </div>
                            </div>

                            <div class="d-flex align-items-start">
                                <div class="icon-square bg-white bg-opacity-10 rounded-3 p-3 me-3 text-warning">
                                    <i class="bi bi-currency-rupee fs-4"></i>
                                </div>
                                <div>
                                    <h5 class="fw-bold mb-1">Get Best Quotes</h5>
                                    <p class="text-white-50 mb-0 small">Receive competitive price offers from multiple suppliers and choose the best one.</p>
                                </div>
                            </div>

                            <div class="d-flex align-items-start">
                                <div class="icon-square bg-white bg-opacity-10 rounded-3 p-3 me-3 text-warning">
                                    <i class="bi bi-lightning-charge fs-4"></i>
                                </div>
                                <div>
                                    <h5 class="fw-bold mb-1">Save Time & Money</h5>
                                    <p class="text-white-50 mb-0 small">Stop searching endlessly. Post your need once and let suppliers come to you.</p>
                                </div>
                            </div>
                        </div>

                        <div class="mt-5 pt-4 border-top border-white border-opacity-10">
                             <div class="d-flex align-items-center gap-3">
                                <div class="avatar-group d-flex ps-2">
                                    <div class="avatar rounded-circle border border-2 border-dark" style="width: 32px; height: 32px; background: url('https://ui-avatars.com/api/?name=A+B&background=random') center/cover; margin-left: -10px;"></div>
                                    <div class="avatar rounded-circle border border-2 border-dark" style="width: 32px; height: 32px; background: url('https://ui-avatars.com/api/?name=C+D&background=random') center/cover; margin-left: -10px;"></div>
                                    <div class="avatar rounded-circle border border-2 border-dark" style="width: 32px; height: 32px; background: url('https://ui-avatars.com/api/?name=E+F&background=random') center/cover; margin-left: -10px;"></div>
                                </div>
                                <span class="text-white-50 small">Join <strong>5,000+</strong> happy buyers</span>
                             </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Form -->
            <div class="col-12 col-lg-5 d-flex">
                <div class="card border-0 shadow-lg w-100 rounded-4 overflow-hidden">
                    <div class="card-header bg-gradient-primary text-white p-4 border-0" style="background: linear-gradient(45deg, #0d6efd, #0dcaf0);">
                        <h3 class="fw-bold mb-1">Post Requirement</h3>
                        <p class="mb-0 text-white-50 small">Tell us what you need</p>
                    </div>

                    <div class="card-body p-4 p-lg-5">
                        @if(session('info'))
                            <div class="alert alert-info border-0 shadow-sm mb-4 rounded-3 d-flex align-items-center">
                                <i class="bi bi-info-circle-fill me-2 fs-5"></i>
                                <div>{{ session('info') }}</div>
                            </div>
                        @endif

                        @if ($errors->any())
                            <div class="alert alert-danger border-0 shadow-sm mb-4 rounded-3">
                                <ul class="mb-0 ps-3 small">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form action="{{ route('post.requirement.store') }}" method="POST">
                            @csrf
                            
                            <!-- Product/Service -->
                            <div class="mb-4">
                                <label class="form-label fw-bold text-muted small text-uppercase spacing-1">Product / Service</label>
                                <div class="input-group input-group-lg shadow-sm rounded-3 overflow-hidden">
                                    <span class="input-group-text bg-light border-0"><i class="bi bi-box-seam text-primary"></i></span>
                                    <input type="text" name="product_name" class="form-control border-0 bg-light" 
                                           placeholder="e.g. Cotton T-Shirts, Rice" 
                                           required value="{{ old('product_name', request('product_name')) }}"
                                           style="font-size: 0.95rem;">
                                </div>
                            </div>



                            <!-- Mobile -->
                            <div class="mb-4">
                                <label class="form-label fw-bold text-muted small text-uppercase spacing-1">Contact Number</label>
                                <div class="input-group input-group-lg shadow-sm rounded-3 overflow-hidden">
                                    <span class="input-group-text bg-light border-0"><i class="bi bi-telephone text-primary"></i></span>
                                    <input type="tel" name="mobile" class="form-control border-0 bg-light" 
                                           placeholder="Your mobile number" required 
                                           value="{{ old('mobile', Auth::user()->phone ?? '') }}"
                                           style="font-size: 0.95rem;">
                                </div>
                            </div>

                            <!-- Location -->
                            <div class="mb-4">
                                <label class="form-label fw-bold text-muted small text-uppercase spacing-1">Delivery Location</label>
                                <div class="input-group input-group-lg shadow-sm rounded-3 overflow-hidden">
                                    <span class="input-group-text bg-light border-0"><i class="bi bi-geo-alt text-primary"></i></span>
                                    <input type="text" name="delivery_location" class="form-control border-0 bg-light" 
                                           placeholder="City, State" required value="{{ old('delivery_location') }}"
                                           style="font-size: 0.95rem;">
                                </div>
                            </div>

                            <!-- Country -->
                            <div class="mb-4">
                                <label class="form-label fw-bold text-muted small text-uppercase spacing-1">Country</label>
                                <div class="input-group input-group-lg shadow-sm rounded-3 overflow-hidden">
                                    <span class="input-group-text bg-light border-0"><i class="bi bi-globe text-primary"></i></span>
                                    <select name="country" class="form-select border-0 bg-light" style="font-size: 0.95rem;">
                                        <option value="">Select Country</option>
                                        @if(isset($countries))
                                            @foreach($countries as $country)
                                                <option value="{{ $country }}" {{ old('country') == $country ? 'selected' : '' }}>{{ $country }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>

                            <div class="d-grid mt-5">
                                <button type="submit" class="btn btn-primary btn-lg rounded-pill shadow-lg border-0 py-3 fw-bold" 
                                        style="background: linear-gradient(45deg, #0d6efd, #0dcaf0);">
                                    Submit Requirement <i class="bi bi-arrow-right ms-2"></i>
                                </button>
                            </div>
                            
                            <p class="text-center text-muted small mt-4 mb-0">
                                By submitting, you agree to our <a href="#" class="text-decoration-none fw-bold">Terms of Service</a> & <a href="#" class="text-decoration-none fw-bold">Privacy Policy</a>.
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.spacing-1 { letter-spacing: 1px; }
.blur-3xl { filter: blur(60px); }
</style>

@endsection