@php
    $isEditable = $isEditable ?? true;
@endphp
<div class="space-y-6">
    <div class="text-center mb-6">
        <h2 class="text-xl font-semibold text-slate-200 mb-2">هزینه‌های جانبی</h2>
        <p class="text-slate-400">هزینه‌های حمل، بیمه، ترخیص و سایر هزینه‌های اضافی را ثبت کنید</p>
    </div>

    <!-- Add Cost Form -->
    <div class="glass p-4 rounded-xl">
        <h3 class="text-lg font-medium text-slate-200 mb-4">افزودن هزینه جدید</h3>
        
        <form id="addCostForm" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">عنوان هزینه *</label>
                    <input type="text" name="title" placeholder="مثال: هزینه حمل، بیمه، ترخیص" 
                           class="form-input w-full" required {{ !$isEditable ? 'disabled' : '' }}>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">مبلغ *</label>
                    <input type="number" name="amount" step="0.01" min="0" 
                           placeholder="0.00" class="form-input w-full" required {{ !$isEditable ? 'disabled' : '' }}>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">ارز</label>
                    <select name="currency" class="form-select w-full" {{ !$isEditable ? 'disabled' : '' }}>
                        <option value="IRR">IRR</option>
                        <option value="USD">USD</option>
                        <option value="EUR">EUR</option>
                        <option value="GBP">GBP</option>
                    </select>
                </div>
            </div>
            
            <div class="text-left">
                @if($isEditable)
                <button type="submit" class="btn-primary">
                    <span class="text-lg">➕</span>
                    افزودن هزینه
                </button>
                @endif
            </div>
        </form>
    </div>

    <!-- Costs List -->
    @if(isset($purchaseRequest) && $purchaseRequest->costs->count() > 0)
    <div class="glass rounded-xl overflow-hidden">
        <div class="px-4 py-3 bg-slate-800/50 border-b border-slate-700">
            <h3 class="text-lg font-medium text-slate-200">هزینه‌های ثبت شده</h3>
        </div>
        
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-slate-800/30">
                    <tr>
                        <th class="px-4 py-3 text-right text-sm font-medium text-slate-300">عنوان</th>
                        <th class="px-4 py-3 text-right text-sm font-medium text-slate-300">مبلغ</th>
                        <th class="px-4 py-3 text-right text-sm font-medium text-slate-300">ارز</th>
                        <th class="px-4 py-3 text-right text-sm font-medium text-slate-300">عملیات</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-700">
                    @foreach($purchaseRequest->costs as $cost)
                    <tr class="hover:bg-slate-800/30 transition-colors">
                        <td class="px-4 py-4 text-sm text-slate-200">{{ $cost->title }}</td>
                        <td class="px-4 py-4 text-sm text-slate-200">{{ number_format($cost->amount) }}</td>
                        <td class="px-4 py-4 text-sm text-slate-200">{{ $cost->currency }}</td>
                        <td class="px-4 py-4 text-sm">
                            @if($isEditable)
                            <button type="button" onclick="deleteCost({{ $cost->id }})" 
                                    class="text-red-400 hover:text-red-300 transition-colors">
                                <span class="text-lg">🗑️</span>
                            </button>
                            @else
                            <span class="text-slate-500 text-sm">غیرقابل ویرایش</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
                <tfoot class="bg-slate-800/50">
                    <tr>
                        <td class="px-4 py-3 text-sm font-medium text-slate-200">مجموع هزینه‌ها:</td>
                        <td class="px-4 py-3 text-sm font-medium text-slate-200">
                            {{ number_format($purchaseRequest->costs->sum('amount')) }}
                        </td>
                        <td class="px-4 py-3 text-sm text-slate-200">
                            {{ $purchaseRequest->currency ?? 'IRR' }}
                        </td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    @else
        <div class="text-center py-12 text-slate-400">
            <div class="text-4xl mb-2">💰</div>
            <p>هنوز هزینه‌ای ثبت نشده است.</p>
            <p class="text-sm mt-1">در صورت نیاز، هزینه‌های اضافی را اضافه کنید.</p>
        </div>
    @endif

    <!-- Total Calculation Preview -->
    @if(isset($purchaseRequest) && $purchaseRequest->items->count() > 0)
    <div class="glass p-4 rounded-xl">
        <h3 class="text-lg font-medium text-slate-200 mb-4">محاسبه مبلغ کل</h3>
        
        <div class="space-y-3">
            <div class="flex justify-between items-center">
                <span class="text-slate-300">مجموع محصولات:</span>
                <span class="text-slate-200">
                    @php
                        $itemsTotal = $purchaseRequest->items->sum(function($item) {
                            $selectedOffer = $item->offers->where('is_selected', true)->first();
                            return $selectedOffer && $selectedOffer->price ? $selectedOffer->price * $item->quantity : 0;
                        });
                    @endphp
                    {{ number_format($itemsTotal) }} {{ $purchaseRequest->currency ?? 'IRR' }}
                </span>
            </div>
            
            <div class="flex justify-between items-center">
                <span class="text-slate-300">مجموع هزینه‌ها:</span>
                <span class="text-slate-200">
                    {{ number_format($purchaseRequest->costs->sum('amount')) }} {{ $purchaseRequest->currency ?? 'IRR' }}
                </span>
            </div>
            
            <div class="border-t border-slate-600 pt-3">
                <div class="flex justify-between items-center text-lg font-medium">
                    <span class="text-slate-200">مبلغ کل:</span>
                    <span class="text-blue-400">
                        {{ number_format($purchaseRequest->calculated_total) }} {{ $purchaseRequest->currency ?? 'IRR' }}
                    </span>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

@push('styles')
<style>
    .btn-success {
        @apply inline-flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors;
    }
</style>
@endpush

@push('scripts')
<script>
// Add cost form submission
document.getElementById('addCostForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    fetch('{{ isset($purchaseRequest) ? route("purchase_requests.costs.store", $purchaseRequest) : "#" }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(Object.fromEntries(formData)),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            window.location.reload();
        } else {
            alert('خطا: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('خطا در ارتباط با سرور');
    });
});

function deleteCost(costId) {
    if (confirm('آیا از حذف این هزینه اطمینان دارید؟')) {
        fetch('{{ isset($purchaseRequest) ? route("purchase_requests.costs.destroy", ["purchase_request" => $purchaseRequest, "cost" => "COST_ID"]) : "#" }}'.replace('COST_ID', costId), {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                window.location.reload();
            } else {
                alert('خطا: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('خطا در ارتباط با سرور');
        });
    }
}
</script>
@endpush