@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto bg-white shadow-md rounded p-6">
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-bold">Registered Pickup Addresses</h2>
        <a href="{{ route('import.create_supplier') }}"
            class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Register New</a>
    </div>

    @if(session('success'))
        <div class="bg-green-100 text-green-800 px-4 py-2 rounded mb-4">{{ session('success') }}</div>
    @endif

    {{-- Add an ID so DataTables can target it --}}
    <table id="pickupTable" class="w-full border-collapse border border-gray-200">
        <thead>
            <tr class="bg-gray-100">
                <th class="border px-2 py-1">ID</th>
                <th class="border px-2 py-1">Contact Name</th>
                <th class="border px-2 py-1">Company</th>
                <th class="border px-2 py-1">City</th>
                <th class="border px-2 py-1">Country</th>
                <th class="border px-2 py-1">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($addresses as $addr)
                <tr>
                    <td class="border px-2 py-1">{{ $addr->id }}</td>
                    <td class="border px-2 py-1">{{ $addr->contact_name }}</td>
                    <td class="border px-2 py-1">{{ $addr->company_name }}</td>
                    <td class="border px-2 py-1">{{ $addr->city }}</td>
                    <td class="border px-2 py-1">{{ $addr->country }}</td>

                    <td class="border px-2 py-1">
                        <div class="flex space-x-2">

                            <a href="{{ route('import.supplier_show', $addr->id) }}"
                                class="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition">
                                View
                            </a>

                            <a href="{{ route('import.edit_supplier', $addr->id) }}"
                                class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition">
                                Edit
                            </a>

                        </div>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection


{{-- DataTables CSS + JS --}}
@section('scripts')
    <script>
        $(document).ready(function () {
            $('#pickupTable').DataTable({
                pageLength: 10,
                ordering: true,
                responsive: true
            });
        });
    </script>
@endsection