@extends('layouts.app')

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

    {{-- Page Header --}}
    <div class="mb-8">
        <h1 class="text-3xl font-extrabold text-gray-900">Other Details</h1>
        <p class="mt-2 text-gray-500">Update additional shipment information for Export Request #{{ $exportRequest->id }}</p>
        @if($exportRequest->awbUpdater)
            <div class="mt-4 bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-md shadow-sm">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-blue-700">
                            The AWB was created by <span class="font-semibold">{{ $exportRequest->awbUpdater->name }}</span>
                            @if($exportRequest->awb_updated_at)
                                on <span class="font-semibold">{{ $exportRequest->awb_updated_at->format('M d, Y h:i A') }}</span>
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        @endif
    </div>

    <form action="{{ route('export_request_details.update', $exportRequest->id) }}" method="POST" class="space-y-10" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        {{-- Details Card --}}
        <div class="relative z-30 bg-white/80 backdrop-blur-lg shadow-lg rounded-2xl p-6 border border-gray-200">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">Courier & Shipment Info</h2>

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

                {{-- Courier Service --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Courier Service</label>
                    <select 
                        name="courier_service"
                        class="rounded-xl border-gray-300 bg-white/80 backdrop-blur-sm focus:ring-indigo-500 
                            focus:border-indigo-500 w-full px-3 py-2 shadow-sm @error('courier_service') border-red-500 @enderror"
                    >
                        <option value="">-- Select --</option>
                        @foreach(['DHL', 'FedEx', 'Aramex', 'SCS', 'UPS'] as $service)
                            <option value="{{ $service }}" {{ old('courier_service', $exportRequest->courier_service) == $service ? 'selected' : '' }}>
                                {{ $service }}
                            </option>
                        @endforeach
                    </select>
                    @error('courier_service')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- AWB No --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">AWB No</label>
                    <input 
                        type="text" 
                        name="awb_no" 
                        value="{{ old('awb_no', $exportRequest->awb_no) }}" 
                        class="rounded-xl border-gray-300 bg-white/80 backdrop-blur-sm focus:ring-indigo-500 
                               focus:border-indigo-500 w-full px-3 py-2 shadow-sm @error('awb_no') border-red-500 @enderror"
                    >
                    @error('awb_no')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Reference --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Reference</label>
                    <input 
                        type="text" 
                        name="shipment_reference" 
                        value="{{ old('shipment_reference', $exportRequest->shipment_reference) }}" 
                        class="rounded-xl border-gray-300 bg-white/80 backdrop-blur-sm focus:ring-indigo-500 
                               focus:border-indigo-500 w-full px-3 py-2 shadow-sm"
                    >
                </div>

                {{-- Cost --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Cost</label>
                    <input 
                        type="number" 
                        step="0.01" 
                        name="cost" 
                        value="{{ old('cost', $exportRequest->cost) }}" 
                        class="rounded-xl border-gray-300 bg-white/80 backdrop-blur-sm focus:ring-indigo-500 
                               focus:border-indigo-500 w-full px-3 py-2 shadow-sm"
                    >
                </div>

                {{-- Actual Weight --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Actual Weight (kg)</label>
                    <input 
                        type="number" 
                        step="0.01" 
                        name="actual_weight" 
                        value="{{ old('actual_weight', $exportRequest->actual_weight) }}" 
                        class="rounded-xl border-gray-300 bg-white/80 backdrop-blur-sm focus:ring-indigo-500 
                               focus:border-indigo-500 w-full px-3 py-2 shadow-sm"
                    >
                </div>

                {{-- Other Attachment --}}
                <div class="col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Other Attachment</label>
                    <input type="file" name="other_attachment" class="rounded-xl border-gray-300 bg-white/80 w-full px-3 py-2 shadow-sm @error('other_attachment') border-red-500 @enderror">
                    @error('other_attachment')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                    @if($exportRequest->other_attachment)
                        <div class="mt-2 text-sm">
                            <span class="text-gray-600">Current file:</span>
                            <a href="{{ route('export_requests.download_other_attachment', $exportRequest->id) }}" class="text-indigo-600 hover:text-indigo-800 underline" target="_blank">
                                View Attachment
                            </a>
                        </div>
                    @endif
                </div>

                {{-- Service Type (Visible only for FedEx) --}}
                <div id="service-type-container" class="hidden">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Service Type</label>
                    <select 
                        name="service_type"
                        class="rounded-xl border-gray-300 bg-white/80 backdrop-blur-sm focus:ring-indigo-500 
                            focus:border-indigo-500 w-full px-3 py-2 shadow-sm @error('service_type') border-red-500 @enderror"
                    >
                        <option value="FEDEX_INTERNATIONAL_PRIORITY" {{ old('service_type', $exportRequest->service_type) == 'FEDEX_INTERNATIONAL_PRIORITY' ? 'selected' : '' }}>FEDEX_INTERNATIONAL_PRIORITY</option>
                        <option value="FEDEX_INTERNATIONAL_PRIORITY_EXPRESS" {{ old('service_type', $exportRequest->service_type) == 'FEDEX_INTERNATIONAL_PRIORITY_EXPRESS' ? 'selected' : '' }}>FEDEX_INTERNATIONAL_PRIORITY_EXPRESS</option>
                        <option value="INTERNATIONAL_FIRST" {{ old('service_type', $exportRequest->service_type) == 'INTERNATIONAL_FIRST' ? 'selected' : '' }}>INTERNATIONAL_FIRST</option>
                    </select>
                    @error('service_type')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

            </div>
        </div>

        {{-- Buttons --}}
        <div class="flex items-center justify-end space-x-4">
            {{-- Back Button --}}
            <a href="{{ route('export_requests.index') }}"
                class="px-4 py-2 rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300">
                Back
            </a>

            {{-- Submit --}}
            <button type="submit"
                class="px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 shadow-sm focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Save Details
            </button>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const courierSelect = document.querySelector('select[name="courier_service"]');
        const serviceTypeContainer = document.getElementById('service-type-container');
        
        function toggleServiceType() {
            if (courierSelect.value === 'FedEx') {
                serviceTypeContainer.classList.remove('hidden');
            } else {
                serviceTypeContainer.classList.add('hidden');
            }
        }

        courierSelect.addEventListener('change', toggleServiceType);
        toggleServiceType(); // Run on load
    });
</script>
@endsection