@extends('layouts.app')

@section('title', $provider->providerProfile->business_name ?? $provider->name)

@section('content')
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                @php
                    $primaryImage = $provider->providerProfile->media->where('is_primary', true)->first();
                @endphp
                @if($primaryImage)
                    <img src="{{ asset('storage/' . $primaryImage->file_path) }}" class="card-img-top" alt="Profile" style="max-height: 400px; object-fit: cover;">
                @endif
                <div class="card-body">
                    <h2>{{ $provider->providerProfile->business_name ?? $provider->name }}</h2>
                    <div class="mb-3">
                        <span class="badge bg-warning text-dark">
                            <i class="fas fa-star"></i> {{ number_format($provider->providerProfile->rating ?? 0, 1) }}
                        </span>
                        <span class="ms-2">{{ $provider->providerProfile->total_reviews ?? 0 }} reviews</span>
                    </div>
                    
                    <h5>About Me</h5>
                    <p>{{ $provider->providerProfile->description ?? 'No description available.' }}</p>
                    
                    <h5>Experience</h5>
                    <p>{{ $provider->providerProfile->experience_years ?? 0 }} years of experience</p>
                    
                    <h5>Location</h5>
                    <p>{{ $provider->providerProfile->address ?? 'Address not specified' }}, {{ $provider->providerProfile->city ?? '' }}</p>
                    
                    <h5>Services Offered</h5>
                    <div class="row">
                        @foreach($provider->providerProfile->services as $service)
                        <div class="col-md-6 mb-3">
                            <div class="card">
                                <div class="card-body">
                                    <h6>{{ $service->name }}</h6>
                                    <p class="text-muted">{{ $service->duration_minutes }} minutes</p>
                                    <p class="fw-bold">₦{{ number_format($service->price, 2) }}</p>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    
                    <h5>Gallery</h5>
                    <div class="row">
                        @foreach($provider->providerProfile->media as $media)
                        <div class="col-md-4 mb-3">
                            @if($media->file_type == 'image')
                                <img src="{{ asset('storage/' . $media->file_path) }}" class="img-fluid rounded" style="height: 150px; width: 100%; object-fit: cover;">
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card booking-form">
                <div class="card-body">
                    <h4>Book an Appointment</h4>
                    <form action="{{ route('booking.store', $provider->id) }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="service_id" class="form-label">Select Service</label>
                            <select name="service_id" id="service_id" class="form-control" required>
                                <option value="">Choose a service...</option>
                                @foreach($provider->providerProfile->services as $service)
                                <option value="{{ $service->id }}" data-price="{{ $service->price }}" data-duration="{{ $service->duration_minutes }}">
                                    {{ $service->name }} - {{ $service->duration_minutes }} mins - ₦{{ number_format($service->price, 2) }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label for="booking_date" class="form-label">Date</label>
                            <input type="date" name="booking_date" id="booking_date" class="form-control" min="{{ date('Y-m-d') }}" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="booking_time" class="form-label">Time</label>
                            <input type="time" name="booking_time" id="booking_time" class="form-control" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="notes" class="form-label">Special Requests</label>
                            <textarea name="notes" id="notes" rows="3" class="form-control" placeholder="Any special requirements?"></textarea>
                        </div>
                        
                        <div class="alert alert-info">
                            <strong>Total: ₦<span id="total_amount">0.00</span></strong>
                            <input type="hidden" name="total_amount" id="total_amount_input">
                        </div>
                        
                        <button type="submit" class="btn btn-primary w-100">Proceed to Booking</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.getElementById('service_id').addEventListener('change', function() {
        let selected = this.options[this.selectedIndex];
        let price = selected.getAttribute('data-price');
        if(price) {
            document.getElementById('total_amount').innerText = parseFloat(price).toLocaleString();
            document.getElementById('total_amount_input').value = price;
        }
    });
</script>
@endpush
@endsection