@extends('admin.master_layout')
@section('title')
<title>{{__('admin.Manage Contact Groups')}}</title>
@endsection

@section('admin-content')
    <!-- Include Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .select2-container {
            width: 100% !important;
        }
        .select2-selection--multiple {
            min-height: 38px !important;
            border: 1px solid #e4e6fc !important;
        }
        .select2-selection__choice {
            background-color: #6777ef !important;
            border: none !important;
            color: white !important;
            padding: 2px 8px !important;
        }
        
        /*.select2-search__field {
            padding: 8px !important;
        }*/
        /* Modal styles */
        .select2-selection__choice__display {
            color: white !important;
            padding-left:10px;
        }
        .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
            cursor: default;
            padding-left: 10px !important;
            
        }
        .modal-backdrop {
            opacity: 0.5;
        }
        .modal {
            pointer-events: none;
        }
        .modal.show {
            pointer-events: auto;
        }
        .modal-dialog {
            pointer-events: auto;
            max-width: 800px;
        }
        .modal-content {
            border-radius: 8px;
            border: none;
            box-shadow: 0 0 20px rgba(0,0,0,0.15);
        }
        .modal-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            padding: 1rem 1.5rem;
        }
        .modal-body {
            padding: 1.5rem;
        }
        .contact-select-container {
            margin-bottom: 1.5rem;
        }
        /* Fix z-index issues */
        .modal-backdrop {
            z-index: 1040;
        }
        .modal {
            z-index: 1045;
        }
        .select2-container--open {
            z-index: 1046;
        }
    </style>

    <!-- Main Content -->
    <div class="main-content">
        <section class="section">
            <div class="section-header">
                <h1>{{__('Manage Contact Groups')}}</h1>
                <div class="section-header-breadcrumb">
                    <div class="breadcrumb-item active"><a href="{{ route('admin.dashboard') }}">{{__('admin.Dashboard')}}</a></div>
                    <div class="breadcrumb-item">{{__('Manage Contact Groups')}}</div>
                </div>
            </div>

            <div class="section-body">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <!-- Create Group Form -->
                                <div class="mb-4">
                                    <h4 class="mb-3">{{__('Create New Group')}}</h4>
                                    <form action="{{ route('admin.contact_groups.store') }}" method="POST">
                                        @csrf
                                        <div class="form-group">
                                            <label>{{__('Group Name')}} <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="group_name" value="{{ old('group_name') }}">
                                            @error('group_name')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <button type="submit" class="btn btn-primary">{{__('admin.Save')}}</button>
                                    </form>
                                </div>

                                <hr>

                                <!-- Existing Groups -->
                                <div class="mt-4">
                                    <h4 class="mb-3">{{__('Existing Groups')}}</h4>
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>{{__('Group Name')}}</th>
                                                    <th>{{__('Members')}}</th>
                                                    <th width="200">{{__('Actions')}}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($groups as $group)
                                                    <tr>
                                                        <td>{{ $group->name }}</td>
                                                        <td>{{ $group->contacts->count() }} {{__('contacts')}}</td>
                                                        <td>
                                                            <button type="button" class="btn btn-primary btn-sm manage-contacts-btn" data-group-id="{{ $group->id }}">
                                                                <i class="fas fa-user-plus"></i> {{__('Manage Contacts')}}
                                                            </button>
                                                            <form action="{{ route('admin.contact_groups.destroy', $group->id) }}" method="POST" class="d-inline">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit" class="btn btn-danger btn-sm">
                                                                    <i class="fas fa-trash"></i> {{__('Delete')}}
                                                                </button>
                                                            </form>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!-- Contact Selection Modals -->
                                @foreach($groups as $group)
                                    <div class="modal fade" id="contactModal{{ $group->id }}" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel{{ $group->id }}" aria-hidden="true">
                                        <div class="modal-dialog modal-lg" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="contactModalLabel{{ $group->id }}">{{__('Manage Contacts for')}} {{ $group->name }}</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <form action="{{ route('admin.contact_groups.add_contacts', $group->id) }}" method="POST" class="contact-form">
                                                        @csrf
                                                        <div class="contact-select-container">
                                                            <select class="contact-select" name="contact_ids[]" multiple>
                                                                @foreach($contacts as $contact)
                                                                    <option value="{{ $contact->id }}" 
                                                                        {{ in_array($contact->id, $group->contacts->pluck('id')->toArray()) ? 'selected' : '' }}>
                                                                        {{ $contact->first_name }} {{ $contact->last_name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="text-right">
                                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('Cancel')}}</button>
                                                            <button type="submit" class="btn btn-primary save-contacts-btn">{{__('Save Changes')}}</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize Select2 for all modals
            function initializeSelect2ForModal(modal) {
               
                $('.modal-backdrop').remove();
                const select = modal.find('.contact-select');
                if (select.data('select2')) {
                    select.select2('destroy');
                }
                select.select2({
                    dropdownParent: modal.find('.modal-content'),
                    placeholder: "{{__('Search and select contacts')}}",
                    allowClear: true,
                    width: '100%',
                    closeOnSelect: false
                });
            }
            $('.modal-backdrop').remove();
            // Handle Manage Contacts button click
            $('.manage-contacts-btn').on('click', function() {
           
                const groupId = $(this).data('group-id');
                const modal = $('#contactModal' + groupId);

                // Remove any existing backdrop
                $('.modal-backdrop').remove();

                // Initialize modal
                modal.modal({
                    backdrop: 'static',
                    keyboard: false,
                    show: true
                });
                            // $('.modal-backdrop').remove();

                // Initialize Select2 after modal is shown
                modal.on('shown.bs.modal', function() {
                    initializeSelect2ForModal(modal);
                });
            });

            // Handle form submission
            $('.contact-form').on('submit', function(e) {
                e.preventDefault();
                const form = $(this);
                const modal = form.closest('.modal');
                const submitBtn = form.find('.save-contacts-btn');

                submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> {{__('Saving')}}...');

                $.ajax({
                    url: form.attr('action'),
                    method: 'POST',
                    data: form.serialize(),
                    success: function(response) {
                        modal.modal('hide');
                        location.reload();
                    },
                    error: function() {
                        submitBtn.prop('disabled', false).text('{{__('Save Changes')}}');
                        alert('{{__('Error updating contacts. Please try again.')}}');
                    }
                });
            });

            // Cleanup when modal is hidden
            $('.modal').on('hidden.bs.modal', function() {
                const select = $(this).find('.contact-select');
                if (select.data('select2')) {
                    select.select2('destroy');
                }
            });

            // Prevent modal from closing when clicking Select2 dropdown
            $(document).on('click', '.select2-dropdown', function(e) {
                e.stopPropagation();
            });
        });
    </script>
@endsection