@extends('layouts.app')

@section('title', "Book Bike Repair & Servicing - MJ's Bikes")

@section('content')

<!-- BREADCRUMBS -->
<div class="bg-light py-3 border-bottom mb-4">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-danger text-decoration-none">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('services.index') }}" class="text-danger text-decoration-none">Services</a></li>
                <li class="breadcrumb-item active" aria-current="page">Book Repair</li>
            </ol>
        </nav>
    </div>
</div>

<div class="container mb-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card booking-card">
                <div class="text-center mb-4">
                    <div class="text-danger fs-1 mb-2"><i class="bi bi-calendar2-week-fill"></i></div>
                    <h2 class="brand-font text-uppercase text-secondary mb-1">Book Repair <span class="text-danger">Service</span></h2>
                    <p class="text-muted small">Submit your bicycle parameters and book a checkup date. We will send a confirmation message to your WhatsApp.</p>
                </div>
                
                <form action="{{ route('services.store_booking') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="row g-3">
                        <!-- Contact Name -->
                        <div class="col-md-6">
                            <label for="name" class="form-label small fw-semibold text-muted">Customer Name</label>
                            <input type="text" class="form-control rounded-pill px-3 @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name', Auth::user()->name ?? '') }}" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <!-- Contact Phone -->
                        <div class="col-md-6">
                            <label for="phone" class="form-label small fw-semibold text-muted">Contact Phone (WhatsApp compatible)</label>
                            <input type="text" class="form-control rounded-pill px-3 @error('phone') is-invalid @enderror" id="phone" name="phone" placeholder="e.g. 0712345678" value="{{ old('phone', Auth::user()->phone ?? '') }}" required>
                            @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <!-- Bike Type -->
                        <div class="col-md-6">
                            <label for="bike_type" class="form-label small fw-semibold text-muted">Bicycle Type</label>
                            <select class="form-select rounded-pill px-3 @error('bike_type') is-invalid @enderror" id="bike_type" name="bike_type" required>
                                <option value="" disabled selected>Select Bike Type</option>
                                <option value="Mountain Bike (MTB)" {{ old('bike_type') === 'Mountain Bike (MTB)' ? 'selected' : '' }}>Mountain Bike (MTB)</option>
                                <option value="Road Bike" {{ old('bike_type') === 'Road Bike' ? 'selected' : '' }}>Road Bike</option>
                                <option value="BMX Bike" {{ old('bike_type') === 'BMX Bike' ? 'selected' : '' }}>BMX Bike</option>
                                <option value="Hybrid / Commuter Bike" {{ old('bike_type') === 'Hybrid / Commuter Bike' ? 'selected' : '' }}>Hybrid / Commuter Bike</option>
                                <option value="Kids Bike" {{ old('bike_type') === 'Kids Bike' ? 'selected' : '' }}>Kids Bike</option>
                                <option value="Other / Special Model" {{ old('bike_type') === 'Other / Special Model' ? 'selected' : '' }}>Other / Special Model</option>
                            </select>
                            @error('bike_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Preferred Service Preset (Optional) -->
                        <div class="col-md-6">
                            <label for="service_preset" class="form-label small fw-semibold text-muted">Preferred Workshop Menu (Optional)</label>
                            <select class="form-select rounded-pill px-3" id="service_preset" onchange="updateEstimatedCost(this)">
                                <option value="" selected>Custom / General Diagnosis</option>
                                @foreach($services as $srv)
                                    <option value="{{ $srv->estimated_cost }}" data-cost="{{ $srv->estimated_cost }}" {{ ($selectedService && $selectedService->id === $srv->id) ? 'selected' : '' }}>
                                        {{ $srv->name }} (KSh {{ number_format($srv->estimated_cost) }})
                                    </option>
                                @endforeach
                            </select>
                            <input type="hidden" name="estimated_cost" id="estimated_cost" value="{{ $selectedService ? $selectedService->estimated_cost : '' }}">
                        </div>

                        <!-- Preferred Booking Date -->
                        <div class="col-md-6">
                            <label for="preferred_date" class="form-label small fw-semibold text-muted">Preferred Workshop Date</label>
                            <input type="date" class="form-control rounded-pill px-3 @error('preferred_date') is-invalid @enderror" id="preferred_date" name="preferred_date" min="{{ date('Y-m-d') }}" value="{{ old('preferred_date') }}" required>
                            @error('preferred_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <!-- Upload Bike Image -->
                        <div class="col-md-6">
                            <label for="bike_image" class="form-label small fw-semibold text-muted">Bicycle Photo (Optional)</label>
                            <input type="file" class="form-control rounded-pill px-3 @error('bike_image') is-invalid @enderror" id="bike_image" name="bike_image">
                            <small class="text-muted d-block mt-1" style="font-size: 10px;">Supported formats: JPEG, PNG, Max: 4MB</small>
                            @error('bike_image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Pickup Request Checkbox -->
                        <div class="col-12 my-2">
                            <div class="form-check form-switch card p-3 border-light shadow-sm flex-row align-items-center justify-content-between">
                                <div>
                                    <label class="form-check-label fw-bold text-secondary d-block" for="pickup_required">Need Home Pickup?</label>
                                    <small class="text-muted">Check this if you want our rider to collect the bicycle from your address in Nairobi (KSh 350 flat fee).</small>
                                </div>
                                <input class="form-check-input ms-0 me-3" type="checkbox" role="switch" id="pickup_required" name="pickup_required" value="1" {{ old('pickup_required') ? 'checked' : '' }}>
                            </div>
                        </div>

                        <!-- Problem Description -->
                        <div class="col-12">
                            <label for="problem_description" class="form-label small fw-semibold text-muted">Problem Description</label>
                            <textarea class="form-control rounded-4 @error('problem_description') is-invalid @enderror" id="problem_description" name="problem_description" rows="4" placeholder="Detail any skipping gears, squeaky brakes, wheel alignment issues, or modifications you want us to do." required>{{ old('problem_description') }}</textarea>
                            @error('problem_description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Additional Notes -->
                        <div class="col-12">
                            <label for="additional_notes" class="form-label small fw-semibold text-muted">Additional / Delivery Notes (Optional)</label>
                            <textarea class="form-control rounded-4" id="additional_notes" name="additional_notes" rows="2" placeholder="e.g. Your physical address if pickup is required.">{{ old('additional_notes') }}</textarea>
                        </div>
                    </div>

                    <!-- Cost Estimate Footer Banner -->
                    <div class="card bg-light border-0 rounded-4 p-3 mt-4 text-center">
                        <span class="small text-muted d-block">Estimated Diagnostic Cost</span>
                        <h4 class="fw-extrabold text-secondary mb-0" id="estimatedCostDisplay">
                            KSh {{ $selectedService ? number_format($selectedService->estimated_cost) : 'TBD (To Be Diagnosed)' }}
                        </h4>
                    </div>

                    <div class="text-center mt-4">
                        <button type="submit" class="btn btn-primary-mj btn-lg rounded-pill px-5 py-2 text-uppercase fs-6">
                            Submit Repair Booking <i class="bi bi-send ms-1"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    function updateEstimatedCost(selectElement) {
        const selectedOption = selectElement.options[selectElement.selectedIndex];
        const cost = selectedOption.getAttribute('data-cost');
        const costDisplay = document.getElementById('estimatedCostDisplay');
        const costHidden = document.getElementById('estimated_cost');
        
        if (cost) {
            costDisplay.textContent = 'KSh ' + parseFloat(cost).toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0});
            costHidden.value = cost;
        } else {
            costDisplay.textContent = 'TBD (To Be Diagnosed)';
            costHidden.value = '';
        }
    }
</script>
@endsection
