@extends('admin.master_layout')
@section('title')
<title>{{__('Contacts')}}</title>
@endsection
@section('admin-content')
      <!-- Main Content -->
      <div class="main-content">
        <section class="section">
          <div class="section-header">
            <h1>{{__('Contacts')}}</h1>
          </div>
          <div class="section-body">
            <a href="{{ route('admin.contacts_create') }}" class="btn btn-primary"><i class="fas fa-plus"></i> {{__('admin.Add New')}}</a>
            <a href="{{ route('admin.contacts_import') }}" class="btn btn-success"><i class="fas fa-file-import"></i> {{__('Import Contacts')}}</a>
            <button class="btn btn-danger" id="bulk-delete-btn" disabled data-toggle="modal" data-target="#bulkDeleteModal"><i class="fa fa-trash"></i> {{__('Delete Selected')}}</button>
            <div class="row mt-4">
                <div class="col-12">
                  <div class="card">
                    <div class="card-body">
                        <table class="table table-striped" id="dataTable">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" id="select-all"></th>
                                    <th>{{__('admin.SN')}}</th>
                                    <th>{{__('First Name')}}</th>
                                    
                                    <th>{{__('Company')}}</th>
                                    <th>{{__('admin.Email')}}</th>
                                    <th>{{__('Home City')}}</th>
                                    <th>{{__('Groups')}}</th>
                                    <th>{{__('admin.Action')}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($contacts as $index => $contact)
                                    <tr> 
                                        <td><input type="checkbox" class="contact-checkbox" value="{{ $contact->id }}"></td>
                                        <td>{{ ++$index }}</td>
                                        <td>{{ $contact->first_name }}</td>
                                        
                                        <td>{{ $contact->company }}</td>
                                        <td>{{ $contact->email_address }}</td>
                                        <td>{{ $contact->home_city }}</td>
                                        <td>
                                            @foreach($contact->groups as $group)
                                                <span class="badge badge-info">{{ $group->name }}</span>
                                            @endforeach
                                        </td>
                                        <td>
                                            <a href="{{ route('admin.contacts_edit',$contact->id) }}" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i></a>
                                            <a href="javascript:;" data-toggle="modal" data-target="#deleteModal" class="btn btn-danger btn-sm" onclick="deleteData({{ $contact->id }})"><i class="fa fa-trash"></i></a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                  </div>
                </div>
          </div>
        </section>
      </div>

<!-- Bulk Delete Confirmation Modal -->
<div class="modal fade" id="bulkDeleteModal" tabindex="-1" role="dialog" aria-labelledby="bulkDeleteModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bulkDeleteModalLabel">{{__('Confirm Bulk Delete')}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                {{__('Are you sure you want to delete the selected contacts?')}}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('admin.Cancel')}}</button>
                <button type="button" class="btn btn-danger" id="confirm-bulk-delete">{{__('admin.Delete')}}</button>
            </div>
        </div>
    </div>
</div>

<form id="bulk-delete-form" method="POST" action="{{ route('admin.contacts_bulk_delete') }}">
    @csrf
    <input type="hidden" name="contact_ids" id="contact-ids">
</form>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const selectAllCheckbox = document.getElementById('select-all');
        const contactCheckboxes = document.querySelectorAll('.contact-checkbox');
        const bulkDeleteBtn = document.getElementById('bulk-delete-btn');
        const confirmBulkDeleteBtn = document.getElementById('confirm-bulk-delete');
        const bulkDeleteForm = document.getElementById('bulk-delete-form');
        const contactIdsInput = document.getElementById('contact-ids');

        selectAllCheckbox.addEventListener('change', function() {
            contactCheckboxes.forEach(checkbox => checkbox.checked = this.checked);
            toggleBulkDeleteButton();
        });

        contactCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', toggleBulkDeleteButton);
        });

        function toggleBulkDeleteButton() {
            const selected = [...contactCheckboxes].some(checkbox => checkbox.checked);
            bulkDeleteBtn.disabled = !selected;
        }

        confirmBulkDeleteBtn.addEventListener('click', function() {
            const selectedIds = [...contactCheckboxes]
                .filter(checkbox => checkbox.checked)
                .map(checkbox => checkbox.value);
            
            if (selectedIds.length > 0) {
                contactIdsInput.value = selectedIds.join(',');
                bulkDeleteForm.submit();
            }
        });
    });
</script>
@endsection