@extends('back.layouts.app')
@section('content')
    <div class="pl-3 pr-2 content-wrapper">
        <section class="content-header">
            <div class="row">
                <div class="col-md-5 col-sm-12">
                    <ol class="breadcrumb">
                        <li><a href="{{ admin_url() }}"><i class="fas fa-gauge"></i> Home</a></li>
                        <li class="active">{{ $title }}</li>
                    </ol>
                </div>
                <div class="col-md-7 col-sm-12">@include('back.common_views.quicklinks')</div>
            </div>
        </section>
        <section class="content">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-header">
                        <a href="{{ route('admin.quotes.index') }}" class="btn btn-secondary float-right">
                            <!-- <i class="fas fa-arrow-left"></i> -->
                            View All Quotes
                        </a>
                    </div>
                    <div class="card-body">
                        @if($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <form
                            action="{{ isset($quote) && $quote->id ? route('admin.quotes.update', $quote->id) : route('admin.quotes.store') }}"
                            method="POST" id="quoteForm">
                            @csrf
                            @if(isset($quote) && $quote->id) @method('PUT') @endif
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Quote Number</label>
                                        <input type="text" class="form-control"
                                            value="{{ $quote->quote_number ?? $nextQuoteNumber }}" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="date">Date <span class="text-danger">*</span></label>
                                        <input type="date" class="form-control" id="date" name="date"
                                            value="{{ old('date', isset($quote) ? $quote->date->format('Y-m-d') : date('Y-m-d')) }}"
                                            required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="project_id">Select Project</label>
                                        <select class="form-control" id="project_id" name="project_id">
                                            <option value="">-- New Project / Manual Entry --</option>
                                            @foreach($projects as $project)
                                                <option value="{{ $project->id }}" {{ old('project_id', $quote->project_id ?? '') == $project->id ? 'selected' : '' }}>
                                                    {{ $project->project_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="expiration_type">Expiration <span class="text-danger">*</span></label>
                                        <select class="form-control" id="expiration_type" name="expiration_type" required>
                                            <option value="30_days" {{ old('expiration_type', $quote->expiration_type ?? '30_days') == '30_days' ? 'selected' : '' }}>
                                                30 Days
                                            </option>
                                            <option value="permanent" {{ old('expiration_type', $quote->expiration_type ?? '') == 'permanent' ? 'selected' : '' }}>
                                                Permanent
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="attn">Attn:</label>
                                        <input type="text" class="form-control" id="attn" name="attn"
                                            value="{{ old('attn', $quote->project->attn ?? '') }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="company_organization">Company / Organization</label>
                                        <input type="text" class="form-control" id="company_organization"
                                            name="company_organization"
                                            value="{{ old('company_organization', $quote->project->company_organization ?? '') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="project_name">Project Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="project_name" name="project_name"
                                            value="{{ old('project_name', $quote->project->project_name ?? '') }}" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="phone">Phone</label>
                                        <input type="text" class="form-control phone_mask" id="phone" name="phone"
                                            value="{{ old('phone', $quote->project->phone ?? '') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="email">To Email</label>
                                        <input type="email" class="form-control" id="email" name="email"
                                            value="{{ old('email', $quote->project->email ?? '') }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="address">Address</label>
                                        <textarea class="form-control" id="address" name="address"
                                            rows="1">{{ old('address', $quote->project->address ?? '') }}</textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-4">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="to_emails">CC Email</label>
                                                <input type="text" class="form-control" id="to_emails" name="to_emails"
                                                    value="{{ old('to_emails', $quote->to_emails ?? '') }}"
                                                    placeholder="manager@example.com, another@example.com">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="cc_bcc_emails">BCC</label>
                                                <input type="text" class="form-control" id="cc_bcc_emails"
                                                    name="cc_bcc_emails"
                                                    value="{{ old('cc_bcc_emails', $quote->cc_bcc_emails ?? '') }}"
                                                    placeholder="archive@example.com, bcc@example.com">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Note: Using global_additional_recipients from settings (managed by super-admin) -->
                                </div>
                            </div>
                            <h5>Line Items</h5>
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Qty</th>
                                        <th>Unit</th>
                                        <th>Description</th>
                                        <th>Unit Price</th>
                                        <th>Line Total</th>
                                        <th width="120">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="lineItemsBody">
                                    @if(isset($quote) && $quote->items->count())
                                        @foreach($quote->items as $index => $item)
                                            <tr class="line-item-row">
                                                <td><input type="number" class="form-control qty" name="items[{{ $index }}][qty]"
                                                        value="{{ $item->qty }}"></td>
                                                <td>
                                                    <select class="form-control unit" name="items[{{ $index }}][unit]">
                                                        <option value="SF" {{ $item->unit == 'SF' ? 'selected' : '' }}>SF</option>
                                                        <option value="Pieces" {{ $item->unit == 'Pieces' ? 'selected' : '' }}>Pieces
                                                        </option>
                                                    </select>
                                                </td>
                                                <td><textarea class="form-control description"
                                                        name="items[{{ $index }}][description]">{{ $item->description }}</textarea>
                                                </td>
                                                <td>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend"><span class="input-group-text">$</span>
                                                        </div>
                                                        <input type="number" class="form-control unit-price"
                                                            name="items[{{ $index }}][unit_price]" value="{{ $item->unit_price }}"
                                                            step="0.01">
                                                    </div>
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control line-total"
                                                        value="${{ number_format($item->line_total, 2) }}" readonly>
                                                </td>
                                                <td class="text-center">
                                                    <button type="button" class="btn btn-sm btn-danger remove-item">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                    @if($loop->last)
                                                        <button type="button" class="btn btn-sm btn-success add-item ml-1">
                                                            <i class="fas fa-plus"></i>
                                                        </button>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr class="line-item-row">
                                            <td><input type="number" class="form-control qty" name="items[0][qty]" value="1">
                                            </td>
                                            <td>
                                                <select class="form-control unit" name="items[0][unit]">
                                                    <option value="SF">SF</option>
                                                    <option value="Pieces">Pieces</option>
                                                </select>
                                            </td>
                                            <td><textarea class="form-control description"
                                                    name="items[0][description]"></textarea></td>
                                            <td>
                                                <div class="input-group">
                                                    <div class="input-group-prepend"><span class="input-group-text">$</span>
                                                    </div>
                                                    <input type="number" class="form-control unit-price"
                                                        name="items[0][unit_price]" value="0.00" step="0.01">
                                                </div>
                                            </td>
                                            <td><input type="text" class="form-control line-total" value="$0.00" readonly></td>
                                            <td class="text-center">
                                                <button type="button" class="btn btn-sm btn-danger remove-item">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                                <button type="button" class="btn btn-sm btn-success add-item ml-1"
                                                    id="addLineItem">
                                                    <i class="fas fa-plus"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                            <div class="row">
                                <div class="col-md-6 offset-md-6">
                                    <table class="table">
                                        <tr>
                                            <td><strong>Subtotal:</strong></td>
                                            <td class="text-right"><span id="subtotalDisplay">$0.00</span></td>
                                        </tr>
                                        <tr>
                                            <td>Freight:</td>
                                            <td>
                                                <div class="input-group">
                                                    <div class="input-group-prepend"><span class="input-group-text">$</span>
                                                    </div>
                                                    <input type="number" class="form-control" id="freight" name="freight"
                                                        value="{{ old('freight', $quote->freight ?? 0) }}" step="0.01">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Taxes:</td>
                                            <td>
                                                <div class="input-group">
                                                    <div class="input-group-prepend"><span class="input-group-text">$</span>
                                                    </div>
                                                    <input type="number" class="form-control" id="taxes" name="taxes"
                                                        value="{{ old('taxes', $quote->taxes ?? 0) }}" step="0.01">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="font-weight-bold">
                                            <td>Total:</td>
                                            <td class="text-right"><span id="totalDisplay">$0.00</span></td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <hr>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>Payment Terms:</strong></td>
                                            <td>
                                                <textarea class="form-control" id="payment_terms" name="payment_terms"
                                                    rows="2">{{ old('payment_terms', $quote->payment_terms ?? '') }}</textarea>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>Deposit:</strong></td>
                                            <td>
                                                <div class="input-group">
                                                    <div class="input-group-prepend"><span class="input-group-text">$</span>
                                                    </div>
                                                    <input type="number" class="form-control" id="deposit" name="deposit"
                                                        value="{{ old('deposit', $quote->deposit ?? '') }}" step="0.01">
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

                            <div class="form-group">
                                <button type="submit" name="status" value="draft" class="btn btn-warning save-btn">
                                    <i class="fas fa-save"></i> Save as Draft
                                </button>
                                <button type="submit" name="status" value="sent" class="btn btn-success save-btn">
                                    <i class="fas fa-paper-plane"></i> Save & Mark as Sent
                                </button>
                                <a href="{{ route('admin.quotes.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> Cancel
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- Additional Recipients Modal -->
    <div class="modal fade" id="additionalRecipientsModal" tabindex="-1" role="dialog"
        aria-labelledby="additionalRecipientsModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="additionalRecipientsModalLabel">Add Recipients Email</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="recipient_email_input">Enter Emails</label>
                        <input type="text" class="form-control" id="recipient_email_input"
                            placeholder="email1@example.com, email2@example.com">
                        <small class="form-text text-muted">You can add multiple emails separated by commas.</small>
                    </div>
                    <div id="modal_recipients_preview" class="mt-3">
                        {{-- JS will populate this --}}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="save_additional_recipients">Save Recipients</button>
                </div>
            </div>
        </div>
    </div>
    <style>
        .is-invalid {
            border-color: red !important;
            box-shadow: 0 0 5px rgba(255, 0, 0, 0.4);
        }

        /* Autocomplete Delete Button Styles */
        .ui-menu-item {
            position: relative;
            display: block;
            border: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .ui-menu-item .ui-menu-item-wrapper {
            position: relative !important;
            padding: 10px 45px 10px 15px !important;
            /* Plenty of space for the delete button */
            display: block !important;
            width: 100% !important;
            border: none !important;
            background: transparent;
            color: #333;
            transition: all 0.2s;
        }

        .ui-menu-item .ui-state-active {
            background-color: #007bff !important;
            color: #fff !important;
            border: none !important;
            margin: 0 !important;
        }

        .delete-suggestion {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            cursor: pointer;
            z-index: 1010;
            display: none;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            border-radius: 50%;
            transition: all 0.2s;
            background: rgba(0, 0, 0, 0.05);
        }

        .ui-menu-item:hover .delete-suggestion {
            display: block;
        }

        .delete-suggestion:hover {
            background-color: #dc3545 !important;
            color: #fff !important;
        }

        .ui-state-active .delete-suggestion {
            color: rgba(255, 255, 255, 0.8);
            background: rgba(255, 255, 255, 0.2);
        }

        .ui-autocomplete {
            max-height: 300px;
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 9999 !important;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            border: 1px solid #ddd;
            background: #fff;
            border-radius: 4px;
            padding: 5px 0;
            min-width: 200px;
        }
    </style>
    @push('beforeBodyClose')
        <script>
            $(document).on('input', '#project_name', function () {
                if ($.trim($(this).val()) !== '') {
                    $(this).removeClass('is-invalid');
                }
            });
            $(document).on('input', '.unit-price', function () {
                if (parseFloat($(this).val()) > 0) {
                    $(this).removeClass('is-invalid');
                }
            });
            let itemIndex = {{ (isset($quote) && $quote->items->count()) ? $quote->items->count() : 1 }};
            let availableDescriptions = @json($descriptions ?? []);

            function initAutocomplete($el) {
                $el.autocomplete({
                    source: function (request, response) {
                        var results = $.ui.autocomplete.filter(availableDescriptions, request.term);
                        response(results);
                    },
                    minLength: 0
                }).data("ui-autocomplete")._renderItem = function (ul, item) {
                    var $li = $("<li>").appendTo(ul);
                    var $wrapper = $("<div>")
                        .addClass("ui-menu-item-wrapper")
                        .text(item.label)
                        .appendTo($li);

                    // Only show delete button if user is not a quote-rep
                    @if(auth()->user()->type !== 'quote-rep')
                        var $deleteBtn = $('<span class="delete-suggestion"><i class="fas fa-times"></i></span>');
                        $wrapper.append($deleteBtn); // Append to wrapper instead of li

                        $deleteBtn.on('click', function (e) {
                            e.preventDefault();
                            e.stopPropagation();

                            if (confirm('Are you sure you want to delete this suggestion from the list? This will remove it from all quotes.')) {
                                var descriptionToDelete = item.value;
                                $.ajax({
                                    url: "{{ route('admin.quotes.delete.description') }}",
                                    type: "POST",
                                    data: {
                                        _token: "{{ csrf_token() }}",
                                        description: descriptionToDelete
                                    },
                                    success: function (response) {
                                        if (response.success) {
                                            // Update availableDescriptions array
                                            availableDescriptions = availableDescriptions.filter(function (desc) {
                                                return desc !== descriptionToDelete;
                                            });
                                            // Close the current autocomplete menu
                                            $el.autocomplete("close");
                                            alert(response.message);
                                        } else {
                                            alert(response.message);
                                        }
                                    },
                                    error: function () {
                                        alert('Error deleting description suggestion.');
                                    }
                                });
                            }
                        });
                    @endif

                                                                    return $li;
                };

                // Show suggestions on focus
                $el.on('focus', function () {
                    $(this).autocomplete("search", $(this).val());
                });
            }

            $(document).ready(function () {
                // Initialize autocomplete for existing items
                $(".description").each(function () {
                    initAutocomplete($(this));
                });
                calculateTotals();
                updateActionButtons();
                // Validate on button click to prevent global submission handlers from triggering
                $('.save-btn').on('click', function (e) {
                    let isValid = true;
                    $('.unit-price').each(function () {
                        let price = parseFloat($(this).val()) || 0;
                        if (price <= 0) {
                            isValid = false;
                            return false; // Break loop
                        }
                    });
                    if (!isValid) {
                        e.preventDefault();
                        e.stopImmediatePropagation();
                        let hasError = false;
                        // 1️⃣ Project Name validation (FIRST)
                        let projectName = $('#project_name');
                        if ($.trim(projectName.val()) === '') {
                            projectName.addClass('is-invalid').focus();
                            hasError = true;
                        } else {
                            projectName.removeClass('is-invalid');
                        }
                        // 2️⃣ Unit Price validation (SECOND)
                        $('.unit-price').each(function () {
                            let value = parseFloat($(this).val());
                            if (value <= 0 || $(this).val() === '') {
                                $(this).addClass('is-invalid');
                                if (!hasError) {
                                    $(this).focus();
                                    hasError = true;
                                }
                            } else {
                                $(this).removeClass('is-invalid');
                            }
                        });
                        return false;
                    }
                });
                // Project selection change
                $('#project_id').on('change', function () {
                    let projectId = $(this).val();
                    if (projectId) {
                        $.ajax({
                            url: `{{ url('adminmedia/projects') }}/${projectId}/details`,
                            type: 'GET',
                            success: function (response) {
                                if (response.success) {
                                    $('#project_name').val(response.project.project_name);
                                    $('#attn').val(response.project.attn);
                                    $('#company_organization').val(response.project.company_organization);
                                    $('#phone').val(response.project.phone);
                                    $('#email').val(response.project.email);
                                    $('#address').val(response.project.address);
                                }
                            }
                        });
                    } else {
                        // Clear fields for manual entry
                        $('#project_name').val('');
                        $('#attn').val('');
                        $('#company_organization').val('');
                        $('#phone').val('');
                        $('#email').val('');
                        $('#address').val('');
                        $('#to_emails').val('');
                    }
                });
                // Calculate line totals when qty or unit price changes
                $(document).on('input', '.qty, .unit-price', function () {
                    let row = $(this).closest('tr');
                    updateLineTotal(row);
                });
                // Calculate totals when freight or taxes change
                $('#freight, #taxes').on('input', function () {
                    calculateTotals();
                });
                // Add new line item
                $(document).on('click', '.add-item', function () {
                    let newRow = `
                                                                                                                                                                                                                                                                            <tr class="line-item-row">
                                                                                                                                                                                                                                                                                <td><input type="number" class="form-control qty" name="items[${itemIndex}][qty]" value="1" min="1" required></td>
                                                                                                                                                                                                                                                                                <td>
                                                                                                                                                                                                                                                                                    <select class="form-control unit" name="items[${itemIndex}][unit]" required>
                                                                                                                                                                                                                                                                                        <option value="SF">SF</option>
                                                                                                                                                                                                                                                                                        <option value="Pieces">Pieces</option>
                                                                                                                                                                                                                                                                                    </select>
                                                                                                                                                                                                                                                                                </td>
                                                                                                                                                                                                                                                                                <td><textarea class="form-control description" name="items[${itemIndex}][description]" rows="2"></textarea></td>
                                                                                                                                                                                                                                                                                <td><input type="number" class="form-control unit-price" name="items[${itemIndex}][unit_price]" value="0.00" step="0.01" min="0" required></td>
                                                                                                                                                                                                                                                                                <td><input type="text" class="form-control line-total" value="$0.00" readonly></td>
                                                                                                                                                                                                                                                                                <td class="text-center">
                                                                                                                                                                                                                                                                                    <button type="button" class="btn btn-sm btn-danger remove-item"><i class="fas fa-trash"></i></button>
                                                                                                                                                                                                                                                                                    <button type="button" class="btn btn-sm btn-success add-item ml-1"><i class="fas fa-plus"></i></button>
                                                                                                                                                                                                                                                                                </td>
                                                                                                                                                                                                                                                                            </tr>
                                                                                                                                                                                                                                                                        `;
                    let $row = $(newRow);
                    $('#lineItemsBody').append($row);
                    // Initialize autocomplete on new row
                    initAutocomplete($row.find(".description"));
                    itemIndex++;
                    updateItemIndices();
                    updateActionButtons();
                });
                // Remove line item
                $(document).on('click', '.remove-item', function () {
                    if ($('.line-item-row').length > 1) {
                        $(this).closest('tr').remove();
                        updateItemIndices();
                        calculateTotals();
                        updateActionButtons();
                    } else {
                        alert('At least one line item is required.');
                    }
                });
            });
            function updateLineTotal(row) {
                let qty = parseFloat(row.find('.qty').val()) || 0;
                let unitPrice = parseFloat(row.find('.unit-price').val()) || 0;
                let lineTotal = qty * unitPrice;
                row.find('.line-total').val('$' + lineTotal.toFixed(2));
                calculateTotals();
            }
            function calculateTotals() {
                let subtotal = 0;
                $('.line-item-row').each(function () {
                    let qty = parseFloat($(this).find('.qty').val()) || 0;
                    let unitPrice = parseFloat($(this).find('.unit-price').val()) || 0;
                    subtotal += (qty * unitPrice);
                });
                let freight = parseFloat($('#freight').val()) || 0;
                let taxes = parseFloat($('#taxes').val()) || 0;
                let total = subtotal + freight + taxes;
                $('#subtotalDisplay').text('$' + subtotal.toFixed(2));
                $('#totalDisplay').text('$' + total.toFixed(2));
            }
            function updateItemIndices() {
                $('.line-item-row').each(function (index) {
                    $(this).find('.qty').attr('name', `items[${index}][qty]`);
                    $(this).find('.unit').attr('name', `items[${index}][unit]`);
                    $(this).find('.description').attr('name', `items[${index}][description]`);
                    $(this).find('.unit-price').attr('name', `items[${index}][unit_price]`);
                });
                itemIndex = $('.line-item-row').length;
            }
            function updateActionButtons() {
                let rows = $('.line-item-row');
                // Hide all + buttons
                rows.find('.add-item').hide();
                // Show + button only on last row
                rows.last().find('.add-item').show();
                // Hide delete button on first row
                rows.first().find('.remove-item').hide();
                // Show delete buttons on all other rows
                rows.not(':first').find('.remove-item').show();
            }
            function saveNewProject() {
                let formData = {
                    _token: $('input[name="_token"]').val(),
                    project_name: $('#new_project_name').val(),
                    contact_name: $('#new_contact_name').val(),
                    phone: $('#new_phone').val(),
                    email: $('#new_email').val(),
                    address: $('#new_address').val()
                };
                $.ajax({
                    url: '{{ route('admin.projects.ajax.create') }}',
                    type: 'POST',
                    data: formData,
                    success: function (response) {
                        if (response.success) {
                            $('#project_id').append(`<option value="${response.project.id}" selected>${response.project.project_name}</option>`);
                            $('#newProjectModal').modal('hide');
                            $('#newProjectForm')[0].reset();
                            alert('Project created successfully!');
                        }
                    },
                    error: function (xhr) {
                        alert('Error creating project. Please check all fields.');
                    }
                });
            }
            // Additional Recipients Logic
            let additionalEmails = [];
            const hiddenInput = $('#additional_recipients_hidden');
            const previewMain = $('#additional_recipients_preview');
            const previewModal = $('#modal_recipients_preview');
            const inputField = $('#recipient_email_input');
            // Initialize from existing value or global defaults
            let existingValue = hiddenInput.val();
            let globalRecipients = "{{ $globalRecipients ?? '' }}";
            if (existingValue) {
                additionalEmails = existingValue.split(',').map(e => e.trim()).filter(e => e !== "");
                updatePreviews();
            } else if (globalRecipients) {
                additionalEmails = globalRecipients.split(',').map(e => e.trim()).filter(e => e !== "");
                updatePreviews();
            }
            $('#save_additional_recipients').on('click', function () {
                let val = inputField.val();
                if (val) {
                    let newEmails = val.split(',').map(e => e.trim()).filter(e => e !== "");
                    newEmails.forEach(email => {
                        if (email && !additionalEmails.includes(email)) {
                            additionalEmails.push(email);
                        }
                    });
                    inputField.val('');
                    updatePreviews();
                }
                $('#additionalRecipientsModal').modal('hide');
            });
            function updatePreviews() {
                let html = "";
                additionalEmails.forEach((email, index) => {
                    html += `<span class="badge badge-info mr-2 mb-2 p-2">
                                                                                                                                                                                                                                                                                                                ${email}         
                                                                                                                                                                                                                                                                                                                <i class        ="fas fa-times ml-1 cursor-pointer remove-recipient" data-index="${index}" style="cursor:pointer"></i>
                                                                                                                                                                                                                                                                                                             </span>`        ;
                });
                previewMain.html(html);
                previewModal.html(html);
                hiddenInput.val(additionalEmails.join(', '));
            }
            $(document).on('click', '.remove-recipient', function () {
                let index = $(this).data('index');
                additionalEmails.splice(index, 1);
                updatePreviews();
            });
        </script>
    @endpush
@endsection