143 lines
7.5 KiB
PHP
143 lines
7.5 KiB
PHP
@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 |