@extends('home_layout.master_sidebar')

@section('page_styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <style>
        .contacts-container { max-width: 100%; margin-top: 20px; }
        .contacts-header { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #e9ecef; }
        .contacts-header h3 { font-weight: bold; font-size: 1.2em; }
        .btn-new-contact { font-size: 1em; color: #007bff; cursor: pointer; }
        .contacts-list { width: 100%; border-collapse: collapse; }
        .contacts-list th, .contacts-list td { padding: 15px; text-align: left; border-bottom: 1px solid #e9ecef; }
        .contact-name { display: flex; align-items: center; gap: 10px; }
        .contact-initials { width: 35px; height: 35px; border-radius: 50%; background-color: #f0f0f0; color: #333; font-weight: bold; display: flex; align-items: center; justify-content: center; }
        .contact-actions { display: flex; gap: 10px; }
        .contact-actions a, .contact-actions button { font-size: 0.9em; border: none; background: none; color: #007bff; cursor: pointer; }
        .contact-actions a:hover, .contact-actions button:hover { text-decoration: underline; }
    </style>
@stop

@section('breadcrumbs')
    @include('home_layout.breadcrumb', [
        'title' => 'Contacts',
        'breadcrumbs' => [
            ['title' => 'Home', 'link' => '#'],
            ['title' => 'Contacts', 'link' => '#']
        ]
    ])
@stop

@section('content')
    <div class="container-fluid contacts-container">
        <!-- Header -->
        <div class="contacts-header">
            <h3>Contacts</h3>
            <div>
                <a href="{{ route('contacts.import.index') }}" class="btn-new-contact" style="margin-right: 10px;">Import Contacts</a>
                <a href="{{ route('contacts.create') }}" class="btn-new-contact">+ New contact</a>
            </div>
        </div>

        <!-- Search Bar -->
        <div class="mb-3">
            <input type="text" id="searchInput" class="form-control" placeholder="Search...">
        </div>

        <!-- Contacts List -->
        <table class="contacts-list">
            <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Address</th>
                <th>Last Booking</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            @forelse($contacts as $contact)
                <tr>
                    <td>
                        <div class="contact-name">
                            <div class="contact-initials">
                                {{ strtoupper(substr($contact->name, 0, 1)) }}
                            </div>
                            <div>
                                <strong>
                                    <a href="{{ route('contacts.show', $contact->id) }}">
                                        {{ $contact->name }}
                                    </a>
                                </strong>
                            </div>
                        </div>
                    </td>
                    <td>{{ $contact->email }}</td>
                    <td>{{ $contact->phone ?? 'N/A' }}</td>
                    <td>{{ $contact->address ?? 'N/A' }}</td>
                    <td>
                        @if($contact->bookings->count())
                            {{ $contact->bookings->last()->start_time }}
                        @else
                            N/A
                        @endif
                    </td>
                    <td class="contact-actions">
                        <a href="{{ route('contacts.edit', $contact->id) }}">
                            <i class="fas fa-edit"></i> Edit
                        </a>
                        <form action="{{ route('contacts.destroy', $contact->id) }}" method="POST" style="display:inline;">
                            @csrf
                            @method('DELETE')
                            <button onclick="return confirm('Delete this contact?');">
                                <i class="fas fa-trash-alt"></i> Delete
                            </button>
                        </form>
                        <a href="{{ route('contacts.invite.form', $contact->id) }}">
                            <i class="fas fa-envelope"></i> Invite
                        </a>
                        <a href="{{ route('contacts.schedule', $contact->id) }}">
                            <i class="fas fa-calendar-plus"></i> Schedule Service
                        </a>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="6">No contacts found.</td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>
@stop

@section('page_scripts')
    <script>
        $(document).ready(function(){
            $('#searchInput').on('keyup', function(){
                var value = $(this).val().toLowerCase();
                $('.contacts-list tbody tr').filter(function(){
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });
    </script>
@stop