@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">
        <div class="flex items-center">
            <i class="fa-solid fa-list mr-2"></i>
            <span>Branch List</span>
        </div>
        <a href="{{ route('branch.create') }}" class="bg-white text-cyan-600 px-3 py-1 rounded text-sm font-bold shadow hover:bg-gray-50">
            <i class="fa-solid fa-plus mr-1"></i> Add Branch
        </a>
    </div>

    <!-- Main Container -->
    <div class="bg-white shadow-sm flex-1 border border-gray-200 border-t-0 p-4">
        @if(session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
                <span class="block sm:inline">{{ session('success') }}</span>
            </div>
        @endif

        <div class="overflow-x-auto">
            <table class="w-full text-sm text-left text-gray-500">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 border-b border-gray-200">
                    <tr>
                        <th scope="col" class="px-4 py-3">#</th>
                        <th scope="col" class="px-4 py-3">Company Name</th>
                        <th scope="col" class="px-4 py-3">Branch Name</th>
                        <th scope="col" class="px-4 py-3">Address</th>
                        <th scope="col" class="px-4 py-3">Email</th>
                        <th scope="col" class="px-4 py-3">Phone No</th>
                        <th scope="col" class="px-4 py-3 text-center">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($branches as $branch)
                        <tr class="border-b hover:bg-gray-50">
                            <td class="px-4 py-3">{{ $loop->iteration }}</td>
                            <td class="px-4 py-3">{{ \App\Models\Company::where('user_id', $branch->company_id)->first()->company_name ?? 'N/A' }}</td>
                            <td class="px-4 py-3 font-bold">{{ $branch->name }}</td>
                            <td class="px-4 py-3">{{ $branch->address ?? '-' }}</td>
                            <td class="px-4 py-3">{{ $branch->email ?? '-' }}</td>
                            <td class="px-4 py-3">{{ $branch->phone ?? '-' }}</td>
                            <td class="px-4 py-3 text-center">
                                <a href="{{ route('branch.edit', $branch->id) }}" class="text-cyan-600 hover:text-[#e65100] mr-2">
                                    <i class="fa-solid fa-edit"></i> Edit
                                </a>
                                <form action="{{ route('branch.destroy', $branch->id) }}" method="POST" class="inline-block" onsubmit="return confirm('Are you sure you want to delete this branch?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-500 hover:text-red-700">
                                        <i class="fa-solid fa-trash"></i> Delete
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-4 py-6 text-center text-gray-400">
                                No branches found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection