@extends('layouts.admin')

@section('title', 'Kelola Media Sosial')

@section('content')
    <div class="flex justify-between items-center mb-6">
        <a href="{{ route('admin.social.create') }}" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
            + Tambah Link
        </a>
    </div>

    @if (session('success'))
        <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-6" role="alert">
            <p>{{ session('success') }}</p>
        </div>
    @endif

    <div class="overflow-x-auto bg-white rounded-lg">
        <table id="socialTable" class="display responsive nowrap" style="width:100%">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Ikon</th>
                    <th data-priority="2">Nama</th>
                    <th>Status</th>
					<th data-priority="1">Urutan</th>
                    <th data-priority="3">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($socials as $key => $social)
                    <tr>
						<td>{{ $key + 1 }}</td>
                        
                        <td>
                            @if($social->icon_path)
                                <img src="{{ asset('storage/' . $social->icon_path) }}" alt="{{ $social->name }}" class="h-8 w-8 object-contain">
                            @endif
                        </td>
                        <td>{{ $social->name }}</td>
                        <td>
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $social->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                {{ $social->is_active ? 'Aktif' : 'Nonaktif' }}
                            </span>
                        </td>
						<td>{{ $social->display_order }}</td>
                        <td>
                            <div class="flex items-center space-x-4">
                                <a href="{{ route('admin.social.edit', $social) }}" class="text-indigo-600 hover:text-indigo-900" title="Edit">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" /><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" /></svg>
                                </a>
                                <form action="{{ route('admin.social.destroy', $social) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus data ini?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:text-red-900" title="Hapus">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /></svg>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        $('#socialTable').DataTable({
            responsive: true,
            order: [[ 0, 'asc' ]], // Default sort by "Urutan"
            language: {
                search: "Cari:",
                lengthMenu: "Tampilkan _MENU_ entri",
                info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ entri",
                infoEmpty: "Menampilkan 0 sampai 0 dari 0 entri",
                infoFiltered: "(disaring dari _MAX_ total entri)",
                paginate: {
                    first: "Pertama",
                    last: "Terakhir",
                    next: "Berikutnya",
                    previous: "Sebelumnya"
                },
                zeroRecords: "Tidak ada data yang cocok ditemukan"
            }
        });
    });
</script>
@endpush