@extends('admin.layouts.app')

@section('title', 'Shipping Management')

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div>
        <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Shipping Management</h1>
        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Configure shipping charges and classes</p>
    </div>

    @if(session('success'))
    <div class="bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-800 text-emerald-700 dark:text-emerald-400 px-4 py-3 rounded-xl">
        {{ session('success') }}
    </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Shipping Charges (Global Rates) -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700">
            <div class="p-6 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center">
                <div>
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white">Shipping Charges</h2>
                    <p class="text-sm text-slate-500">Global shipping rates by area</p>
                </div>
                <button onclick="openChargeModal()" class="px-3 py-2 bg-indigo-600 text-white rounded-xl text-sm hover:bg-indigo-700">
                    <i data-lucide="plus" class="w-4 h-4 inline mr-1"></i> Add
                </button>
            </div>
            <div class="p-6">
                <div class="space-y-3">
                    @forelse($shippingCharges as $charge)
                    <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-700/50 rounded-xl">
                        <div>
                            <p class="font-medium text-slate-800 dark:text-white">{{ $charge->name }}</p>
                            <p class="text-lg font-bold text-indigo-600">৳{{ number_format($charge->amount) }}</p>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 text-xs rounded-full {{ $charge->status ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700' }}">
                                {{ $charge->status ? 'Active' : 'Inactive' }}
                            </span>
                            <button onclick="editCharge({{ $charge->id }}, '{{ $charge->name }}', {{ $charge->amount }})" class="p-2 hover:bg-slate-200 dark:hover:bg-slate-600 rounded-lg">
                                <i data-lucide="edit" class="w-4 h-4 text-slate-500"></i>
                            </button>
                            <form action="{{ route('admin.shipping.charges.destroy', $charge) }}" method="POST" class="inline" onsubmit="return confirm('Delete this charge?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="p-2 hover:bg-red-100 rounded-lg">
                                    <i data-lucide="trash-2" class="w-4 h-4 text-red-500"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                    @empty
                    <div class="text-center py-8">
                        <i data-lucide="truck" class="w-12 h-12 text-slate-300 mx-auto mb-3"></i>
                        <p class="text-slate-500">No shipping charges configured</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Shipping Classes (Product-specific) -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700">
            <div class="p-6 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center">
                <div>
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white">Shipping Classes</h2>
                    <p class="text-sm text-slate-500">Product-specific shipping overrides</p>
                </div>
                <button onclick="openClassModal()" class="px-3 py-2 bg-indigo-600 text-white rounded-xl text-sm hover:bg-indigo-700">
                    <i data-lucide="plus" class="w-4 h-4 inline mr-1"></i> Add
                </button>
            </div>
            <div class="p-6">
                <div class="space-y-3">
                    @forelse($shippingClasses as $class)
                    <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-700/50 rounded-xl">
                        <div>
                            <p class="font-medium text-slate-800 dark:text-white">{{ $class->name }}</p>
                            <p class="text-lg font-bold text-indigo-600">
                                @if(($class->type ?? 'fixed') === 'percentage')
                                    {{ number_format($class->amount) }}%
                                @else
                                    ৳{{ number_format($class->amount) }}
                                @endif
                            </p>
                            <p class="text-xs text-slate-500">{{ $class->products_count }} products • {{ ucfirst($class->type ?? 'fixed') }}</p>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 text-xs rounded-full {{ $class->status ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700' }}">
                                {{ $class->status ? 'Active' : 'Inactive' }}
                            </span>
                            <button onclick="editClass({{ $class->id }}, '{{ $class->name }}', {{ $class->amount }}, '{{ $class->type ?? 'fixed' }}')" class="p-2 hover:bg-slate-200 dark:hover:bg-slate-600 rounded-lg">
                                <i data-lucide="edit" class="w-4 h-4 text-slate-500"></i>
                            </button>
                            <form action="{{ route('admin.shipping.classes.destroy', $class) }}" method="POST" class="inline" onsubmit="return confirm('Delete this class?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="p-2 hover:bg-red-100 rounded-lg">
                                    <i data-lucide="trash-2" class="w-4 h-4 text-red-500"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                    @empty
                    <div class="text-center py-8">
                        <i data-lucide="package" class="w-12 h-12 text-slate-300 mx-auto mb-3"></i>
                        <p class="text-slate-500">No shipping classes configured</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Charge Modal -->
<div id="chargeModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-slate-900/50" onclick="closeChargeModal()"></div>
        <div class="relative bg-white dark:bg-slate-800 rounded-2xl shadow-xl max-w-md w-full p-6">
            <h3 class="text-lg font-semibold text-slate-800 dark:text-white mb-4" id="chargeModalTitle">Add Shipping Charge</h3>
            <form id="chargeForm" method="POST">
                @csrf
                <div id="chargeMethodField"></div>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Name</label>
                        <input type="text" name="name" id="chargeName" required placeholder="e.g., Inside Dhaka"
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Amount (৳)</label>
                        <input type="number" name="amount" id="chargeAmount" required min="0" step="0.01" placeholder="0.00"
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700">
                    </div>
                </div>
                <div class="flex justify-end space-x-3 mt-6">
                    <button type="button" onclick="closeChargeModal()" class="px-4 py-2 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl">Cancel</button>
                    <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Class Modal -->
<div id="classModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-slate-900/50" onclick="closeClassModal()"></div>
        <div class="relative bg-white dark:bg-slate-800 rounded-2xl shadow-xl max-w-md w-full p-6">
            <h3 class="text-lg font-semibold text-slate-800 dark:text-white mb-4" id="classModalTitle">Add Shipping Class</h3>
            <form id="classForm" method="POST">
                @csrf
                <div id="classMethodField"></div>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Name</label>
                        <input type="text" name="name" id="className" required placeholder="e.g., Heavy Items"
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Type</label>
                        <select name="type" id="classType" required
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700">
                            <option value="fixed">Fixed Amount (৳)</option>
                            <option value="percentage">Percentage (%)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2" id="classAmountLabel">Amount (৳)</label>
                        <input type="number" name="amount" id="classAmount" required min="0" step="0.01" placeholder="0.00"
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700">
                    </div>
                </div>
                <div class="flex justify-end space-x-3 mt-6">
                    <button type="button" onclick="closeClassModal()" class="px-4 py-2 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl">Cancel</button>
                    <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function openChargeModal() {
    document.getElementById('chargeModalTitle').textContent = 'Add Shipping Charge';
    document.getElementById('chargeForm').action = '{{ route("admin.shipping.charges.store") }}';
    document.getElementById('chargeMethodField').innerHTML = '';
    document.getElementById('chargeName').value = '';
    document.getElementById('chargeAmount').value = '';
    document.getElementById('chargeModal').classList.remove('hidden');
}

function editCharge(id, name, amount) {
    document.getElementById('chargeModalTitle').textContent = 'Edit Shipping Charge';
    document.getElementById('chargeForm').action = '/admin/shipping/charges/' + id;
    document.getElementById('chargeMethodField').innerHTML = '@method("PUT")';
    document.getElementById('chargeName').value = name;
    document.getElementById('chargeAmount').value = amount;
    document.getElementById('chargeModal').classList.remove('hidden');
}

function closeChargeModal() {
    document.getElementById('chargeModal').classList.add('hidden');
}

function openClassModal() {
    document.getElementById('classModalTitle').textContent = 'Add Shipping Class';
    document.getElementById('classForm').action = '{{ route("admin.shipping.classes.store") }}';
    document.getElementById('classMethodField').innerHTML = '';
    document.getElementById('className').value = '';
    document.getElementById('classAmount').value = '';
    document.getElementById('classType').value = 'fixed';
    updateClassAmountLabel();
    document.getElementById('classModal').classList.remove('hidden');
}

function editClass(id, name, amount, type) {
    document.getElementById('classModalTitle').textContent = 'Edit Shipping Class';
    document.getElementById('classForm').action = '/admin/shipping/classes/' + id;
    document.getElementById('classMethodField').innerHTML = '@method("PUT")';
    document.getElementById('className').value = name;
    document.getElementById('classAmount').value = amount;
    document.getElementById('classType').value = type || 'fixed';
    updateClassAmountLabel();
    document.getElementById('classModal').classList.remove('hidden');
}

function closeClassModal() {
    document.getElementById('classModal').classList.add('hidden');
}

function updateClassAmountLabel() {
    const type = document.getElementById('classType').value;
    const label = document.getElementById('classAmountLabel');
    label.textContent = type === 'percentage' ? 'Amount (%)' : 'Amount (৳)';
}

document.getElementById('classType').addEventListener('change', updateClassAmountLabel);
</script>
@endpush