@extends('layouts.admin')

@section('title', 'Create New Shipment')

@section('content')
<div class="min-h-screen bg-gradient-to-r from-indigo-50 via-white to-indigo-50 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-3xl mx-auto space-y-10">

        <h1 class="text-4xl font-extrabold text-gray-900 tracking-tight text-center">Create New Shipment</h1>

        @if(session('success'))
            <div class="p-4 mb-4 bg-green-100 text-green-800 rounded">
                {{ session('success') }}
            </div>
        @endif

        <form action="{{ route('admin.shipments.store') }}" method="POST" class="space-y-8 bg-white shadow-xl rounded-3xl p-8" id="shipmentForm">
            @csrf

            <!-- Step 1: Select Customer -->
            <div class="space-y-4">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">Step 1: Select Customer</h2>
                <div class="relative">
                    <select name="user_id" id="customerSelect" required
                        class="peer block w-full rounded-xl border @error('user_id') border-red-500 @else border-gray-300 @enderror bg-white py-3 px-4 text-gray-900 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        <option value="">Type to search customer...</option>
                        @foreach($customers as $customer)
                            <option value="{{ $customer->id }}" data-type="{{ $customer->customer_type }}" data-referral="{{ $customer->referral_count ?? 0 }}" {{ old('user_id') == $customer->id ? 'selected' : '' }}>
                                {{ $customer->name }} ({{ ucfirst($customer->customer_type) }}) - {{ $customer->phone }}
                            </option>
                        @endforeach
                    </select>
                    <label class="absolute left-4 -top-2 bg-white px-1 text-gray-500 text-sm">Select Customer</label>
                    @error('user_id') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
                </div>
            </div>

            <!-- Step 2: Parcel Details -->
            <div class="space-y-4">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">Step 2: Parcel Details</h2>
                <div class="grid md:grid-cols-2 gap-4">
                    <div class="relative">
                        <input type="text" name="receiver_name" value="{{ old('receiver_name') }}" required
                            class="peer block w-full rounded-xl border @error('receiver_name') border-red-500 @else border-gray-300 @enderror bg-white py-3 px-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder=" ">
                        <label class="absolute left-4 -top-2 bg-white px-1 text-gray-500 text-sm">Receiver Name</label>
                        @error('receiver_name') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div class="relative">
                        <input type="number" name="weight" value="{{ old('weight') }}" step="0.1" min="0.1" required
                            class="peer block w-full rounded-xl border @error('weight') border-red-500 @else border-gray-300 @enderror bg-white py-3 px-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder=" ">
                        <label class="absolute left-4 -top-2 bg-white px-1 text-gray-500 text-sm">Weight (kg)</label>
                        @error('weight') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>

                <div class="relative">
                    <textarea name="receiver_address" rows="3" required
                        class="peer block w-full rounded-xl border @error('receiver_address') border-red-500 @else border-gray-300 @enderror bg-white py-3 px-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder=" ">{{ old('receiver_address') }}</textarea>
                    <label class="absolute left-4 -top-2 bg-white px-1 text-gray-500 text-sm">Receiver Address</label>
                    @error('receiver_address') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
                </div>

                <!-- Step 2b: Drop-off Address -->
                <div class="relative">
                    <select name="shipment_address_id" required
                        class="peer block w-full rounded-xl border @error('shipment_address_id') border-red-500 @else border-gray-300 @enderror bg-white py-3 px-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        <option value="">Select Drop-off Point</option>
                        @foreach($shipmentAddresses as $address)
                            <option value="{{ $address->id }}" {{ old('shipment_address_id') == $address->id ? 'selected' : '' }}>
                                {{ $address->name }} - {{ $address->address }}
                            </option>
                        @endforeach
                    </select>
                    <label class="absolute left-4 -top-2 bg-white px-1 text-gray-500 text-sm">Drop-off Point</label>
                    @error('shipment_address_id') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="relative">
                    <textarea name="notes" rows="2"
                        class="peer block w-full rounded-xl border @error('notes') border-red-500 @else border-gray-300 @enderror bg-white py-3 px-4 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder=" ">{{ old('notes') }}</textarea>
                    <label class="absolute left-4 -top-2 bg-white px-1 text-gray-500 text-sm">Notes (Optional)</label>
                    @error('notes') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="grid md:grid-cols-3 gap-4">
                    <div class="relative">
                        <input type="text" name="tracking_number" readonly value="{{ old('tracking_number', 'TRK-'.date('Y').'-'.rand(100000,999999)) }}"
                            class="peer block w-full rounded-xl border border-gray-300 bg-gray-50 py-3 px-4 sm:text-sm">
                        <label class="absolute left-4 -top-2 bg-white px-1 text-gray-500 text-sm">Tracking Number</label>
                    </div>

                    <div class="relative">
                        <input type="text" id="shippingCost" readonly value="£0.00"
                            class="peer block w-full rounded-xl border border-gray-300 bg-gray-50 py-3 px-4 sm:text-sm">
                        <label class="absolute left-4 -top-2 bg-white px-1 text-gray-500 text-sm">Shipping Cost</label>
                    </div>

                    <div class="relative">
                        <input type="text" id="pointsEarned" readonly value="0"
                            class="peer block w-full rounded-xl border border-gray-300 bg-gray-50 py-3 px-4 sm:text-sm">
                        <label class="absolute left-4 -top-2 bg-white px-1 text-gray-500 text-sm">Points Earned</label>
                    </div>
                </div>

            </div>

            <!-- Pricing Breakdown -->
            <div class="space-y-4">
                <h2 class="text-2xl font-bold text-gray-900">Pricing Breakdown</h2>
                <div id="premiumBanner" class="hidden p-4 bg-yellow-100 text-yellow-700 rounded-xl shadow">Premium Pricing Applied - 10% Discount</div>

                <div class="space-y-2">
                    <div class="flex justify-between text-gray-700"><span>Original Price</span><span id="originalPrice">£0.00</span></div>
                    <div class="flex justify-between text-gray-700"><span>Discount</span><span id="discountAmount" class="text-green-600">£0.00</span></div>
                    <div class="flex justify-between font-bold text-lg text-indigo-600"><span>Final Payable Amount</span><span id="finalPrice">£0.00</span></div>
                </div>

                <div class="flex gap-4 mt-6">
                    <button type="submit" class="px-8 py-3 rounded-xl bg-indigo-600 text-white font-semibold hover:bg-indigo-700 transition">Create Shipment</button>
                    <a href="{{ route('admin.shipments.index') }}" class="px-8 py-3 rounded-xl bg-gray-200 text-gray-700 hover:bg-gray-300 transition">Cancel</a>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    const customerSelect = document.getElementById('customerSelect');
    const premiumBanner = document.getElementById('premiumBanner');
    const weightInput = document.querySelector('input[name="weight"]');
    const shippingCost = document.getElementById('shippingCost');
    const pointsEarned = document.getElementById('pointsEarned');
    const originalPrice = document.getElementById('originalPrice');
    const discountAmount = document.getElementById('discountAmount');
    const finalPrice = document.getElementById('finalPrice');

    const NORMAL_RATE = 4;   // £4 per kg
    const PREMIUM_RATE = 3;  // £3 per kg
    const POINTS_PER_KG = 10; // 1kg = 10 points
    const MIN_WEIGHT_FOR_POINTS = 10; // kg

    function formatGBP(value) {
        return `£${Number(value).toFixed(2)}`;
    }

    function calculatePrice() {
        let weight = parseFloat(weightInput.value) || 0;
        const selected = customerSelect.options[customerSelect.selectedIndex];
        const type = selected?.dataset?.type || '';
        const referralCount = parseInt(selected?.dataset?.referral || 0);

        // Premium rate
        let ratePerKg = (type === 'premium') ? PREMIUM_RATE : NORMAL_RATE;

        // Show premium banner
        if (type === 'premium') {
            premiumBanner.classList.remove('hidden');
        } else {
            premiumBanner.classList.add('hidden');
        }

        // Base price
        let basePrice = weight * NORMAL_RATE;

        // Final price
        let final = weight * ratePerKg;

        // Discount = difference
        let discount = basePrice - final;

        // Calculate points earned
        let points = 0;
        if(type === 'premium' || weight >= MIN_WEIGHT_FOR_POINTS) {
            points = weight * POINTS_PER_KG;
            if(type === 'premium') points *= 10; // premium multiplier
        }

        // Referral bonus points
        let referralPoints = 0;
        if(referralCount === 1) referralPoints = 100;
        else if(referralCount === 2) referralPoints = 300;
        else if(referralCount >= 3) referralPoints = 500;

        if(type === 'premium' && referralPoints > 0) referralPoints *= 10;

        // Update UI
        shippingCost.value = formatGBP(final);
        pointsEarned.value = points + referralPoints;
        originalPrice.innerText = formatGBP(basePrice);
        discountAmount.innerText = formatGBP(discount);
        finalPrice.innerText = formatGBP(final);
    }

    weightInput.addEventListener('input', calculatePrice);
    customerSelect.addEventListener('change', calculatePrice);

    calculatePrice();
</script>
@endsection