@php
    $edit = !empty($committeeMembers) && $committeeMembers->isNotEmpty();
@endphp

@extends('layouts.admin.master')

@section('title', $edit ? 'Edit Committee Members' : 'Create Committee Members')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card dashboard-custom-card">
                    <div class="card-body">
                        <div class="custom-card-header d-flex justify-content-between">
                            <h4>{{ $edit ? 'Edit' : 'Create' }} Committee Members</h4>
                            <a href="{{ route('admin.committee-members.index') }}" class="create-button">
                                <i class="fas fa-backward"></i> Back
                            </a>
                        </div>

                        <form
                            action="{{ $edit ? route('admin.committee-members.update', ['committeeType' => $committeeTypeId, 'focusArea' => $focusAreaId]) : route('admin.committee-members.store') }}"
                            method="POST" class="edit-add-form" enctype="multipart/form-data">
                            @csrf
                            @if ($edit)
                                @method('PUT')
                            @endif

                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="focus_area">Focus Area <span style="color: red"> * </span></label>
                                    <select class="form-control" name="focus_area_id" id="focus_area" required>
                                        <option value="">Select Focus Area</option>
                                        @foreach ($focusAreas as $focusArea)
                                            <option value="{{ $focusArea->id }}"
                                                {{ $edit && $focusAreaId == $focusArea->id ? 'selected' : (old('focus_area_id') == $focusArea->id ? 'selected' : '') }}>
                                                {{ $focusArea->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="committee_type_id">Committee Type <span style="color: red"> * </span></label>
                                    <select class="form-control" name="committee_type_id" id="committee_type_id" required>
                                        <option value="">Select Committee Type</option>
                                        @foreach ($committeeTypes as $type)
                                            <option value="{{ $type->id }}"
                                                {{ $edit && $committeeTypeId == $type->id ? 'selected' : (old('committee_type_id') == $type->id ? 'selected' : '') }}>
                                                {{ $type->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div id="members-wrapper">
                                @if ($edit)
                                    @foreach ($committeeMembers as $index => $member)
                                        <div class="member-row row mb-3">
                                            <div class="col-md-3">
                                                <label>Member</label>
                                                <select name="members[{{ $index }}][user_id]" class="form-control user-select" required>
                                                    <option value="">Select Member</option>
                                                    @foreach ($users as $user)
                                                        <option value="{{ $user->id }}" data-phone="{{ $user->phone }}"
                                                            {{ $member->user_id == $user->id ? 'selected' : '' }}>
                                                            {{ $user->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <label>Member Type</label>
                                                <select name="members[{{ $index }}][member_type]" class="form-control" required>
                                                    <option value="">Select Member Type</option>
                                                    @foreach ($memberTypes as $type)
                                                        <option value="{{ $type->id }}" {{ $member->member_type == $type->id ? 'selected' : '' }}>
                                                            {{ $type->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <label>Mobile</label>
                                                <input type="text" name="members[{{ $index }}][mobile]" class="form-control mobile-input" value="{{ $member->mobile }}" readonly>
                                            </div>
                                            <div class="col-md-3 d-flex align-items-end">
                                                <button type="button" class="btn btn-danger remove-member">Remove</button>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="member-row row mb-3">
                                        <div class="col-md-3">
                                            <label>Member</label>
                                            <select name="members[0][user_id]" class="form-control user-select" required>
                                                <option value="">Select Member</option>
                                                @foreach ($users as $user)
                                                    <option value="{{ $user->id }}" data-phone="{{ $user->phone }}">
                                                        {{ $user->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label>Member Type</label>
                                            <select name="members[0][member_type]" class="form-control" required>
                                                <option value="">Select Member Type</option>
                                                @foreach ($memberTypes as $type)
                                                    <option value="{{ $type->id }}">{{ $type->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label>Mobile</label>
                                            <input type="text" name="members[0][mobile]" class="form-control mobile-input" readonly>
                                        </div>
                                        <div class="col-md-3 d-flex align-items-end">
                                            <button type="button" class="btn btn-danger remove-member">Remove</button>
                                        </div>
                                    </div>
                                @endif
                            </div>

                            <button type="button" class="btn btn-secondary" id="add-member">Add Member</button>

                            <div class="mt-3">
                                <button class="btn btn-primary" id="submit">
                                    <i class="fa fa-save"></i> {{ $edit ? 'Update' : 'Create' }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        .user-select.is-invalid { border-color: #dc3545; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }
        .user-select.is-valid { border-color: #28a745; box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); }
        .duplicate-error { color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem; }
    </style>
@endpush

@push('js')
    <script>
        let memberIndex = {{ $edit ? $committeeMembers->count() : 1 }};

        $('#add-member').on('click', function () {
            const newRow = `
        <div class="member-row row mb-3">
            <div class="col-md-3">
                <select name="members[${memberIndex}][user_id]" class="form-control user-select" required>
                    <option value="">Select Member</option>
                    @foreach ($users as $user)
            <option value="{{ $user->id }}" data-phone="{{ $user->phone }}">{{ $user->name }}</option>
                    @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <select name="members[${memberIndex}][member_type]" class="form-control" required>
                    <option value="">Select Member Type</option>
                    @foreach ($memberTypes as $type)
            <option value="{{ $type->id }}">{{ $type->name }}</option>
                    @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <input type="text" name="members[${memberIndex}][mobile]" class="form-control mobile-input" readonly>
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <button type="button" class="btn btn-danger remove-member">Remove</button>
            </div>
        </div>`;
            $('#members-wrapper').append(newRow);
            memberIndex++;
        });

        $(document).on('click', '.remove-member', function () {
            if ($('.member-row').length > 1) $(this).closest('.member-row').remove();
        });

        $(document).on('change', '.user-select', function () {
            const phone = $(this).find(':selected').data('phone');
            $(this).closest('.member-row').find('.mobile-input').val(phone || '');
            checkDuplicateMembers();
        });

        function checkDuplicateMembers() {
            const selectedUsers = [];
            let hasDuplicates = false;

            $('.user-select').each(function () {
                const userId = $(this).val();
                if (userId && selectedUsers.includes(userId)) {
                    hasDuplicates = true;
                    $(this).addClass('is-invalid');
                } else {
                    selectedUsers.push(userId);
                    $(this).removeClass('is-invalid');
                }
            });

            return !hasDuplicates;
        }

        $('.edit-add-form').on('submit', function (e) {
            e.preventDefault();

            // Check for duplicate members before submission
            if (!checkDuplicateMembers()) {
                toastr.error('The same member cannot be added multiple times to the same committee.');
                return;
            }

            let formData = new FormData(this); // FormData instance, nested arrays ঠিকভাবে পাঠাবে

            $.ajax({
                url: this.action,
                method: this.method,
                data: formData,
                processData: false,  // FormData ব্যবহার করলে এটি false হতে হবে
                contentType: false,  // FormData ব্যবহার করলে এটি false হতে হবে
                success: function (response) {
                    toastr[response.alertType](response.message);
                    window.location.href = response.redirectTo;
                },
                error: function (xhr) {
                    let errorMessage = xhr.responseJSON?.message || 'An error occurred.';
                    if (xhr.responseJSON?.errors) {
                        errorMessage += '<br>' + Object.values(xhr.responseJSON.errors).flat().join('<br>');
                    }
                    toastr.error(errorMessage);
                }
            });
        });

    </script>
@endpush