@extends('layouts.mobile')

@section('title', 'Book Courier')

@section('content')
<!-- Booking Header -->
<div class="mobile-card">
    <div class="mobile-card-header text-center">
        <h2 class="mb-2">
            <i class="bi bi-plus-circle me-2"></i>
            {{ __('mobile.book_courier_service') }}
        </h2>
        <p class="mb-0 opacity-75">{{ __('mobile.fast_reliable_delivery') }}</p>
    </div>
</div>

<!-- Booking Form -->
<form method="POST" action="{{ route('courier.store') }}" id="courierForm">
    @csrf
    
    <!-- Pickup Details -->
    <div class="mobile-card">
        <div class="mobile-card-body">
            <h5 class="mb-4">
                <i class="bi bi-geo-alt text-primary me-2"></i>
                Pickup Details
            </h5>
            
            <div class="mb-4">
                <label for="pickup_district_id" class="form-label fw-bold">
                    <i class="bi bi-map text-primary me-2"></i>Pickup City/District
                </label>
                <select class="form-control form-control-mobile @error('pickup_district_id') is-invalid @enderror" 
                        id="pickup_district_id" name="pickup_district_id" required data-district-combobox="true" data-placeholder="Search pickup district…">
                    <option value="">Select pickup location...</option>
                    @foreach($districts as $province => $provinceDistricts)
                        <optgroup label="{{ $province }}">
                            @foreach($provinceDistricts as $district)
                                <option value="{{ $district->id }}" {{ old('pickup_district_id') == $district->id ? 'selected' : '' }}>
                                    {{ $district->name }}
                                </option>
                            @endforeach
                        </optgroup>
                    @endforeach
                </select>
                @error('pickup_district_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            
            <div class="mb-4">
                <label for="pickup_address" class="form-label fw-bold">
                    <i class="bi bi-house text-primary me-2"></i>Pickup Address
                </label>
                <textarea class="form-control form-control-mobile @error('pickup_address') is-invalid @enderror" 
                          id="pickup_address" name="pickup_address" rows="3" 
                          placeholder="Enter complete pickup address with landmarks" required>{{ old('pickup_address') }}</textarea>
                @error('pickup_address')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
                <small class="form-text text-muted">
                    <i class="bi bi-info-circle me-1"></i>
                    Include house number, street, and nearby landmarks
                </small>
            </div>
        </div>
    </div>
    
    <!-- Delivery Details -->
    <div class="mobile-card">
        <div class="mobile-card-body">
            <h5 class="mb-4">
                <i class="bi bi-geo-alt-fill text-danger me-2"></i>
                Delivery Details
            </h5>
            
            <div class="mb-4">
                <label for="drop_district_id" class="form-label fw-bold">
                    <i class="bi bi-map text-danger me-2"></i>Delivery City/District
                </label>
                <select class="form-control form-control-mobile @error('drop_district_id') is-invalid @enderror" 
                        id="drop_district_id" name="drop_district_id" required data-district-combobox="true" data-placeholder="Search drop district…">
                    <option value="">Select delivery location...</option>
                    @foreach($districts as $province => $provinceDistricts)
                        <optgroup label="{{ $province }}">
                            @foreach($provinceDistricts as $district)
                                <option value="{{ $district->id }}" {{ old('drop_district_id') == $district->id ? 'selected' : '' }}>
                                    {{ $district->name }}
                                </option>
                            @endforeach
                        </optgroup>
                    @endforeach
                </select>
                @error('drop_district_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            
            <div class="mb-4">
                <label for="drop_address" class="form-label fw-bold">
                    <i class="bi bi-house-fill text-danger me-2"></i>Delivery Address
                </label>
                <textarea class="form-control form-control-mobile @error('drop_address') is-invalid @enderror" 
                          id="drop_address" name="drop_address" rows="3" 
                          placeholder="Enter complete delivery address with landmarks" required>{{ old('drop_address') }}</textarea>
                @error('drop_address')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            
            <div class="row g-3">
                <div class="col-12">
                    <label for="recipient_name" class="form-label fw-bold">
                        <i class="bi bi-person text-info me-2"></i>Recipient Name
                    </label>
                    <input type="text" class="form-control form-control-mobile @error('recipient_name') is-invalid @enderror" 
                           id="recipient_name" name="recipient_name" value="{{ old('recipient_name') }}" 
                           placeholder="Full name of recipient" required>
                    @error('recipient_name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-12">
                    <label for="recipient_phone" class="form-label fw-bold">
                        <i class="bi bi-telephone text-success me-2"></i>Recipient Phone
                    </label>
                    <input type="tel" class="form-control form-control-mobile @error('recipient_phone') is-invalid @enderror" 
                           id="recipient_phone" name="recipient_phone" value="{{ old('recipient_phone') }}" 
                           placeholder="+92-300-1234567" required>
                    @error('recipient_phone')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>
    </div>
    
    <!-- Package Details -->
    <div class="mobile-card">
        <div class="mobile-card-body">
            <h5 class="mb-4">
                <i class="bi bi-box text-warning me-2"></i>
                Package Information
            </h5>
            
            <div class="mb-4">
                <label class="form-label fw-bold">
                    <i class="bi bi-archive text-warning me-2"></i>Package Type
                </label>
                <div class="row g-2">
                    <div class="col-4">
                        <input type="radio" class="btn-check" name="package_type" id="document" value="document" 
                               {{ old('package_type') == 'document' ? 'checked' : '' }} required>
                        <label class="btn btn-outline-primary w-100 d-flex flex-column align-items-center p-3" for="document">
                            <i class="bi bi-file-earmark" style="font-size: 1.5rem;"></i>
                            <small class="mt-1">Document</small>
                        </label>
                    </div>
                    <div class="col-4">
                        <input type="radio" class="btn-check" name="package_type" id="parcel" value="parcel" 
                               {{ old('package_type') == 'parcel' ? 'checked' : '' }} required>
                        <label class="btn btn-outline-success w-100 d-flex flex-column align-items-center p-3" for="parcel">
                            <i class="bi bi-box" style="font-size: 1.5rem;"></i>
                            <small class="mt-1">Parcel</small>
                        </label>
                    </div>
                    <div class="col-4">
                        <input type="radio" class="btn-check" name="package_type" id="fragile" value="fragile" 
                               {{ old('package_type') == 'fragile' ? 'checked' : '' }} required>
                        <label class="btn btn-outline-warning w-100 d-flex flex-column align-items-center p-3" for="fragile">
                            <i class="bi bi-exclamation-triangle" style="font-size: 1.5rem;"></i>
                            <small class="mt-1">Fragile</small>
                        </label>
                    </div>
                </div>
                @error('package_type')
                    <div class="text-danger small mt-2">{{ $message }}</div>
                @enderror
            </div>
            
            <div class="mb-4">
                <label for="weight" class="form-label fw-bold">
                    <i class="bi bi-speedometer text-info me-2"></i>Weight (kg)
                </label>
                <div class="input-group">
                    <input type="number" class="form-control form-control-mobile @error('weight') is-invalid @enderror" 
                           id="weight" name="weight" value="{{ old('weight') }}" 
                           min="0.1" max="50" step="0.1" placeholder="0.5" required>
                    <span class="input-group-text">kg</span>
                </div>
                @error('weight')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
                <small class="form-text text-muted">
                    <i class="bi bi-info-circle me-1"></i>
                    Maximum weight: 50kg
                </small>
            </div>
            
            <div class="mb-4">
                <label for="special_instructions" class="form-label fw-bold">
                    <i class="bi bi-chat-text text-secondary me-2"></i>Special Instructions (Optional)
                </label>
                <textarea class="form-control form-control-mobile" id="special_instructions" 
                          name="special_instructions" rows="2" 
                          placeholder="Any special handling instructions...">{{ old('special_instructions') }}</textarea>
            </div>
        </div>
    </div>
    
    <!-- Payment Method -->
    <div class="mobile-card">
        <div class="mobile-card-body">
            <h5 class="mb-4">
                <i class="bi bi-credit-card text-success me-2"></i>
                Payment Method
            </h5>
            
            <div class="row g-3">
                <div class="col-12">
                    <input type="radio" class="btn-check" name="payment_method" id="cod" value="cod" 
                           {{ old('payment_method', 'cod') == 'cod' ? 'checked' : '' }} required>
                    <label class="btn btn-outline-warning w-100 d-flex align-items-center p-3" for="cod">
                        <i class="bi bi-cash-coin me-3" style="font-size: 1.5rem;"></i>
                        <div class="text-start">
                            <strong>Cash on Delivery (COD)</strong>
                            <br><small class="text-muted">Pay when package is delivered</small>
                        </div>
                    </label>
                </div>
                <div class="col-6">
                    <input type="radio" class="btn-check" name="payment_method" id="jazzcash" value="jazzcash" 
                           {{ old('payment_method') == 'jazzcash' ? 'checked' : '' }} required>
                    <label class="btn btn-outline-danger w-100 d-flex flex-column align-items-center p-3" for="jazzcash">
                        <i class="bi bi-phone" style="font-size: 1.5rem;"></i>
                        <small class="mt-1">JazzCash</small>
                    </label>
                </div>
                <div class="col-6">
                    <input type="radio" class="btn-check" name="payment_method" id="easypaisa" value="easypaisa" 
                           {{ old('payment_method') == 'easypaisa' ? 'checked' : '' }} required>
                    <label class="btn btn-outline-success w-100 d-flex flex-column align-items-center p-3" for="easypaisa">
                        <i class="bi bi-wallet2" style="font-size: 1.5rem;"></i>
                        <small class="mt-1">EasyPaisa</small>
                    </label>
                </div>
            </div>
            @error('payment_method')
                <div class="text-danger small mt-2">{{ $message }}</div>
            @enderror
        </div>
    </div>
    
    <!-- Price Estimate -->
    <div class="mobile-card" id="priceEstimate">
        <div class="mobile-card-body">
            <h5 class="mb-4">
                <i class="bi bi-calculator text-info me-2"></i>
                Price Estimate
            </h5>
            
            <div class="bg-light rounded-3 p-3" id="priceEstimateContent">
                <div class="text-center text-muted">
                    <i class="bi bi-info-circle me-2"></i>
                    Fill all required fields to get price estimation
                </div>
            </div>
            
            <small class="text-muted mt-2 d-block">
                <i class="bi bi-info-circle me-1"></i>
                Final price may vary based on actual package dimensions
            </small>
        </div>
    </div>
    
    <!-- Submit Button -->
    <div class="mobile-card">
        <div class="mobile-card-body">
            <div class="d-grid">
                <button type="submit" class="btn btn-mobile btn-mobile-primary" id="submitBtn">
                    <i class="bi bi-check-circle me-2"></i>
                    Book Courier Service
                </button>
            </div>
            
            <div class="text-center mt-3">
                <small class="text-muted">
                    <i class="bi bi-shield-check me-1"></i>
                    Your package is insured up to Rs. 10,000
                </small>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
    // Auto-format phone number
    document.getElementById('recipient_phone').addEventListener('input', function(e) {
        let value = e.target.value.replace(/\D/g, '');
        if (value.length > 0) {
            if (value.startsWith('92')) {
                value = '+' + value;
            } else if (!value.startsWith('+92')) {
                value = '+92' + value;
            }
        }
        e.target.value = value;
    });
    
    // Calculate price estimate using district-based pricing
    function calculatePrice() {
        const weight = parseFloat(document.getElementById('weight').value) || 0;
        const pickupDistrictId = document.getElementById('pickup_district_id').value;
        const dropDistrictId = document.getElementById('drop_district_id').value;
        const packageType = document.querySelector('input[name="package_type"]:checked');
        
        if (weight > 0 && pickupDistrictId && dropDistrictId && packageType) {
            // Show loading state
            document.getElementById('priceEstimateContent').innerHTML = `
                <div class="text-center">
                    <div class="spinner-border spinner-border-sm text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2 mb-0 text-muted">Calculating price...</p>
                </div>
            `;
            
            // Make API call to get district-based pricing
            fetch('/api/pricing?' + new URLSearchParams({
                pickup_district_id: pickupDistrictId,
                drop_district_id: dropDistrictId,
                service_type: 'standard', // Default for mobile
                weight: weight
            }), {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const pricing = data.pricing;
                    document.getElementById('priceEstimateContent').innerHTML = `
                        <div class="text-center mb-3">
                            <h4 class="text-success mb-0">Rs. ${pricing.calculated_price}</h4>
                            <small class="text-muted">Estimated delivery: ${pricing.estimated_days} day(s)</small>
                        </div>
                        <div class="small">
                            <div class="d-flex justify-content-between mb-1">
                                <span>Base Rate:</span>
                                <span>Rs. ${pricing.base_rate}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span>Per KG (${weight}kg):</span>
                                <span>Rs. ${(pricing.per_kg_rate * weight).toFixed(2)}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span>Route:</span>
                                <span class="text-truncate ms-2">${pricing.pickup_district} → ${pricing.drop_district}</span>
                            </div>
                            <hr class="my-2">
                            <div class="d-flex justify-content-between">
                                <span>Min Charge:</span>
                                <span>Rs. ${pricing.minimum_charge}</span>
                            </div>
                            ${pricing.maximum_charge ? `
                            <div class="d-flex justify-content-between">
                                <span>Max Charge:</span>
                                <span>Rs. ${pricing.maximum_charge}</span>
                            </div>
                            ` : ''}
                        </div>
                    `;
                } else {
                    // Fallback to old pricing system
                    calculateFallbackPrice(weight);
                }
            })
            .catch(error => {
                console.error('Error calculating price:', error);
                // Fallback to old pricing system
                calculateFallbackPrice(weight);
            });
        } else {
            document.getElementById('priceEstimateContent').innerHTML = `
                <div class="text-center text-muted">
                    <i class="bi bi-info-circle me-2"></i>
                    Fill all required fields to get price estimation
                </div>
            `;
        }
    }
    
    // Fallback pricing calculation (original logic)
    function calculateFallbackPrice(weight) {
        const basePrice = 200;
        const weightPrice = weight * 50;
        const totalPrice = basePrice + weightPrice;
        
        document.getElementById('priceEstimateContent').innerHTML = `
            <div class="text-center mb-3">
                <h4 class="text-warning mb-0">Rs. ${totalPrice}</h4>
                <small class="text-muted">Standard rates applied</small>
            </div>
            <div class="small">
                <div class="d-flex justify-content-between mb-1">
                    <span>Base Price:</span>
                    <span>Rs. ${basePrice}</span>
                </div>
                <div class="d-flex justify-content-between mb-1">
                    <span>Weight (${weight}kg):</span>
                    <span>Rs. ${weightPrice}</span>
                </div>
            </div>
            <div class="alert alert-warning py-2 mt-2 mb-0">
                <small><i class="bi bi-exclamation-triangle me-1"></i> Using standard rates (district pricing not available)</small>
            </div>
        `;
    }
    
    // Weight input change
    document.getElementById('weight').addEventListener('input', calculatePrice);
    
    // Add event listeners for district changes and package type
    document.getElementById('pickup_district_id').addEventListener('change', calculatePrice);
    document.getElementById('drop_district_id').addEventListener('change', calculatePrice);
    document.querySelectorAll('input[name="package_type"]').forEach(radio => {
        radio.addEventListener('change', calculatePrice);
    });
    
    // Form validation and submission
    document.getElementById('courierForm').addEventListener('submit', function(e) {
        const requiredFields = [
            'pickup_district_id', 'pickup_address', 'drop_district_id', 
            'drop_address', 'recipient_name', 'recipient_phone', 'weight'
        ];
        
        let isValid = true;
        
        requiredFields.forEach(field => {
            const input = document.getElementById(field);
            if (!input.value.trim()) {
                input.classList.add('is-invalid');
                isValid = false;
            } else {
                input.classList.remove('is-invalid');
            }
        });
        
        // Check package type
        const packageType = document.querySelector('input[name="package_type"]:checked');
        if (!packageType) {
            isValid = false;
            alert('Please select a package type.');
        }
        
        // Check payment method
        const paymentMethod = document.querySelector('input[name="payment_method"]:checked');
        if (!paymentMethod) {
            isValid = false;
            alert('Please select a payment method.');
        }
        
        if (!isValid) {
            e.preventDefault();
            return;
        }
        
        // Show loading state
        const submitBtn = document.getElementById('submitBtn');
        submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>Booking...';
        submitBtn.disabled = true;
        
        showLoading();
    });
    
    // Add haptic feedback to radio buttons
    document.querySelectorAll('input[type="radio"]').forEach(radio => {
        radio.addEventListener('change', function() {
            if ('vibrate' in navigator) {
                navigator.vibrate(50);
            }
        });
    });
    
    // Real-time validation feedback
    document.querySelectorAll('input, select, textarea').forEach(field => {
        field.addEventListener('input', function() {
            if (this.value.trim()) {
                this.classList.remove('is-invalid');
                this.classList.add('is-valid');
            }
        });
        
        field.addEventListener('change', function() {
            if (this.value.trim()) {
                this.classList.remove('is-invalid');
                this.classList.add('is-valid');
            }
        });
    });
    
    // Auto-calculate price on page load if weight is set
    document.addEventListener('DOMContentLoaded', function() {
        calculatePrice();
    });
</script>
@endpush