@extends('layouts.admin')

@section('title', 'Edit Shipment')

@section('content')
<div class="max-w-6xl mx-auto px-4 py-6">

    {{-- ================= PAGE HEADER ================= --}}
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Edit Shipment</h1>

            <div class="flex items-center gap-3 mt-1 text-sm">
                <span class="text-gray-500">
                    Tracking #: <strong>{{ $shipment->tracking_number }}</strong>
                </span>

                <span class="px-3 py-1 rounded-xl bg-indigo-100 text-indigo-700 font-semibold">
                    {{ ucfirst($shipment->customer->customer_type) }} Rate — £{{ number_format($ratePerKg, 2) }} / KG
                </span>
            </div>
        </div>

        <a href="{{ route('admin.shipments.show', $shipment->id) }}"
           class="px-4 py-2 rounded-xl bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium">
            ← Back
        </a>
    </div>

    {{-- ================= REWARD LOCK NOTICE ================= --}}
    @if($shipment->reward_locked)
        <div class="mb-6 rounded-xl border border-amber-300 bg-amber-50 px-6 py-4">
            <p class="font-semibold text-amber-800">Reward Points Applied</p>
            <p class="text-sm text-amber-700 mt-1">
                {{ number_format($shipment->free_weight_applied, 2) }} KG is locked and cannot be reduced.
            </p>
        </div>
    @endif

    {{-- ================= FORM ================= --}}
    <div class="bg-white shadow-2xl rounded-2xl border border-gray-200 overflow-hidden">

        <div class="px-6 py-4 bg-gradient-to-r from-indigo-600 to-blue-600 text-white">
            <h2 class="text-lg font-bold">Shipment Details</h2>
            <p class="text-sm opacity-90">Update shipment information & pricing</p>
        </div>

        <form id="updateForm"
              action="{{ route('admin.shipments.update', $shipment->id) }}"
              method="POST"
              class="p-6 space-y-6">

            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                <div>
                    <label class="text-sm font-semibold">Receiver Name</label>
                    <input type="text" name="receiver_name"
                           value="{{ old('receiver_name', $shipment->receiver_name) }}"
                           class="w-full mt-1 px-3 py-2 rounded-xl border">
                </div>

                <div>
                    <label class="text-sm font-semibold">Receiver Address</label>
                    <textarea name="receiver_address" rows="2"
                              class="w-full mt-1 px-3 py-2 rounded-xl border">{{ old('receiver_address', $shipment->receiver_address) }}</textarea>
                </div>

                <div>
                    <label class="text-sm font-semibold">Drop-off Address</label>
                    <select name="shipment_address_id" class="w-full mt-1 px-3 py-2 rounded-xl border">
                        @foreach($shipmentAddresses as $address)
                            <option value="{{ $address->id }}"
                                {{ $shipment->shipment_address_id == $address->id ? 'selected' : '' }}>
                                {{ $address->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="text-sm font-semibold">Weight (KG)</label>
                    <input type="number"
                           step="0.01"
                           id="weightInput"
                           name="weight"
                           min="{{ $shipment->reward_locked ? $shipment->free_weight_applied : 0 }}"
                           value="{{ old('weight', $shipment->weight) }}"
                           class="w-full mt-1 px-3 py-2 rounded-xl border">
                </div>

                <div>
                    <label class="text-sm font-semibold">Original Price (£)</label>
                    <input type="number"
                           step="0.01"
                           id="priceInput"
                           readonly
                           value="{{ number_format($shipment->weight * $ratePerKg, 2) }}"
                           class="w-full mt-1 px-3 py-2 rounded-xl border bg-gray-100 cursor-not-allowed">
                </div>

                <div>
                    <label class="text-sm font-semibold">Discount (£)</label>
                    <input type="number"
                           step="0.01"
                           id="discountInput"
                           name="discount_amount"
                           value="{{ old('discount_amount', $shipment->discount_amount) }}"
                           class="w-full mt-1 px-3 py-2 rounded-xl border">
                </div>

                <div>
                    <label class="text-sm font-semibold">Final Price (£)</label>
                    <input type="number"
                           step="0.01"
                           id="finalPriceInput"
                           readonly
                           value="{{ number_format(max($shipment->weight * $ratePerKg - $shipment->discount_amount, 0), 2) }}"
                           class="w-full mt-1 px-3 py-2 rounded-xl border bg-gray-100 cursor-not-allowed">
                </div>

                <div class="md:col-span-2">
                    <label class="text-sm font-semibold">Admin Notes</label>
                    <textarea name="notes" rows="3"
                              class="w-full mt-1 px-3 py-2 rounded-xl border">{{ old('notes', $shipment->notes) }}</textarea>
                </div>
            </div>

            <div class="flex justify-between pt-6 border-t">
                <button type="submit"
                        class="px-6 py-2 rounded-xl bg-indigo-600 text-white font-semibold">
                    Save Changes
                </button>
            </div>
        </form>
    </div>
</div>

{{-- ================= DYNAMIC PRICING SCRIPT ================= --}}
<script>
    const ratePerKg = {{ $ratePerKg }};
    const weightInput = document.getElementById('weightInput');
    const discountInput = document.getElementById('discountInput');
    const priceInput = document.getElementById('priceInput');
    const finalPriceInput = document.getElementById('finalPriceInput');

    function recalcPrice() {
        const weight = parseFloat(weightInput.value) || 0;
        const discount = parseFloat(discountInput.value) || 0;

        const originalPrice = weight * ratePerKg;
        const finalPrice = Math.max(originalPrice - discount, 0);

        priceInput.value = originalPrice.toFixed(2);
        finalPriceInput.value = finalPrice.toFixed(2);
    }

    weightInput.addEventListener('input', recalcPrice);
    discountInput.addEventListener('input', recalcPrice);

    // Run once on page load
    recalcPrice();
</script>
@endsection