@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.</p>
        @if($importRequest->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">{{ $importRequest->awbUpdater->name }}</span>
                            @if($importRequest->awb_updated_at)
                                on <span class="font-semibold">{{ $importRequest->awb_updated_at->format('M d, Y h:i A') }}</span>
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        @endif
    <form action="{{ route('import_requests.details.update', $importRequest->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>

                        @php
                            $couriers = ['DHL', 'FedEx', 'Aramex', 'SCS', 'UPS'];
                        @endphp

                        @foreach ($couriers as $c)
                            <option value="{{ $c }}" 
                                {{ old('courier_service', $importRequest->courier_service) == $c ? 'selected' : '' }}>
                                {{ $c }}
                            </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', $importRequest->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', $importRequest->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', $importRequest->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</label>
                    <input 
                        type="number" 
                        step="0.01" 
                        name="actual_weight"
                        value="{{ old('actual_weight', $importRequest->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>

                {{-- Attachment --}}
                <div class="col-span-1 md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Attachment</label>
                    <input 
                        type="file" 
                        name="other_attachment"
                        class="block w-full text-sm text-gray-500
                            file:mr-4 file:py-2 file:px-4
                            file:rounded-full file:border-0
                            file:text-sm file:font-semibold
                            file:bg-indigo-50 file:text-indigo-700
                            hover:file:bg-indigo-100 @error('other_attachment') border-red-500 @enderror"
                    >
                    @error('other_attachment')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                    @if($importRequest->other_attachment)
                        <div class="mt-2 text-sm">
                            <span class="text-gray-600">Current file:</span>
                            <a href="{{ route('import_requests.download_other_attachment', $importRequest->id) }}" class="text-indigo-600 hover:text-indigo-800 underline" target="_blank">
                                View Attachment
                            </a>
                        </div>
                    @endif
                </div>

            </div>
        </div>

        {{-- Remarks --}}
        <div class="relative z-20 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">Remarks</h2>

            <textarea 
                name="remarks" 
                rows="3"
                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"
            >{{ old('remarks', $importRequest->remarks) }}</textarea>

        </div>

        {{-- Buttons --}}
        <div class="flex items-center justify-end space-x-4">
            {{-- Back Button --}}
            <a href="{{ route('import_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>
@endsection