@extends('layouts.master', ['title' => 'List -  Customer - Pages'])

@section('workspace')

    <!-- Breadcrumb -->
    <section class="breadcrumb lg:flex items-start">
        <div>
            <h1>Customers</h1>
            <ul>
                <li><a href="#no-link">Pages</a></li>
                <li class="divider la la-arrow-right"></li>
                <li><a href="#no-link">Customer</a></li>
                <li class="divider la la-arrow-right"></li>
                <li>List</li>
            </ul>
        </div>

        <div class="flex flex-wrap gap-2 items-center ltr:ml-auto rtl:mr-auto mt-5 lg:mt-0">
            <!-- Search -->
            <form class="flex flex-auto">
                <label class="form-control-addon-within rounded-full">
                    <input class="form-control border-none" placeholder="Search">
                    <button
                        class="text-gray-300 dark:text-gray-700 text-xl leading-none la la-search ltr:mr-4 rtl:ml-4"></button>
                </label>
            </form>

            <div class="flex gap-x-2">

                <!-- Sort By -->
                <div class="dropdown">
                    <button class="btn btn_outlined btn_secondary uppercase" data-toggle="dropdown-menu">
                        Sort By
                        <span class="ltr:ml-3 rtl:mr-3 la la-caret-down text-xl leading-none"></span>
                    </button>
                    <div class="dropdown-menu">
                        <a href="#no-link">Ascending</a>
                        <a href="#no-link">Descending</a>
                    </div>
                </div>

                <!-- Add New -->
                {{--                <a href="{{ url('pages/blog/add') }}" class="btn btn_primary uppercase">Add New</a>--}}
            </div>
        </div>
    </section>

    <!-- List -->
    <div class="card p-5">
        <div class="overflow-x-auto">
            <table class="table table-auto table_hoverable w-full">
                <thead>
                <tr>
                    <th class="ltr:text-left rtl:text-right uppercase">Company Name</th>
                    <th class="text-center uppercase">Contact Person</th>
                    <th class="text-center uppercase">Contact Number</th>
                    <th class="text-center uppercase">Email</th>
                    <th class="text-center uppercase">State</th>

                </tr>
                </thead>
                <tbody>
                @if($customers->count() > 0)
                    @foreach($customers as $customer)
                        <tr>

                            <td>{{$customer->company->company_name}}</td>
                            <td class="text-center">{{$customer->company->contact_name}}</td>
                            <td class="text-center">{{$customer->company->contact_number}}</td>
                            <td class="text-center">{{$customer->company->email}}</td>
                            <td class="text-center">{{$customer->company->state}}</td>
{{--                            </td>--}}
                        </tr>
                    @endforeach
                @else
                    <tr>
                        <td colspan="5" class="text-center">No records found</td>
                    </tr>
                @endif
                </tbody>
            </table>
        </div>
    </div>

{{--    <div class="mt-5">--}}
{{--        @include('partials._pagination')--}}
{{--    </div>--}}



@endsection