@extends('layouts.main')

@section('content')
<div class="min-h-screen bg-white py-4 px-4">
    <div class="w-full">
        <!-- Header -->
        <div class="mb-4">
            <div class="bg-gradient-to-r from-blue-600 to-blue-700 rounded-t-xl shadow-lg px-5 py-2">
                <div class="flex items-center justify-between">
                    <h2 class="text-xl font-bold text-white flex items-center">
                        <i class="fas fa-handshake mr-2"></i>
                        List Mitra
                    </h2>
                    <div class="flex items-center gap-3">
                        <form method="GET" action="{{ route('mitra.index') }}" id="filterForm" class="relative">
                            <input type="text"
                                   id="searchInput"
                                   name="search"
                                   value="{{ request('search') }}"
                                   class="pl-9 pr-3 py-1.5 rounded-lg border-0 focus:ring-2 focus:ring-white/50 text-gray-900 placeholder-gray-500"
                                   placeholder="Cari mitra..."
                                   autocomplete="off">
                            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-200"></i>
                        </form>
                        <a href="{{ route('mitra.create') }}" class="bg-white/20 hover:bg-white/30 text-white px-3 py-1.5 rounded-lg transition-all flex items-center">
                            <i class="fas fa-plus mr-2 text-sm"></i>
                            Tambah Mitra
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alert Messages -->
        @if(session('success'))
            <div class="mb-6 bg-green-50 border-l-4 border-green-500 rounded-lg p-4 shadow-sm">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-500 mr-3 text-xl"></i>
                    <div class="flex-1">
                        <p class="text-green-800 font-medium">{{ session('success') }}</p>
                    </div>
                    <button type="button" class="text-green-500 hover:text-green-700" onclick="this.parentElement.parentElement.remove()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        @endif

        <!-- Table Card -->
        <div class="bg-white rounded-b-xl shadow-xl overflow-hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 table-activity">
                    <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
                        <tr>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">No</th>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Logo</th>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Nama Perusahaan</th>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Industri</th>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Ukuran</th>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Kontak</th>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Telepon</th>
                            <th class="px-6 py-2 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="mitrasTableBody" class="bg-white divide-y divide-gray-200">
                        @forelse($mitras as $index => $mitra)
                            <tr class="hover:bg-blue-50 transition-colors duration-150">
                                <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-gray-900">{{ $mitras->firstItem() + $index }}</td>
                                <td class="px-6 py-2 whitespace-nowrap">
                                    @if($mitra->logo)
                                        <img src="{{ asset('storage/' . $mitra->logo) }}" alt="Logo {{ $mitra->company_name }}" class="h-10 w-10 rounded object-cover">
                                    @else
                                        <div class="h-10 w-10 rounded bg-gray-100 flex items-center justify-center">
                                            <i class="fas fa-building text-gray-400 text-sm"></i>
                                        </div>
                                    @endif
                                </td>
                                <td class="px-6 py-2 text-sm font-semibold text-gray-900">{{ $mitra->company_name }}</td>
                                <td class="px-6 py-2 whitespace-nowrap text-sm text-gray-600">{{ $mitra->industry ?? '-' }}</td>
                                <td class="px-6 py-2 whitespace-nowrap text-sm text-gray-600">{{ $mitra->company_size ?? '-' }}</td>
                                <td class="px-6 py-2 whitespace-nowrap text-sm text-gray-600">
                                    {{ $mitra->contact_person }}
                                    @if($mitra->contact_position)
                                        <span class="text-gray-500">({{ $mitra->contact_position }})</span>
                                    @endif
                                </td>
                                <td class="px-6 py-2 whitespace-nowrap text-sm text-gray-600">{{ $mitra->company_phone }}</td>
                                <td class="px-6 py-2 whitespace-nowrap text-center">
                                    <div class="flex items-center justify-center gap-1.5">
                                        <a href="{{ route('mitra.show', $mitra->id) }}" 
                                           class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-blue-100 hover:bg-blue-200 text-blue-600 transition-all duration-200 hover:scale-110"
                                           title="Detail">
                                            <i class="fas fa-eye text-xs"></i>
                                        </a>
                                        <a href="{{ route('mitra.edit', $mitra->id) }}" 
                                           class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-yellow-100 hover:bg-yellow-200 text-yellow-600 transition-all duration-200 hover:scale-110"
                                           title="Edit">
                                            <i class="fas fa-edit text-xs"></i>
                                        </a>
                                        <form action="{{ route('mitra.destroy', $mitra->id) }}" method="POST" class="inline" onsubmit="return confirm('Apakah Anda yakin ingin menghapus mitra ini?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" 
                                                    class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-red-100 hover:bg-red-200 text-red-600 transition-all duration-200 hover:scale-110"
                                                    title="Hapus">
                                                <i class="fas fa-trash text-xs"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="px-6 py-6 text-center">
                                    <div class="flex flex-col items-center">
                                        <div class="h-14 w-14 rounded-full bg-gray-100 flex items-center justify-center mb-3">
                                            <i class="fas fa-handshake text-gray-400 text-xl"></i>
                                        </div>
                                        <h6 class="text-gray-900 font-semibold mb-1">Tidak ada data mitra</h6>
                                        <p class="text-gray-500 mb-0">Mulai dengan menambahkan mitra baru</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($mitras->count() > 0)
            <div class="flex flex-col sm:flex-row items-center justify-between px-6 py-4 border-t border-gray-100 text-sm text-gray-600">
                <div>
                    Menampilkan <span class="font-semibold">{{ $mitras->firstItem() }}</span> sampai 
                    <span class="font-semibold">{{ $mitras->lastItem() }}</span> dari 
                    <span class="font-semibold">{{ $mitras->total() }}</span> data
                </div>
                <div class="mt-2 sm:mt-0">
                    {{ $mitras->links() }}
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const filterForm = document.getElementById('filterForm');
    const searchInput = document.getElementById('searchInput');
    if (searchInput && filterForm) {
        let timer;
        searchInput.addEventListener('input', function() {
            clearTimeout(timer);
            timer = setTimeout(() => { filterForm.submit(); }, 400);
        });
    }
});
</script>
@endpush