@extends('layouts.master')

@section('content')

<div class="max-w-7xl mx-auto p-6">

    <div class="bg-white shadow rounded-lg">

        <div class="flex justify-between items-center p-5 border-b">

            <div>

                <h1 class="text-2xl font-bold text-gray-800">

                    Company Management

                </h1>

                <p class="text-gray-500 text-sm">

                    SAFE SKILL SERVICES ERP

                </p>

            </div>

            <a href="{{ route('companies.create') }}"
               style="background:blue;color:white;padding:10px 20px;border-radius:5px;">

                + Add Company

            </a>
            <a href="{{ route('companies.export', request()->query()) }}"
                class="btn btn-success"
                style="background:blue;color:white;padding:10px 20px;border-radius:5px;">
                <i class="fas fa-file-excel"></i>   
                Export Excel
</a>

        </div>

        @if(session('success'))

            <div class="m-4 p-4 bg-green-100 border border-green-300 text-green-700 rounded">

                {{ session('success') }}

            </div>

        @endif
        <form method="GET"
      action="{{ route('companies.index') }}"
      class="m-4">

    <div class="flex gap-3">

        <input type="text"
               name="search"
               value="{{ request('search') }}"
               placeholder="Search Company, Contact Person, Mobile, Area"
               class="border rounded px-4 py-2 w-full">

        <button type="submit"
                class="bg-blue-600 text-white px-6 rounded">

            Search

        </button>

        <a href="{{ route('companies.index') }}"
           class="bg-gray-500 text-white px-6 rounded flex items-center">

            Reset

        </a>

    </div>

</form>

        <div class="overflow-x-auto">

            <table class="min-w-full">

                <thead class="bg-gray-100">

                    <tr>

                        <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                            ID
                        </th>

                        <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                            Company
                        </th>

                        <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                            Area
                        </th>

                        <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                            District
                        </th>

                        <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                            Contact Person
                        </th>

                        <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">
                            Contact Number
                        </th>

                        <th class="px-6 py-4 text-center text-sm font-semibold text-gray-700">
                            Actions
                        </th>

                    </tr>

                </thead>

                <tbody class="divide-y divide-gray-200">

                    @forelse($companies as $company)

                        <tr class="hover:bg-gray-50">

                            <td class="px-6 py-4">
                                {{ $company->id }}
                            </td>

                            <td class="px-6 py-4 font-semibold text-gray-800">
                                {{ $company->company_name }}
                            </td>

                            <td class="px-6 py-4">
                                {{ $company->area }}
                            </td>

                            <td class="px-6 py-4">
                                {{ $company->district }}
                            </td>

                            <td class="px-6 py-4">
                                {{ $company->contact_person }}
                            </td>

                            <td class="px-6 py-4">
                                {{ $company->contact_number }}
                            </td>

                            <td class="px-6 py-4">

                                <div class="flex justify-center gap-2">

                                    <a href="{{ route('companies.edit', $company->id) }}"
                                      style="background:orange;color:black;padding:5px 15px;border-radius:5px;">

                                        Edit

                                    </a>

                                    <form action="{{ route('companies.destroy', $company->id) }}"
                                          method="POST"
                                          onsubmit="return confirm('Delete this company?')">

                                        @csrf
                                        @method('DELETE')

                                        <button type="submit"
                                                style="background:red;color:white;padding:5px 15px;border-radius:5px;">

                                            Delete

                                        </button>

                                    </form>

                                </div>

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td colspan="7"
                                class="text-center py-10 text-gray-500">

                                No Companies Found

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

        <div class="p-5">

            {{ $companies->links() }}

        </div>

    </div>

</div>

@endsection