@props(['user_details', 'userAssigned', 'id'])
@php
    $nisd = true;
    if (in_array($user_details->roles[0]->name, ['APPROVER', 'CHECKER'])) {
        $nisd = false;
    }
@endphp

<div class="offcanvas offcanvas-end w-30" tabindex="-1" id="sendNotingOffcanvas" aria-labelledby="sendNotingOffcanvasLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="sendNotingOffcanvasLabel">Add New Note & Forward</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div id="notingContainer">
            <h6 class="mb-3 text-black border-bottom pb-2">
                <i class="fas fa-pen-fancy me-1"></i> Add New Note &amp; Forward
            </h6>
            <form id="notingForm">
                @csrf
                <div class="mb-3">
                    <label class="form-label fw-semibold">Note Content <span class="text-danger">*</span></label>
                    <textarea class="form-control" id="noteText" name="note_content" rows="3" placeholder="Enter your note here..." required></textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Sent To<span class="text-danger">*</span></label>
                    <select name="sent_to[]" id="sent_to" class="form-input form-select select2" multiple>
                        @if ($nisd)
                            @foreach ($userAssigned as $user)
                                <option value="{{ $user->assigned_to }}">{{ $user->assignedTo->name }}</option>
                            @endforeach  
                        @else
                            @foreach ($userAssigned as $user)
                                <option value="{{ $user->assigned_by }}">{{ $user->assignedBy->name }}</option>
                            @endforeach  
                        @endif
                               
                    </select>
                </div>

                <div class="d-flex gap-2 justify-content-end">
                    <button type="submit" class="btn btn-lg btn-light border shadow-sm w-50 rounded-3">
                        <i class="fas fa-share-square me-2"></i> Sent
                    </button>
                </div>
            </form>     
        </div>
    </div>
</div>

@section('send-noting-offcanvas-script')
    <script>
        $('#notingForm').on('submit', function(e) {
            e.preventDefault();
            const form = document.getElementById('notingForm');
            formData = new FormData(form);

            $.ajax({
                url: "{{ route('admin.noting.store', ['id' => $id]) }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        Swal.fire('Success!', response.message, 'success').then(() => {
                            $('#assignToOffcanvas').offcanvas('hide');
                            location.reload();
                        });
                    } else {
                        Swal.fire('Error!', response.message || 'Something went wrong.', 'error');
                    }
                },
                error: function(xhr) {
                    let msg = xhr.responseJSON?.message || 'Something went wrong.';
                    Swal.fire('Error!', msg, 'error');
                }
            });
        });

        $(document).ready(function() {
            $('#sent_to').select2();
        });
    </script>
@endsection