@extends('layouts.app')

@section('content')
<div class="p-6">
    <div class="mb-6">
        <h2 class="text-2xl font-bold dark:text-white">Update {{ $type }} Costs (PDF)</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">Upload an invoice PDF file. Our AI Agent will automatically extract the AWB numbers, weights, and costs.</p>
    </div>

    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline">{{ session('success') }}</span>
        </div>
    @endif
    @if(session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline">{{ session('error') }}</span>
        </div>
    @endif
    @if($errors->any())
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4">
            <ul class="list-disc list-inside">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 max-w-2xl">
        <form action="{{ $route }}" method="POST" enctype="multipart/form-data" onsubmit="document.getElementById('submitBtn').disabled = true; document.getElementById('btnText').style.display = 'none'; document.getElementById('loadingSpinner').style.display = 'inline-block';">
            @csrf
            
            <div class="mb-4">
                <label for="courier_service" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Courier Service <span class="text-red-500">*</span></label>
                <select name="courier_service" id="courier_service" class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" required>
                    <option value="">Select a Courier</option>
                    @foreach($couriers as $courier)
                        <option value="{{ $courier }}">{{ $courier }}</option>
                    @endforeach
                </select>
                <p class="text-xs text-gray-500 mt-1">Select the courier service corresponding to the AWB numbers in the PDF invoice.</p>
            </div>

            <div class="mb-6">
                <label for="pdf_file" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Invoice PDF File <span class="text-red-500">*</span></label>
                <input type="file" name="pdf_file" id="pdf_file" accept=".pdf" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100" required>
                <p class="text-xs text-gray-500 mt-1">Upload a PDF invoice. The AI agent will parse the text to find Waybills, Weights, and Totals.</p>
            </div>

            <div class="flex justify-end">
                <button type="submit" id="submitBtn" class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors flex items-center justify-center">
                    <span id="btnText"><i class="fas fa-magic mr-1"></i> Extract & Update</span>
                    <svg id="loadingSpinner" class="animate-spin h-5 w-5 text-white" style="display: none;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </button>
            </div>
        </form>
    </div>
</div>
@endsection