@extends('layouts.aura-main')

@section('main-content')
<div class="max-w-6xl mx-auto pb-20">
    
    @if(session('success'))
        <div class="mb-6 bg-emerald-50 border-l-4 border-emerald-500 p-4 shadow-sm animate-pulse">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg class="h-4 w-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                </div>
                <div class="ml-3">
                    <p class="text-[10px] font-black text-emerald-800 tracking-widest">{{ session('success') }}</p>
                </div>
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="mb-6 bg-rose-50 border-l-4 border-rose-500 p-4 shadow-sm">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg class="h-4 w-4 text-rose-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>
                </div>
                <div class="ml-3">
                    <p class="text-[10px] font-black text-rose-800 tracking-widest">{{ session('error') }}</p>
                </div>
            </div>
        </div>
    @endif

    <div class="flex justify-between items-end mb-8">
        <div>
            <h1 class="text-2xl font-black text-slate-900 tracking-tighter">Warehouses & Locations</h1>
            <p class="text-[10px] font-bold text-slate-400 tracking-widest mt-1 italic">Physical stock distribution points</p>
        </div>
        <a href="{{ route('inventory.warehouses.create') }}" class="bg-slate-900 text-white px-6 py-2.5 text-[10px] font-black tracking-widest shadow-xl hover:bg-indigo-600 transition-all">
            + Add New Location
        </a>
    </div>

    <div class="bg-white border border-slate-200 rounded-sm shadow-sm overflow-hidden">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="border-b border-slate-900 bg-slate-50 text-[9px] font-black text-slate-500 tracking-widest">
                    <th class="px-6 py-4">Location Name</th>
                    <th class="px-6 py-4">Code</th>
                    <th class="px-6 py-4">Active Items</th>
                    <th class="px-6 py-4 text-center">Status</th>
                    <th class="px-6 py-4 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="text-[11px] font-medium divide-y divide-slate-100 tracking-tight">
                @foreach($warehouses as $wh)
                <tr class="hover:bg-slate-50/50 transition">
                    <td class="px-6 py-4">
                        <span class="block font-black text-slate-900">{{ $wh->name }}</span>
                        <span class="text-[9px] text-slate-400 italic">{{ $wh->address ?? 'No address provided' }}</span>
                    </td>
                    <td class="px-6 py-4 font-mono font-bold text-slate-600">{{ $wh->code }}</td>
                    <td class="px-6 py-4 font-mono text-slate-900">
                        {{ number_format($wh->active_items_count) }} <span class="text-slate-400 text-[9px]">SKUs</span>
                    </td>
                    <td class="px-6 py-4 text-center">
                        @if($wh->is_primary)
                            <span class="bg-indigo-600 text-white px-3 py-1 text-[8px] font-black rounded-full tracking-tighter shadow-sm">Primary</span>
                        @else
                            <span class="border border-slate-200 text-slate-400 px-3 py-1 text-[8px] font-black rounded-full tracking-tighter">Secondary</span>
                        @endif
                    </td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex justify-end items-center gap-6">
                            <a href="{{ route('inventory.warehouses.edit', $wh->id) }}" class="text-indigo-600 hover:text-indigo-900 font-black text-[9px] tracking-widest transition-colors">
                                Edit
                            </a>

                            <button type="button" 
                                    onclick="openDeleteModal('{{ $wh->id }}', '{{ $wh->name }}')" 
                                    class="text-slate-300 hover:text-rose-600 font-black text-[9px] tracking-widest transition-colors">
                                Delete
                            </button>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div id="deleteModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm transition-opacity"></div>
    <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
        <div class="relative transform overflow-hidden rounded-sm bg-white text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-lg border border-slate-200">
            <div class="bg-white px-8 py-10">
                <div class="sm:flex sm:items-start">
                    <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-rose-50 sm:mx-0 sm:h-10 sm:w-10">
                        <svg class="h-6 w-6 text-rose-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                        </svg>
                    </div>
                    <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                        <h3 class="text-lg font-black leading-6 text-slate-900 tracking-tighter" id="modal-title">Confirm Deletion</h3>
                        <div class="mt-2">
                            <p class="text-sm text-slate-500 font-medium italic">Are you sure you want to remove <span id="warehouseNamePlaceholder" class="font-bold text-slate-900"></span>? This will only proceed if there is no historical transaction data.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-slate-50 px-8 py-4 sm:flex sm:flex-row-reverse gap-3">
                <form id="deleteForm" method="POST" action="">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="inline-flex w-full justify-center bg-rose-600 px-8 py-2.5 text-[10px] font-black text-white shadow-sm hover:bg-rose-700 sm:w-auto tracking-widest transition-all active:scale-95">
                        Confirm Delete
                    </button>
                </form>
                <button type="button" onclick="closeDeleteModal()" class="mt-3 inline-flex w-full justify-center bg-white px-8 py-2.5 text-[10px] font-black text-slate-700 shadow-sm ring-1 ring-inset ring-slate-300 hover:bg-slate-50 sm:mt-0 sm:w-auto tracking-widest transition-all">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>
<script>
    function openDeleteModal(id, name) {
        const modal = document.getElementById('deleteModal');
        const form = document.getElementById('deleteForm');
        const namePlaceholder = document.getElementById('warehouseNamePlaceholder');

        namePlaceholder.innerText = name;

        // Use a JS template literal to inject the ID into the URL structure
        // We strip the trailing '0' and replace it with the actual ID
        let baseUrl = "{{ route('inventory.warehouses.destroy', 0) }}";
        form.action = baseUrl.replace('0', id);

        modal.classList.remove('hidden');
    }

    function closeDeleteModal() {
        document.getElementById('deleteModal').classList.add('hidden');
    }

    window.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') closeDeleteModal();
    });
</script>
@endsection