@extends('admin.layouts.app')

@section('content')
<div class="bg-gray-100 min-h-[calc(100vh-130px)] p-4 flex flex-col">
    <!-- Header Tab -->
    <div class=" bg-slate-50 border-b border-slate-200 text-slate-800 px-6 py-4 font-bold flex items-center shadow-sm rounded-t-xl">
        <i class="fa-solid fa-list-ul mr-2"></i> 
        <span>List of Company</span>
    </div>

    <!-- Main Container -->
    <div class="bg-white shadow-sm flex-1 border border-gray-200 border-t-0 flex flex-col justify-between">
        
        <!-- Table Area -->
        <div class="flex-1 p-0 m-0">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-white border-b border-gray-200 text-cyan-600">
                        <th class="p-3 text-sm font-semibold w-24">Select</th>
                        <th class="p-3 text-sm font-semibold border-l border-gray-200 w-1/4">Company</th>
                        <th class="p-3 text-sm font-semibold border-l border-gray-200 w-1/4">Phone No</th>
                        <th class="p-3 text-sm font-semibold border-l border-gray-200 w-1/4">Email Address</th>
                        <th class="p-3 text-sm font-semibold border-l border-gray-200">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($companies as $company)
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="p-3 text-sm text-center">
                                <input type="checkbox" name="company_ids[]" value="{{ $company->id }}" class="cursor-pointer">
                            </td>
                            <td class="p-3 text-sm text-gray-800 border-l border-gray-200">{{ $company->company_name ?? 'Demo' }}</td>
                            <td class="p-3 text-sm text-gray-800 border-l border-gray-200">{{ $company->phone ?? '' }}</td>
                            <td class="p-3 text-sm text-gray-800 border-l border-gray-200">{{ $company->email ?? '' }}</td>
                            <td class="p-3 text-sm text-center border-l border-gray-200 flex space-x-2 justify-center">
                                <a href="{{ route('company.edit', $company->id) }}" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-xs font-semibold">Edit</a>
                                <form action="{{ route('company.destroy', $company->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this company and all its branches/logins?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded text-xs font-semibold">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="p-8 text-center text-gray-500">No company details found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Action Buttons -->
        <div class="flex justify-center items-center space-x-2 py-6">
            <a href="{{ route('company.create') }}" class="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white px-6 py-1.5 rounded shadow text-sm font-semibold">Add</a>
            <button class="bg-gradient-to-r from-rose-500 to-rose-600 hover:from-rose-600 hover:to-rose-700 text-white px-6 py-1.5 rounded shadow text-sm font-semibold">Delete</button>
            <a href="{{ route('admin.dashboard') }}" class="bg-gradient-to-r from-rose-500 to-rose-600 hover:from-rose-600 hover:to-rose-700 text-white px-6 py-1.5 rounded shadow text-sm font-semibold">Close</a>
        </div>

    </div>
</div>
@endsection