@extends('layouts.app')

@section('title', 'New Rental')

@section('content')
<div class="mb-8">
    <a href="{{ route('rentals.index') }}" class="text-blue-600 hover:text-blue-800 flex items-center gap-2 mb-4">
        <i class="fas fa-arrow-left"></i> Back to Rentals
    </a>
    <h2 class="text-3xl font-bold text-gray-800">New Rental</h2>
</div>

<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
    <form action="{{ route('rentals.store') }}" method="POST" id="rentalForm">
        @csrf
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Car</label>
                <select name="car_id" id="carSelect" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-amber-500">
                    <option value="">Select a car</option>
                    @foreach($cars as $car)
                    <option value="{{ $car->id }}" data-daily-rate="{{ $car->daily_rate }}">{{ $car->brand }} {{ $car->model }} - BHD {{ $car->daily_rate }}/day</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Customer</label>
                <select name="customer_id" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-amber-500">
                    <option value="">Select a customer</option>
                    @foreach($customers as $customer)
                    <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Rental Type</label>
                <select name="rental_type" id="rentalType" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-amber-500">
                    <option value="daily" data-days="1">Daily</option>
                    <option value="weekly" data-days="7">Weekly</option>
                    <option value="monthly" data-days="30">Monthly</option>
                    <option value="lease" data-days="365">Lease (1 Year)</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Start Date</label>
                <input type="date" name="start_date" id="startDate" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-amber-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Pickup Time</label>
                <input type="time" name="pickup_time" id="pickupTime" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-amber-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">End Date</label>
                <input type="date" name="end_date" id="endDate" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-amber-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Return Time</label>
                <input type="time" name="return_time" id="returnTime" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-amber-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Total Amount (BHD)</label>
                <input type="number" name="total_amount" id="totalAmount" step="0.01" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-amber-500" readonly>
                <p class="text-xs text-gray-500 mt-1" id="priceInfo">Select a car to see pricing</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Advance Payment (BHD)</label>
                <input type="number" name="advance_payment" id="advancePayment" step="0.01" value="0" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-amber-500">
            </div>
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                <textarea name="notes" rows="3" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
            </div>
        </div>
        <div class="mt-6">
            <button type="submit" class="bg-amber-600 text-white px-8 py-3 rounded-xl hover:bg-amber-700">Create Rental</button>
        </div>
    </form>
</div>

<script>
    const carSelect = document.getElementById('carSelect');
    const rentalType = document.getElementById('rentalType');
    const startDate = document.getElementById('startDate');
    const endDate = document.getElementById('endDate');
    const totalAmount = document.getElementById('totalAmount');
    const priceInfo = document.getElementById('priceInfo');
    const advancePayment = document.getElementById('advancePayment');

    // Pricing multipliers for each rental type
    const pricing = {
        daily: 1,
        weekly: 0.9,    // 10% discount
        monthly: 0.8,   // 20% discount
        lease: 0.7      // 30% discount
    };

    function calculatePrice() {
        const selectedOption = carSelect.options[carSelect.selectedIndex];
        const dailyRate = parseFloat(selectedOption.dataset.dailyRate) || 0;
        const rentalTypeOption = rentalType.options[rentalType.selectedIndex];
        const days = parseInt(rentalTypeOption.dataset.days) || 1;

        if (!dailyRate || !days) {
            priceInfo.textContent = 'Select a car and rental type to see pricing';
            return;
        }

        const multiplier = pricing[rentalType.value];
        let total = 0;
        let infoText = '';

        if (rentalType.value === 'lease') {
            total = dailyRate * days * multiplier;
            infoText = `Lease (365 days) @ BHD ${dailyRate}/day with ${(1-multiplier)*100}% discount`;
        } else {
            // Calculate based on actual dates if available
            if (startDate.value && endDate.value) {
                const start = new Date(startDate.value);
                const end = new Date(endDate.value);
                const diffTime = Math.abs(end - start);
                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
                
                total = dailyRate * diffDays * multiplier;
                infoText = `${diffDays} days @ BHD ${dailyRate}/day with ${(1-multiplier)*100}% discount`;
            } else {
                total = dailyRate * days * multiplier;
                infoText = `${days} days @ BHD ${dailyRate}/day with ${(1-multiplier)*100}% discount`;
            }
        }

        totalAmount.value = total.toFixed(2);
        priceInfo.textContent = infoText;
        
        // Auto-set advance payment to 50% of total
        advancePayment.value = (total * 0.5).toFixed(2);
    }

    carSelect.addEventListener('change', calculatePrice);
    rentalType.addEventListener('change', calculatePrice);
    startDate.addEventListener('change', calculatePrice);
    endDate.addEventListener('change', calculatePrice);
</script>
@endsection