{{-- resources/views/frontend/legal-help/book-consultation.blade.php --}}
@extends('layouts.app')

@section('title', 'Book Consultation with ' . $professional->full_name . ' - ELawgically')

@section('content')
{{-- Header --}}
<section class="bg-primary-custom text-white py-5" style="margin-top: 76px;">
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <h1 class="display-5 fw-bold mb-3">Book Consultation</h1>
                <p class="lead text-white-50">Schedule a session with {{ $professional->full_name }}</p>
            </div>
        </div>
    </div>
</section>

{{-- Booking Form --}}
<section class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card card-custom p-4 p-md-5">
                    <div class="card-body">
                        <div class="d-flex align-items-center gap-3 mb-4">
                            <img src="{{ $professional->profile_image ?? asset('images/default-avatar.png') }}" 
                                 class="rounded-circle" style="width: 60px; height: 60px;">
                            <div>
                                <h5 class="fw-bold mb-1">{{ $professional->full_name }}</h5>
                                <p class="text-muted mb-0">{{ $professional->qualification }}</p>
                            </div>
                        </div>
                        
                        <hr>
                        
                        <form action="{{ route('legal-help.store-consultation', $professional->slug) }}" method="POST">
                            @csrf
                            
                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Preferred Date *</label>
                                    <input type="date" name="scheduled_date" class="form-control form-control-custom" 
                                           required min="{{ date('Y-m-d', strtotime('+1 day')) }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Preferred Time *</label>
                                    <select name="scheduled_time" class="form-select form-control-custom" required>
                                        <option value="">Select time</option>
                                        <option value="09:00">09:00 AM</option>
                                        <option value="09:30">09:30 AM</option>
                                        <option value="10:00">10:00 AM</option>
                                        <option value="10:30">10:30 AM</option>
                                        <option value="11:00">11:00 AM</option>
                                        <option value="11:30">11:30 AM</option>
                                        <option value="12:00">12:00 PM</option>
                                        <option value="14:00">02:00 PM</option>
                                        <option value="14:30">02:30 PM</option>
                                        <option value="15:00">03:00 PM</option>
                                        <option value="15:30">03:30 PM</option>
                                        <option value="16:00">04:00 PM</option>
                                        <option value="16:30">04:30 PM</option>
                                    </select>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-semibold">Consultation Type *</label>
                                <div class="d-flex gap-3">
                                    @if($professional->offers_online_consultation)
                                    <div class="form-check">
                                        <input type="radio" name="consultation_type" value="online" 
                                               class="form-check-input" id="online" checked>
                                        <label class="form-check-label" for="online">
                                            <i class="bi bi-camera-video me-1"></i> Online
                                        </label>
                                    </div>
                                    @endif
                                    @if($professional->offers_offline_consultation)
                                    <div class="form-check">
                                        <input type="radio" name="consultation_type" value="offline" 
                                               class="form-check-input" id="offline">
                                        <label class="form-check-label" for="offline">
                                            <i class="bi bi-building me-1"></i> Offline
                                        </label>
                                    </div>
                                    @endif
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-semibold">Duration</label>
                                <select name="duration" class="form-select form-control-custom">
                                    <option value="15">15 minutes</option>
                                    <option value="30" selected>30 minutes</option>
                                    <option value="45">45 minutes</option>
                                    <option value="60">60 minutes</option>
                                </select>
                            </div>

                            <div class="mb-4">
                                <label class="form-label fw-semibold">Notes (Optional)</label>
                                <textarea name="notes" class="form-control form-control-custom" rows="3" 
                                          placeholder="Briefly describe your legal issue..."></textarea>
                            </div>

                            @if($professional->consultation_fee)
                            <div class="alert alert-info rounded-3 mb-4">
                                <i class="bi bi-info-circle me-2"></i>
                                Consultation Fee: <strong>₹{{ number_format($professional->consultation_fee, 2) }}</strong>
                            </div>
                            @endif

                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary-custom btn-lg rounded-pill">
                                    <i class="bi bi-calendar-check me-2"></i> Confirm Booking
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection