@extends('layouts.app')

@section('title', 'Receive Shipment')
@section('page-title', 'Receive Shipment')

@section('content')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;700&display=swap');
    .urdu-font {
        font-family: 'Noto Nastaliq Urdu', serif;
        direction: rtl;
    }
</style>

<div class="max-w-4xl mx-auto">
    <!-- Header -->
    <div class="mb-8 text-center">
        <h2 class="text-3xl font-bold text-gray-800">Receive Shipment</h2>
        <h3 class="text-xl text-purple-600 urdu-font mt-2">شپمنٹ وصول کریں</h3>
    </div>

    <!-- Search Section -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
        <div class="p-6">
            <form action="{{ route('bookings.receive') }}" method="GET" class="flex flex-col md:flex-row gap-4">
                <div class="flex-1">
                    <label for="cntr_no" class="sr-only">CNTR Number</label>
                    <input type="text" name="cntr_no" id="cntr_no" value="{{ request('cntr_no') }}" 
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-purple-600 transition duration-150 ease-in-out font-mono"
                        placeholder="Enter CNTR Number (e.g., CNTR-2024-001)" required autofocus>
                </div>
                <button type="submit" class="px-6 py-3 bg-purple-600 text-white font-bold rounded-lg hover:bg-purple-700 shadow-md transition duration-150 ease-in-out whitespace-nowrap">
                    <i class="fas fa-search mr-2"></i> Search
                </button>
            </form>
        </div>
    </div>

    @if(isset($booking))
    <!-- Booking Details & Action Form -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden animate-fade-in-up">
        <div class="bg-gradient-to-r from-green-600 to-teal-600 px-6 py-3">
            <h3 class="text-base font-semibold text-white flex items-center justify-between">
                <span><i class="fas fa-box-open mr-2"></i> Shipment Details</span>
                <span class="text-white text-sm opacity-90 font-mono">{{ $booking->cntr_no }}</span>
            </h3>
        </div>

        <form action="{{ route('bookings.process-receive', $booking) }}" method="POST" class="p-6">
            @csrf
            
            <!-- Read-only Info -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8 bg-gray-50 p-4 rounded-lg border border-gray-100">
                <div>
                    <p class="text-xs text-gray-500 uppercase tracking-wider">Sender</p>
                    <p class="font-semibold text-gray-800">{{ $booking->customer->name ?? 'N/A' }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 uppercase tracking-wider">Route</p>
                    <p class="font-semibold text-gray-800">{{ $booking->pickup_location }} <i class="fas fa-arrow-right mx-2 text-gray-400"></i> {{ $booking->delivery_location }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 uppercase tracking-wider">Description</p>
                    <p class="font-semibold text-gray-800">{{ $booking->cargo_description }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 uppercase tracking-wider">Current Status</p>
                    <span class="inline-flex mt-1 px-2.5 py-0.5 rounded-full text-xs font-medium {{ $booking->status === 'Delivered' ? 'bg-green-100 text-green-800' : 'bg-blue-100 text-blue-800' }}">
                        {{ $booking->status }}
                    </span>
                </div>
            </div>

            <div class="space-y-6">
                <div class="border-b border-gray-200 pb-2 mb-4 mt-8">
                    <h4 class="text-lg font-bold text-gray-800 flex items-center">
                        <i class="fas fa-money-bill-wave text-green-600 mr-2"></i> Payment Details 
                        <span class="urdu-font text-gray-500 text-sm font-normal ml-auto">ادائیگی کی تفصیلات</span>
                    </h4>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 bg-yellow-50 p-4 rounded-lg border border-yellow-100">
                    <div>
                        <p class="text-xs text-gray-500 uppercase tracking-wider">Total Amount</p>
                        <p class="font-bold text-xl text-gray-800">Rs. {{ number_format($booking->total_amount, 2) }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 uppercase tracking-wider">Paid Amount</p>
                        <p class="font-bold text-xl text-green-600">Rs. {{ number_format($booking->advance_payment, 2) }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 uppercase tracking-wider">Due Amount</p>
                        <p class="font-bold text-xl text-red-600">Rs. {{ number_format($booking->due_payment, 2) }}</p>
                    </div>
                </div>

                @if($booking->due_payment > 0)
                <div class="bg-red-50 p-4 rounded-lg border border-red-100 mt-4">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Collect Payment <span class="urdu-font float-right text-gray-500 text-xs">رقم وصول کریں</span>
                    </label>
                    <div class="flex items-center gap-4">
                        <div class="relative flex-1">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <span class="text-gray-500 sm:text-sm">Rs.</span>
                            </div>
                            <input type="number" name="payment_collected" min="0" max="{{ $booking->due_payment }}" step="0.01"
                                class="w-full pl-10 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-600 focus:border-green-600 transition duration-150 ease-in-out"
                                placeholder="Enter amount to collect">
                        </div>
                        <div class="flex items-center h-full">
                            <input type="checkbox" id="full_payment" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
                                onchange="document.querySelector('input[name=payment_collected]').value = this.checked ? {{ $booking->due_payment }} : ''">
                            <label for="full_payment" class="ml-2 block text-sm text-gray-900">
                                Full Payment
                            </label>
                        </div>
                    </div>
                    <p class="text-xs text-gray-500 mt-2">Enter the amount being collected now. Check "Full Payment" to collect the entire due amount.</p>
                </div>
                @endif

                <div class="border-b border-gray-200 pb-2 mb-4 mt-8">
                    <h4 class="text-lg font-bold text-gray-800 flex items-center">
                        <i class="fas fa-user-check text-green-600 mr-2"></i> Receiver Details 
                        <span class="urdu-font text-gray-500 text-sm font-normal ml-auto">وصول کنندہ کی تفصیلات</span>
                    </h4>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Receiver Name -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            Receiver Name <span class="urdu-font float-right text-gray-500 text-xs">وصول کنندہ کا نام</span>
                        </label>
                        <input type="text" name="receiver_name" value="{{ old('receiver_name', $booking->receiver_name) }}" required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-600 focus:border-green-600 transition duration-150 ease-in-out">
                    </div>

                    <!-- Receiver Mobile -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            Receiver Mobile <span class="urdu-font float-right text-gray-500 text-xs">موبائل نمبر</span>
                        </label>
                        <input type="text" name="receiver_phone" value="{{ old('receiver_phone', $booking->receiver_phone) }}" required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-600 focus:border-green-600 transition duration-150 ease-in-out">
                    </div>

                    <!-- Receiver CNIC -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            Receiver CNIC <span class="urdu-font float-right text-gray-500 text-xs">شناختی کارڈ نمبر</span>
                        </label>
                        <input type="text" name="receiver_cnic" value="{{ old('receiver_cnic', $booking->receiver_cnic) }}"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-600 focus:border-green-600 transition duration-150 ease-in-out"
                            placeholder="XXXXX-XXXXXXX-X">
                    </div>

                    <!-- Location (Delivery Point) -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            Received At (Location) <span class="urdu-font float-right text-gray-500 text-xs">کس مقام پر وصول کیا</span>
                        </label>
                        <input type="text" name="location" value="{{ old('location', $booking->delivery_location) }}" required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-600 focus:border-green-600 transition duration-150 ease-in-out">
                    </div>
                </div>

                <!-- Remarks -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Remarks <span class="urdu-font float-right text-gray-500 text-xs">ریمارکس</span>
                    </label>
                    <textarea name="remarks" rows="2"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-600 focus:border-green-600 transition duration-150 ease-in-out"
                        placeholder="e.g. Received in good condition..."></textarea>
                </div>
            </div>

            <div class="mt-8 pt-6 border-t border-gray-100 flex justify-end gap-4">
                <a href="{{ route('bookings.index') }}" class="px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-lg hover:bg-gray-200 transition duration-150 ease-in-out">
                    Cancel
                </a>
                <button type="submit" class="px-6 py-2.5 bg-gradient-to-r from-green-600 to-teal-600 text-white font-bold rounded-lg hover:from-green-700 hover:to-teal-700 shadow-md transform hover:-translate-y-0.5 transition-all duration-150 ease-in-out">
                    <i class="fas fa-check-circle mr-2"></i> Confirm Received
                </button>
            </div>
        </form>
    </div>
    @elseif(request('cntr_no'))
    <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded-md shadow-sm animate-fade-in">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-exclamation-circle text-red-500"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm text-red-700">
                    No booking found with CNTR Number: <strong>{{ request('cntr_no') }}</strong>
                </p>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection