@extends('layouts.app')

@section('title', 'Bulk Status Update')
@section('page-title', 'Bulk Status Update')

@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 Section -->
    <div class="mb-8 text-center">
        <h2 class="text-3xl font-bold text-gray-800">Bulk Status Update</h2>
        <h3 class="text-xl text-purple-600 urdu-font mt-2">ایک ساتھ اسٹیٹس اپ ڈیٹ کریں</h3>
        <p class="text-gray-500 mt-2">Enter multiple CNTR numbers to update their status simultaneously</p>
    </div>

    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="bg-gradient-to-r from-purple-600 to-indigo-600 px-6 py-3">
            <h3 class="text-base font-semibold text-white flex items-center justify-between">
                <span><i class="fas fa-edit mr-2"></i> Update Details</span>
                <span class="urdu-font text-purple-100 text-sm">تفصیلات اپ ڈیٹ کریں</span>
            </h3>
        </div>

        <form action="{{ route('bookings.bulk-status.process') }}" method="POST" class="p-6">
            @csrf
            
            <div class="space-y-6">
                <!-- CNTR Numbers -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        CNTR Numbers (One per line or comma separated) 
                        <span class="urdu-font float-right text-gray-500 text-xs">کنٹینر نمبرز (ہر لائن میں ایک یا کوما سے الگ کریں)</span>
                    </label>
                    <div class="relative rounded-md shadow-sm">
                        <textarea name="cntr_list" rows="10" required
                            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 text-sm"
                            placeholder="CNTR-2024-001&#10;CNTR-2024-002&#10;CNTR-2024-003"></textarea>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Status -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            New Status <span class="urdu-font float-right text-gray-500 text-xs">نیا اسٹیٹس</span>
                        </label>
                        <select name="status" required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-purple-600 transition duration-150 ease-in-out">
                            <option value="">Select Status</option>
                            <option value="Pending">Pending</option>
                            <option value="Loaded">Loaded</option>
                            <option value="In Transit">In Transit</option>
                            <option value="Arrived">Arrived</option>
                            <option value="Delivered">Delivered</option>
                            <option value="Damaged">Damaged</option>
                        </select>
                    </div>

                    <!-- Location -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            Current Location <span class="urdu-font float-right text-gray-500 text-xs">موجودہ مقام</span>
                        </label>
                        <input type="text" name="location" required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-purple-600 transition duration-150 ease-in-out"
                            placeholder="e.g. Dubai Port, Karachi Warehouse">
                    </div>
                </div>

                <!-- Remarks -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        Remarks (Optional) <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-purple-600 focus:border-purple-600 transition duration-150 ease-in-out"
                        placeholder="Any additional notes..."></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-purple-600 to-indigo-600 text-white font-bold rounded-lg hover:from-purple-700 hover:to-indigo-700 shadow-md transform hover:-translate-y-0.5 transition-all duration-150 ease-in-out">
                    <i class="fas fa-save mr-2"></i> Update Status
                </button>
            </div>
        </form>
    </div>
</div>
@endsection