@extends('backend.layouts.app')

@section('title')
    Customer List - Hotel Management System
@endsection

@section('content')
    <!-- Breadcrumb -->
    <div class="bg-white shadow-sm border-b border-gray-200 px-6 py-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center text-sm text-gray-600">
                <i class="fas fa-home mr-2"></i>
                <span>/ Customer List</span>
            </div>
            <div class="flex space-x-2">
                <a href="{{ route('bookings.room-board') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors">
                    <i class="fas fa-bed mr-2"></i>Front Desk
                </a>
            </div>
        </div>
    </div>

    <!-- Content -->
    <div class="p-6">
        @if(session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                {{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                {{ session('error') }}
            </div>
        @endif

        <!-- Customers Table -->
        <div class="bg-white rounded-lg shadow-md">
            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                <h2 class="text-xl font-semibold text-gray-800">All Customers</h2>
                <div class="flex items-center">
                    <button id="refreshTable" class="mr-2 text-gray-500 hover:text-gray-700" title="Refresh Table">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-search text-gray-400"></i>
                        </div>
                        <input type="text" id="searchInput" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Search customers...">
                    </div>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table id="customersTable" class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Customer Info
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Contact Details
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Role & Status
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Actions
                        </th>
                    </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($customers as $customer)
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10">
                                        <div class="h-10 w-10 rounded-full bg-teal-500 flex items-center justify-center">
                                                <span class="text-white font-semibold text-sm">
                                                    {{ strtoupper(substr($customer->name, 0, 2)) }}
                                                </span>
                                        </div>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">
                                            {{ $customer->name }}
                                        </div>
                                        <div class="text-xs text-gray-500">
                                            Username: {{ $customer->username }}
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ $customer->email }}</div>
                                <div class="text-xs text-gray-500">
                                    ID: {{ $customer->id }}
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($customer->roles->count() > 0)
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                            {{ $customer->roles->first()->name }}
                                        </span>
                                @else
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                            No Role
                                        </span>
                                @endif
                                <div class="mt-1">
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                            Active
                                        </span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <div class="flex space-x-2">
                                    <a href="{{ route('bookings.create') }}?customer_id={{ $customer->id }}"
                                       class="inline-flex items-center justify-center w-8 h-8 bg-teal-100 text-teal-600 rounded-full hover:bg-teal-200 transition-colors"
                                       title="Check In">
                                        <i class="fas fa-sign-in-alt text-sm"></i>
                                    </a>

                                    <a href="{{ route('customers.report', $customer) }}"
                                       class="inline-flex items-center justify-center w-8 h-8 bg-blue-100 text-blue-600 rounded-full hover:bg-blue-200 transition-colors"
                                       title="View Report">
                                        <i class="fas fa-chart-line text-sm"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-6 py-4 text-center text-gray-500">
                                <div class="py-8">
                                    <i class="fas fa-users text-4xl text-gray-300 mb-4"></i>
                                    <p>No customers found.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Pagination (will be hidden when using DataTable) -->
            @if($customers->hasPages())
                <div id="originalPagination" class="px-6 py-4 border-t border-gray-200">
                    {{ $customers->links() }}
                </div>
            @endif
        </div>
    </div>
@endsection

@push('scripts')
    <!-- Include DataTables CSS and JS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>

    <script>
        $(document).ready(function() {
            // Initialize DataTable
            var table = $('#customersTable').DataTable({
                "paging": false,
                "searching": true,
                "lengthChange": false,
                "info": false,
                "autoWidth": false,
                "dom": 'rt<"bottom"ip><"clear">',
                "order": [[0, 'asc']]
            });

            // Hide original pagination
            // $('#originalPagination').hide();

            // Connect the search input to DataTable
            $('#searchInput').on('keyup', function() {
                table.search(this.value).draw();
            });

            // Refresh button functionality
            $('#refreshTable').on('click', function() {
                table.search('').draw();
                $('#searchInput').val('');
            });

            // Style the DataTable elements after initialization
            $('.dataTables_length label').addClass('text-sm text-gray-700');
            $('.dataTables_length select').addClass('mt-1 block pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md');
            $('.dataTables_filter label').addClass('text-sm text-gray-700');
            $('.dataTables_filter input').addClass('ml-3 block pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm');
            $('.dataTables_info').addClass('text-sm text-gray-700');
            $('.dataTables_paginate').addClass('inline-flex shadow-sm');
            $('.paginate_button.previous').addClass('relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50');
            $('.paginate_button.next').addClass('relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50');
            $('.paginate_button:not(.previous):not(.next)').addClass('relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50');
        });
    </script>
@endpush
