@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Event Details'])
    <div class="container">
        <form action="{{route('event-dtls-update')}}" method="POST" id="eventDetailsForm">
            @csrf
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <h4>Event Details</h4>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
                <div class="card-body">
                    <div class="col-md-4 mb-3">
                        <label>Event</label>
                        <select name="event" id="event" class="form-select select2">
                            <option value="">Select Event</option>
                            @foreach ($event as $item)
                                <option value="{{$item->id}}">{{$item->event_name}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="table-responsive">
                        <table class="table text-sm text-center">
                            <thead>
                                <tr>
                                    <th class="text-center"><input type="checkbox" id="select_all"></th>
                                    <th class="text-center">Giver's Name</th>
                                    <th class="text-center">City</th>
                                    <th class="text-center">Alternate Name</th>
                                    <th class="text-center">Amount</th>
                                </tr>
                            </thead>
                            <tbody id="givers-table-body">
                                <!-- Givers will be loaded here dynamically -->
                                <tr>
                                    <td colspan="5" class="text-center text-muted">
                                        Select an event to view givers.
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function () {
            // When event selection changes
            $('#event').change(function () {
                var eventId = $(this).val();

                if (eventId) {
                    // Show loading state
                    $('#givers-table-body').html('<tr><td colspan="5" class="text-center">Loading...</td></tr>');

                    // Fetch givers for the selected event
                    $.ajax({
                        url: '/get-givers-by-event', // You need to create this route
                        type: 'GET',
                        data: { event_id: eventId },
                        success: function (response) {

                            if (response.length > 0) {
                                var html = '';
                                $.each(response, function (index, item) {
                                    console.log(item);

                                    html += `
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" value="${item.id}" class="giver-checkbox">
                                                    </td>
                                                    <td>${item.givers_name || ''}</td>
                                                    <td>${item.city || ''}</td>
                                                    <td>
                                                        <input type="text" class="form-control alternate-name"
                                                            id="alternate_name_${item.id}" value="${item.alternate_name || ''}"
                                                            data-giver-id="${item.id}">
                                                    </td>
                                                    <td>${item.amount || ''}</td>
                                                </tr>
                                            `;
                                });
                                $('#givers-table-body').html(html);
                            } else {
                                $('#givers-table-body').html('<tr><td colspan="5" class="text-center text-muted">No givers found for this event.</td></tr>');
                            }
                        },
                        error: function () {
                            $('#givers-table-body').html('<tr><td colspan="5" class="text-center text-danger">Error loading givers.</td></tr>');
                        }
                    });
                } else {
                    $('#givers-table-body').html('<tr><td colspan="5" class="text-center text-muted">Select an event to view givers.</td></tr>');
                }
            });

            // $(document).on('input', '.alternate-name', function () {
            //     const giverId = $(this).data('giver-id');
            //     const enteredName = $(this).val().toLowerCase().trim();
            //     const originalName = giversData[giverId]?.originalName || '';

            //     if (enteredName === originalName) {
            //         $(this).addClass('is-invalid');
            //         $(`#name-feedback-${giverId}`).show();
            //     } else {
            //         $(this).removeClass('is-invalid');
            //         $(`#name-feedback-${giverId}`).hide();
            //     }
            // });

            // Select all checkboxes
            $('#select_all').change(function () {
                $('.giver-checkbox').prop('checked', $(this).prop('checked'));
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const selectAllCheckbox = document.getElementById('select_all');
            const individualCheckboxes = document.querySelectorAll('.giver-checkbox');
            const alternateNameInputs = document.querySelectorAll('.alternate-name');

            // Toggle required attribute based on checkbox state
            function toggleRequiredFields() {
                individualCheckboxes.forEach(checkbox => {
                    const giverId = checkbox.value;
                    const alternateNameInput = document.getElementById(`alternate_name_${giverId}`);

                    if (checkbox.checked) {
                        alternateNameInput.setAttribute('required', 'required');
                        alternateNameInput.classList.add('is-required');
                    } else {
                        alternateNameInput.removeAttribute('required');
                        alternateNameInput.classList.remove('is-required');
                    }
                });
            }

            // Select All checkbox functionality
            selectAllCheckbox.addEventListener('change', function () {
                individualCheckboxes.forEach(checkbox => {
                    checkbox.checked = selectAllCheckbox.checked;
                });
                toggleRequiredFields();
            });

            // Individual checkbox functionality
            individualCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    if (!this.checked && selectAllCheckbox.checked) {
                        selectAllCheckbox.checked = false;
                    }
                    else if (Array.from(individualCheckboxes).every(cb => cb.checked)) {
                        selectAllCheckbox.checked = true;
                    }
                    toggleRequiredFields();
                });
            });

            // Form submission handler
            document.getElementById('eventDetailsForm').addEventListener('submit', function (e) {
                // First validate required fields
                const selectedCheckboxes = document.querySelectorAll('.giver-checkbox:checked');
                let isValid = true;

                selectedCheckboxes.forEach(checkbox => {
                    const giverId = checkbox.value;
                    const alternateNameInput = document.getElementById(`alternate_name_${giverId}`);

                    if (!alternateNameInput.value.trim()) {
                        isValid = false;
                        alternateNameInput.classList.add('is-invalid');
                    } else {
                        alternateNameInput.classList.remove('is-invalid');
                    }
                });

                if (!isValid) {
                    e.preventDefault();
                    toastr.error('Please fill in all required alternate names for selected givers.');
                    return;
                }

                // Process form submission if validation passes
                const form = this;

                // Clear any previous hidden inputs
                document.querySelectorAll('input[type="hidden"][name^="processed_"]').forEach(el => el.remove());

                selectedCheckboxes.forEach(checkbox => {
                    const giverId = checkbox.value;
                    const alternateNameInput = document.getElementById(`alternate_name_${giverId}`);
                    const alternateName = alternateNameInput ? alternateNameInput.value : '';

                    // addHiddenInput(form, 'processed_givers[]', giverId);
                    addHiddenInput(form, `processed_alternate_names[${giverId}]`, alternateName);
                });

            });

            function addHiddenInput(form, name, value) {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = name;
                input.value = value;
                form.appendChild(input);
            }

            // Initial setup of required fields
            toggleRequiredFields();
        });
    </script>
@endpush
@push('styles')
    <style>
        .is-required {
            border-left: 3px solid #dc3545 !important;
        }

        .is-invalid {
            border-color: #dc3545 !important;
        }
    </style>
@endpush