@extends('layouts.app', [
    'title' => 'Halaman Paket Internet'
])

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="w-full">
        
        <div class="bg-white shadow-md rounded-lg overflow-hidden mb-6">
            <!-- Card Header -->
            <div class="px-6 py-4 border-b border-gray-400">
                <h6 class="m-0 font-bold text-gray-900 text-base">DATA PAKET INTERNET</h6>
            </div>

            <!-- Card Body -->
            <div class="p-6">
                <!-- Button trigger modal -->
                <div class="flex justify-start mb-4">
                    <button type="button" 
                        class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md flex items-center space-x-2" 
                        onclick="document.getElementById('addInternetPackageModal').style.display='flex'; document.body.classList.add('overflow-hidden');">
                        <i class="fas fa-plus mr-1.5"></i>Tambah Paket Internet
                    </button>
                </div>

                <!-- Table Responsive -->
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 border border-gray-200" id="datatable" width="100%" cellspacing="0">
                        <thead class="bg-gray-50 text-center font-bold text-gray-900">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-xs font-medium uppercase tracking-wider border-b">#</th>
                                <th scope="col" class="px-6 py-3 text-xs font-medium uppercase tracking-wider border-b">Nama Paket</th>
                                <th scope="col" class="px-6 py-3 text-xs font-medium uppercase tracking-wider border-b">Harga Jual</th>
                                <th scope="col" class="px-6 py-3 text-xs font-medium uppercase tracking-wider border-b">Harga Modal</th>
                                <th scope="col" class="px-6 py-3 text-xs font-medium uppercase tracking-wider border-b">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="text-center bg-white divide-y divide-gray-200 text-sm">
                            @foreach ($internet_packages as $internet_package)
                            <tr class="hover:bg-gray-100 transition text-gray-900">
                                <td class="px-6 py-4 whitespace-nowrap">{{ $loop->iteration }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">{{ $internet_package->name }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">{{ indonesian_currency($internet_package->price) }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">{{ indonesian_currency($internet_package->harga_modal) }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-center">
                                    <div class="inline-flex rounded-md shadow-sm space-x-1" role="group" aria-label="Action buttons">
                                        <!-- Edit Button -->
                                        <button type="button" 
                                            class="inline-flex items-center px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-xs font-medium rounded shadow-sm transition edit-button"
                                            data-toggle="modal" data-target="#editInternetPackageModal"
                                            data-id="{{ $internet_package->id }}"
                                            title="Edit">
                                            <i class="fas fa-fw fa-edit"></i>
                                        </button>
                                        
                                        <!-- Delete Form -->
                                        <form action="{{ route('paket-internet.destroy', $internet_package->id) }}" method="POST" class="inline-block">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" 
                                                class="inline-flex items-center px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white text-xs font-medium rounded shadow-sm transition delete-button"
                                                title="Hapus">
                                                <i class="fas fa-fw fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
@include('internet_packages.script')
@endpush

@push('modal')
@include('internet_packages.modal.create')
@include('internet_packages.modal.edit')
@endpush