@extends('layouts.invoicetab')
@section('title', 'Proposal Management')
<link rel="stylesheet"
    href="https://demos.themeselection.com/materio-bootstrap-html-admin-template/assets/vendor/libs/quill/editor.css">

@section('invoice_content')




    <div class="row">
        <div class="col-md-4 mb-4">
            <div class="card shadow-lg border-light rounded-3 h-100">
                <div class="card-body text-center">
                    <a class="nav-link {{ request()->is('seo_categories') ? 'active' : '' }} waves-effect waves-light"
                        href="{{ url('seo_categories') }}">
                        <div class="mb-3">
                            <i class="mdi mdi-file-document-outline display-4 text-primary"></i>
                        </div>
                        <h5 class="card-title">SEO Services</h5>
                        <p class="card-text">Optimize your site with our professional SEO services to boost visibility.</p>
                        <p class="text-primary">Add SEO Services</p>
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-4 mb-4">
            <div class="card shadow-lg border-light rounded-3 h-100">
                <div class="card-body text-center">
                    <a class="nav-link {{ request()->is('security') ? 'active' : '' }} waves-effect waves-light"
                        href="{{ url('security') }}">
                        <div class="mb-3">
                            <i class="mdi mdi-lock-outline display-4 text-danger"></i>
                        </div>
                        <h5 class="card-title">Security Services</h5>
                        <p class="card-text">Ensure the safety and security of your assets with our expert security
                            solutions.</p>
                        <p class="text-primary">Add Security Services</p>
                    </a>
                </div>
            </div>
        </div>
    </div>




    <div class="card">
        <div class="card-datatable table-responsive">
            <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
                <div class="row ms-2 me-3">
                    <div
                        class="col-12 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start ps-3 gap-4">
                        <div class="dt-action-buttons text-xl-end text-lg-start text-md-end text-start">
                            <div class="dt-buttons btn-group flex-wrap">
                                {{-- <a href="{{ route('proposals.create') }}"
                                    class="btn btn-secondary btn-primary waves-effect waves-light">
                                    <i class="ri-add-line ri-16px me-md-1_5"></i>
                                    <span class="d-md-inline-block d-none">Create New Proposal</span>
                                </a> --}}
                                <!-- Button to trigger modal -->
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                    data-bs-target="#proposalModal">
                                    Send New Proposal
                                </button>

                                <!-- Proposal Modal -->
                                <div class="modal fade" id="proposalModal" tabindex="-1"
                                    aria-labelledby="proposalModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="proposalModalLabel">Send New Proposal</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                @if ($errors->any())
                                                    <div class="alert alert-danger">
                                                        <ul>
                                                            @foreach ($errors->all() as $error)
                                                                <li>{{ $error }}</li>
                                                            @endforeach
                                                        </ul>
                                                    </div>
                                                @endif

                                                <form action="{{ route('proposals.store') }}" method="POST">
                                                    @csrf
                                                    <div class="form-floating form-floating-outline mb-4">
                                                        <input type="text" name="title" class="form-control" id="title"
                                                            placeholder="Enter proposal title..." value="{{ old('title') }}"
                                                            required>
                                                        <label for="title">Title</label>
                                                    </div>

                                                    <div class="mb-4 position-relative">
                                                        <label for="clientSearch" class="form-label"
                                                            style="float: left;">Client</label>
                                                        <input type="text" class="form-control" id="clientSearch"
                                                            placeholder="Select Client..." autocomplete="off"
                                                            data-bs-toggle="dropdown">

                                                        <ul class="dropdown-menu w-100" id="clientDropdown"
                                                            style="max-height: 200px; overflow-y: auto;">
                                                            <!-- Search box inside dropdown -->
                                                            <li class="px-2 py-2">
                                                                <input type="text" class="form-control" id="dropdownSearch"
                                                                    placeholder="Search...">
                                                            </li>
                                                            <li>
                                                                <hr class="dropdown-divider">
                                                            </li>
                                                            <!-- Client items -->
                                                            @foreach($clients as $client)
                                                                <li class="dropdown-item client-item"
                                                                    data-id="{{ $client->id }}">
                                                                    {{ $client->name }}
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                        <input type="hidden" name="client_id" id="client_id_hidden">
                                                    </div>

                                                    <script>
                                                        document.addEventListener('DOMContentLoaded', function () {
                                                            const searchInput = document.getElementById('clientSearch');
                                                            const dropdown = new bootstrap.Dropdown(searchInput);
                                                            const clientDropdown = document.getElementById('clientDropdown');
                                                            const dropdownSearch = document.getElementById('dropdownSearch');
                                                            const hiddenInput = document.getElementById('client_id_hidden');
                                                            const clientItems = clientDropdown.querySelectorAll('.client-item');

                                                            // Show dropdown when input is focused
                                                            searchInput.addEventListener('focus', () => {
                                                                dropdown.show();
                                                            });

                                                            // Filter clients inside dropdown
                                                            dropdownSearch.addEventListener('input', function () {
                                                                const filter = this.value.toLowerCase();
                                                                clientItems.forEach(item => {
                                                                    if (item.textContent.toLowerCase().includes(filter)) {
                                                                        item.style.display = '';
                                                                    } else {
                                                                        item.style.display = 'none';
                                                                    }
                                                                });
                                                            });

                                                            // Select client
                                                            clientItems.forEach(item => {
                                                                item.addEventListener('click', function () {
                                                                    searchInput.value = this.textContent;
                                                                    hiddenInput.value = this.dataset.id;
                                                                    bootstrap.Dropdown.getInstance(searchInput).hide();
                                                                });
                                                            });

                                                            // Reset dropdown search when opening
                                                            searchInput.addEventListener('click', function () {
                                                                dropdownSearch.value = '';
                                                                clientItems.forEach(item => item.style.display = '');
                                                            });
                                                        });
                                                    </script>


                                                    <div class="form-floating form-floating-outline mb-4">
                                                        <select name="project_type" class="form-control" id="project_type"
                                                            required>
                                                            <option value="" disabled selected>Select Project Type</option>
                                                            @foreach($ptypes as $type)
                                                                <option value="{{ $type->id }}" {{ old('project_type') == $type->id ? 'selected' : '' }}>
                                                                    {{ $type->category }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <label for="project_type">Project Type</label>
                                                    </div>

                                                    <div class="form-floating form-floating-outline mb-4">
                                                        <select name="industry" class="form-control" id="industry" required>
                                                            <option value="" disabled selected>Select Industry</option>
                                                            @foreach($industries as $industry)
                                                                <option value="{{ $industry->id }}" {{ old('industry') == $industry->id ? 'selected' : '' }}>
                                                                    {{ $industry->page_name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <label for="industry">Industry</label>
                                                    </div>

                                                    <div class="form-floating form-floating-outline mb-4">
                                                        <select name="solution" class="form-control" id="solution" required>
                                                            <option value="" disabled selected>Select Solution</option>
                                                            @foreach($solutions as $solution)
                                                                <option value="{{ $solution->id }}" {{ old('solution') == $solution->id ? 'selected' : '' }}>
                                                                    {{ $solution->page_name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <label for="solution">Solution</label>
                                                    </div>

                                                    <div class="form-floating form-floating-outline mb-4">
                                                        <textarea name="description" class="form-control" id="description"
                                                            placeholder="Enter description..."
                                                            required>{{ old('description') }}</textarea>
                                                        <label for="description">Description</label>
                                                    </div>

                                                    <div class="form-floating form-floating-outline mb-4">
                                                        <input type="number" name="amount" class="form-control" id="amount"
                                                            placeholder="Enter amount..." step="0.01" min="0"
                                                            value="{{ old('amount') }}" required>
                                                        <label for="amount">Amount ($)</label>
                                                    </div>

                                                    <div class="form-floating form-floating-outline mb-4">
                                                        <input type="date" name="sent_date" class="form-control"
                                                            id="sent_date" value="{{ old('sent_date') }}">
                                                        <label for="sent_date">Sent Date</label>
                                                    </div>

                                                    <div class="form-floating form-floating-outline mb-4">
                                                        <input type="date" name="expiry_date" class="form-control"
                                                            id="expiry_date" value="{{ old('expiry_date') }}">
                                                        <label for="expiry_date">Expiry Date</label>
                                                    </div>



                                                    <div class="form-floating form-floating-outline mb-4">
                                                        <textarea class="form-control" name="essential_modules"
                                                            id="essential_modules"
                                                            style="display:none;">{{ old('essential_modules') }}</textarea>
                                                        <div id="editor" class="form-control" style="height: 250px;"></div>
                                                        <label>Essential Modules</label>
                                                    </div>


                                                    <div class="form-floating form-floating-outline mb-4">
                                                        <textarea name="benefits" class="form-control" id="benefits"
                                                            style="display:none;">{{ old('benefits') }}</textarea>
                                                        <div id="editor-benefits" class="form-control"
                                                            style="height: 250px;"></div>
                                                        <label>Benefits</label>
                                                    </div>

                                                    <div class="mb-4 text-start">
                                                        <label class="form-label">SEO Services</label>
                                                        <div class="card form-control">
                                                            <div class="card-body">
                                                                @foreach($seo_categories as $category)
                                                                    <strong>{{ $category->name }}</strong>
                                                                    <div class="mt-4 mb-4">
                                                                        @foreach($category->services as $service)
                                                                            <div class="form-check">
                                                                                <input type="checkbox" class="form-check-input"
                                                                                    name="seo[]" value="{{ $service->id }}"
                                                                                    id="service_{{ $service->id }}"
                                                                                    @if(!empty(old('seo')) && in_array($service->id, old('seo'))) checked @endif>
                                                                                <label class="form-check-label"
                                                                                    for="service_{{ $service->id }}">
                                                                                    {{ $service->service_name }}
                                                                                </label>
                                                                            </div>
                                                                        @endforeach
                                                                    </div>

                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="mb-4 text-start">
                                                        <label class="form-label">Security Services</label>
                                                        <div class="card form-control">
                                                            <div class="card-body">
                                                                @foreach($security_categories as $seccategory)
                                                                    <strong>{{ $seccategory->name }}</strong>
                                                                    <div class="mt-4 mb-4">
                                                                        @foreach($seccategory->services as $service)
                                                                            <div class="form-check">
                                                                                <input type="checkbox" class="form-check-input"
                                                                                    name="security[]" value="{{ $service->id }}"
                                                                                    id="service_{{ $service->id }}"
                                                                                    @if(!empty(old('security')) && in_array($service->id, old('security'))) checked
                                                                                    @endif>
                                                                                <label class="form-check-label"
                                                                                    for="service_{{ $service->id }}">
                                                                                    {{ $service->name }}
                                                                                </label>
                                                                            </div>
                                                                        @endforeach
                                                                    </div>

                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    </div>



                                                    <div class="form-floating form-floating-outline mb-4">
                                                        <select name="status" class="form-control" id="status">
                                                            <option value="pending" {{ old('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                                            <option value="accepted" {{ old('status') == 'accepted' ? 'selected' : '' }}>Accepted</option>
                                                            <option value="rejected" {{ old('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                                                        </select>
                                                        <label for="status">Status</label>
                                                    </div>

                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Close</button>
                                                        <button type="submit" class="btn btn-primary">Send Proposal</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Bootstrap JS (ensure Bootstrap 5 is included) -->


                            </div>
                        </div>
                    </div>
                    <div
                        class="col-12 col-md-6 d-flex align-items-center justify-content-end flex-column flex-md-row pe-3 gap-md-4 mt-n5 mt-md-0">
                        <div id="DataTables_Table_0_filter" class="dataTables_filter">
                            <label>
                                <input type="search" class="form-control form-control-sm" placeholder="Search Proposals"
                                    aria-controls="DataTables_Table_0">
                            </label>
                        </div>
                    </div>
                </div>

                @if(session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif

                <table class="invoice-list-table table dataTable no-footer dtr-column" id="DataTables_Table_0">
                    <thead>
                        <tr>
                            <th>#ID</th>
                            <th>Title</th>
                            <th>Client</th>
                            <th>Amount</th>
                            <th>Sent Date</th>
                            <th>Expiry Date</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($proposals as $proposal)
                            <tr>
                                <td>PROP-{{ str_pad($proposal->id, 4, '0', STR_PAD_LEFT) }}</td>

                                <td>{{ $proposal->title }}</td>
                                <td>
                                    <div class="d-flex justify-content-start align-items-center">
                                        <div class="avatar-wrapper">
                                            <div class="avatar avatar-sm me-3">
                                                <span class="avatar-initial rounded-circle bg-label-warning">
                                                    {{ strtoupper(substr($proposal->client->name, 0, 1)) }}{{ isset($proposal->client->name) && str_contains($proposal->client->name, ' ') ? strtoupper(substr(strrchr($proposal->client->name, ' '), 1, 1)) : '' }}
                                                </span>
                                            </div>
                                        </div>
                                        <div class="d-flex flex-column gap-50">
                                            <a href="#" class="text-truncate text-heading fw-medium">
                                                <p class="mb-0">{{ $proposal->client->name ?? 'Unknown' }}</p>
                                            </a>
                                            <small class="text-truncate">{{ $proposal->client->email ?? '' }}</small>
                                        </div>
                                    </div>
                                </td>

                                <td>₹ {{ number_format($proposal->amount, 2) }}</td>
                                <td>{{ $proposal->sent_date ? $proposal->sent_date->format('d M, Y') : 'N/A' }}</td>
                                <td>{{ $proposal->expiry_date ? $proposal->expiry_date->format('d M, Y') : 'N/A' }}</td>
                                <td>
                                    <span
                                        class="badge bg-{{ $proposal->status == 'pending' ? 'warning' : ($proposal->status == 'accepted' ? 'success' : 'danger') }}">
                                        {{ ucfirst($proposal->status) }}
                                    </span>

                                </td>
                                <td class="picons d-flex">
                                    <a href="#" class="btn-sm edit-btn me-2" data-id="{{ $proposal->id }}"
                                        data-bs-toggle="offcanvas" data-bs-target="#editProposalCanvas" data-bs-toggle="tooltip"
                                        title="Edit Proposal">
                                        <span class="mdi mdi-square-edit-outline"></span>
                                    </a>

                                    @if($proposal->proposal_status == 1)
                                        <a class="open-modules-modal me-2" data-proposal-id="{{ $proposal->id }}"
                                            data-bs-toggle="modal" data-bs-target="#viewModulesModal" data-bs-toggle="tooltip"
                                            title="View Modules">
                                            <span class="mdi mdi-format-list-bulleted"></span>
                                        </a>
                                    @else
                                        <a class="open-assign-modal me-2" data-proposal-id="{{ $proposal->id }}"
                                            data-bs-toggle="modal" data-bs-target="#assignEmployeeModal" data-bs-toggle="tooltip"
                                            title="Assign Employee">
                                            <span class="mdi mdi-account-outline"></span>
                                        </a>
                                    @endif

                                    <a href="#" class="btn-sm" data-bs-toggle="modal"
                                        data-bs-target="#addModules_{{ $proposal->id }}" data-bs-toggle="tooltip"
                                        title="Proposed Infirmations">
                                        <div class="d-flex align-items-center">
                                            <i class="mdi mdi-format-list-group-plus text-success ri-22px me-2"></i>

                                        </div>
                                    </a>
                                    <a href="#" class="btn-sm" data-bs-toggle="modal"
                                        data-bs-target="#timeline_{{ $proposal->id }}" title="Project Timeline">
                                        <i class="mdi mdi-clock-edit-outline text-warning ri-22px me-2"></i>
                                    </a>

                                    <a type="button" class="btn-sm previewProposal" data-id="{{ $proposal->id }}"
                                        data-bs-toggle="tooltip" title="Preview Proposal">
                                        <i class="mdi mdi-eye-outline ri-22px me-2"></i>
                                    </a>

                                    <!-- Check if the PDF exists and enable/disable the 'Send Proposal' button -->
                                    <a data-bs-toggle="modal" data-bs-target="#sendProposalModal_{{ $proposal->id }}"
                                        data-bs-toggle="tooltip" title="Send Proposal" id="sendProposalBtn_{{ $proposal->id }}"
                                        class="{{ !$pdfExists[$proposal->id] || $proposal->sent == 1 ? 'disabled' : '' }}"
                                        style="{{ !$pdfExists[$proposal->id] || $proposal->sent == 1 ? 'pointer-events: none; opacity: 0.5;' : '' }}">

                                        @if($proposal->sent == 1)
                                            <span class="badge rounded-pill bg-label-success">Mail Sent</span>
                                        @else
                                            <i class="mdi mdi-email-arrow-right text-success ri-22px me-2"></i>
                                            <!-- Send mail icon -->
                                        @endif
                                    </a>




                                    {{-- <a data-bs-toggle="modal" data-bs-target="#sendProposalModal_{{ $proposal->id }}"
                                        data-bs-toggle="tooltip" title="Send Proposal"><span
                                            class="mdi mdi-email-arrow-right text-success"></span></a> --}}

                                    {{-- <form action="{{ route('proposals.destroy', $proposal->id) }}" method="POST"
                                        style="display:inline;">
                                        @csrf
                                        @method('DELETE')
                                        <a type="submit" class="btn-sm" onclick="return confirm('Are you sure?')"
                                            data-bs-toggle="tooltip" title="Delete Proposal">
                                            <span class="mdi mdi-delete-outline"></span>
                                        </a>
                                    </form> --}}

                                </td>

                            </tr>


                        @empty
                            <tr>
                                <td colspan="8" class="text-center">No proposals found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>

                 <div class="d-flex justify-content-center col-md-2 pagination mt-4 mb-4">
                 @if($proposals->hasPages())
                    {{ $proposals->links() }}
                @endif
            </div>

               
            </div>
        </div>
    </div>


    @forelse($proposals as $proposal)
        {{-- timeline --}}
        <div class="modal fade" id="timeline_{{ $proposal->id }}" tabindex="-1"
            aria-labelledby="timelineLabel_{{ $proposal->id }}" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="timelineLabel_{{ $proposal->id }}">Project Timeline</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <div class="modal-body">
                            <div class="alert alert-success edit-success-message" style="display: none;"></div>
                            <!-- ✅ Success message container -->
                            <div class="alert alert-success update-success-message" style="display: none;"></div>
                            <div class="alert alert-success delete-success-message" style="display: none;"></div>

                        </div>



                        <!-- Form for AJAX Submission -->
                        <form id="addTimelineForm_{{ $proposal->id }}">
                            @csrf
                            <input type="hidden" name="proposal_id" value="{{ $proposal->id }}">

                            <div class="row">
                                <!-- Module Name Field -->
                                <div class="mb-3 col-md-6">
                                    <label for="moduleName_{{ $proposal->id }}" class="form-label">Module Name</label>
                                    <input type="text" class="form-control moduleName" id="moduleName_{{ $proposal->id }}"
                                        name="title" required aria-describedby="moduleHelp_{{ $proposal->id }}">

                                </div>
                                <!-- Unit Field (Days, Hours, Weeks, Months) -->
                                <div class="mb-3 col-md-2">
                                    <label for="durationUnit_{{ $proposal->id }}" class="form-label">Unit</label>
                                    <select class="form-control" id="durationUnit_{{ $proposal->id }}" name="unit" required>
                                        <option value="days">Days</option>
                                        <option value="hours">Hours</option>
                                        <option value="weeks">Weeks</option>
                                        <option value="months">Months</option>
                                    </select>
                                </div>
                                <!-- Duration Field -->
                                <div class="mb-3 col-md-2">
                                    <label for="moduleDuration_{{ $proposal->id }}" class="form-label">Duration</label>
                                    <input type="number" class="form-control moduleDuration"
                                        id="moduleDuration_{{ $proposal->id }}" name="duration" min="0" step="0.5" required
                                        pattern="\d+(\.\d{1,2})?" aria-describedby="durationHelp_{{ $proposal->id }}">

                                </div>


                                <!-- Save Button -->
                                <div class="text-end col-md-2 mt-4">
                                    <button type="button" class="btn btn-success saveTimelineBtn" data-id="{{ $proposal->id }}">
                                        <i class="mdi mdi-content-save-check-outline"></i> Save
                                    </button>
                                </div>
                            </div>
                        </form>

                        <!-- Area to show the added modules -->
                        <table class="table table-bordered" id="moduleTable_${proposalId}">
                            <thead class="table-dark">
                                <tr>
                                    <th>#</th>
                                    <th>Title</th>
                                    <th>Unit</th>
                                    <th>Duration</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="addedTimeline_{{ $proposal->id }}">
                                <!-- Timeline rows will be appended here -->
                            </tbody>
                        </table>
                        {{-- <div id="addedTimeline_{{ $proposal->id }}" class="mt-3"></div> --}}

                        <!-- Remaining duration area -->
                        <!-- Total Duration Area -->
                        <div class="mt-3">
                            <div class="alert alert-info">
                                <span>Total Duration: <strong id="totalDurationValue_{{ $proposal->id }}">0</strong></span>
                            </div>

                            <!-- Optional: Display in weeks and months -->
                            <div class="alert alert-info">
                                <span>In Weeks: <strong id="totalDurationInWeeks_{{ $proposal->id }}">0</strong></span>
                            </div>
                            <div class="alert alert-info">
                                <span>In Months: <strong id="totalDurationInMonths_{{ $proposal->id }}">0</strong></span>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Delete Confirmation Modal -->
        <div class="modal fade" id="deleteConfirmationModal" tabindex="-1" aria-labelledby="deleteConfirmationLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteConfirmationLabel">Confirm Deletion</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to delete this timeline entry? This action cannot be undone.
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Yes, Delete</button>
                    </div>
                </div>
            </div>
        </div>


        {{-- proposed website --}}
        <div class="modal fade" id="addModules_{{ $proposal->id }}" tabindex="-1"
            aria-labelledby="addModulesLabel_{{ $proposal->id }}" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addModulesLabel_{{ $proposal->id }}">
                            Proposed Website Information Hierarchy - {{ $proposal->title }}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="update-success-message"></div> <!-- Success message will show here -->
                        <div class="delete-success-message" style="display: none;"></div>
                        <!-- Form for AJAX Submission -->
                        <form id="addModuleForm_{{ $proposal->id }}">
                            @csrf
                            <input type="hidden" name="proposal_id" value="{{ $proposal->id }}">

                            <!-- Rich Text Editor -->
                            <div class="col-12">
                                <div class="card">
                                    <h5 class="card-header">Full Editor</h5>
                                    <div class="card-body">
                                        <div id="full-editor_{{ $proposal->id }}"></div> <!-- Unique Quill editor -->
                                    </div>
                                </div>
                            </div>

                            <!-- Hidden field to store Quill editor content -->
                            <input type="hidden" id="moduleName_{{ $proposal->id }}" name="title">

                            <div class="row">
                                <div class="text-end col-md-12 mt-3">
                                    <button type="button" class="btn btn-success" id="saveModule_{{ $proposal->id }}">
                                        <i class="mdi mdi-content-save-check-outline"></i> Save
                                    </button>
                                </div>
                            </div>
                        </form>

                        <!-- Table to Show Added Modules -->
                        <div id="addedModules_{{ $proposal->id }}" class="mt-3"></div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>

                </div>
            </div>
        </div>

        {{-- preview --}}
        <div class="offcanvas offcanvas-end w-100" tabindex="-1" id="previewOffcanvas" aria-labelledby="previewOffcanvasLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="previewOffcanvasLabel">Proposal Preview</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <div id="previewContent">
                    <!-- Content will be loaded dynamically -->
                </div>

            </div>
        </div>

        {{-- /end --}}
        <!-- Send Invoice Sidebar -->
        <!-- Bootstrap Modal for Sending Proposal -->
        <div class="modal fade" id="sendProposalModal_{{ $proposal->id }}" tabindex="-1"
            aria-labelledby="sendProposalModalLabel_{{ $proposal->id }}" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="sendProposalModalLabel_{{ $proposal->id }}">Send Proposal via Email</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('proposal.send', $proposal->id) }}" method="POST">
                            @csrf
                            <div class="mb-3">
                                <label for="recipientEmail" class="form-label">Recipient Email</label>
                                <input type="email" class="form-control" name="recipient_email" id="recipientEmail" required>
                            </div>
                           <div class="mb-3">
    <label for="subject" class="form-label">Subject</label>
    <input type="text" 
           class="form-control" 
           name="subject" 
           id="subject"
           value="Proposal for {{ $proposal->industryModal?->page_name ?? 'N/A' }}" 
           required>
</div>

                            <div class="mb-3">
                                <label for="message" class="form-label">Message</label>
                               <textarea class="form-control" name="message" id="message" rows="4">Dear {{ $proposal->client?->name ?? 'Valued Client' }},

Please find the attached proposal for {{ $proposal->industryModal?->page_name ?? 'our services' }}. Let us know if you have any questions.

Best regards,
Zillion IT Solutions
</textarea>

                            </div>
                            <div class="mb-3">
                                <label class="form-label">Attachment</label>
                                @php
                                    $proposalTitle = preg_replace('/[^A-Za-z0-9-_]/', '_', $proposal->title); // Sanitize title
                                    $date = $proposal->created_at->format('Ymd'); // Get only YYYYMMDD
                                    $filename = "Proposal_{$proposalTitle}_{$date}.pdf";
                                @endphp
                                <input type="text" class="form-control" value="{{ $filename }}" readonly>
                            </div>

                            <button type="submit" class="btn btn-primary">Send Proposal</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- /Send Invoice Sidebar -->
    @empty
    @endforelse



    {{-- end --}}


    <!-- Modules Modal -->
    <div class="modal fade" id="viewModulesModal" tabindex="-1" aria-labelledby="viewModulesLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewModulesLabel">Estimation of Efforts: The total effort for the project
                        has been worked out based on the following.</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Sl.No</th>
                                <th>Implementation proposal</th>
                                <th>Hours</th>
                                <th>Created At</th>
                            </tr>
                        </thead>
                        <tbody id="modulesList">
                            <tr>
                                <td colspan="4" class="text-center">Loading...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- View Modules Button -->

    <!-- jQuery Script for Fetching Modules -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $(document).on("click", ".previewProposal", function () {
                var proposalId = $(this).data("id");

                // Open the Offcanvas
                var offcanvasElement = new bootstrap.Offcanvas(document.getElementById("previewOffcanvas"));
                offcanvasElement.show();

                // Load preview content dynamically
                $("#previewContent").html('<div class="text-center"><i class="mdi mdi-loading mdi-spin"></i> Loading...</div>');

                $.ajax({
                    url: `/proposals/${proposalId}/preview`, // Change this URL as per your route
                    type: "GET",
                    success: function (response) {
                        $("#previewContent").html(response); // Load the response inside Offcanvas
                    },
                    error: function () {
                        $("#previewContent").html('<div class="alert alert-danger">Error loading preview. Try again.</div>');
                    }
                });
            });
        });

    </script>
    <script>
        $(document).ready(function () {
            // Open Modal & Fetch Previous Data
            $(".openTimelineModal").click(function () {
                let proposalId = $(this).data("id");

                // Clear previous timeline entries before fetching new ones
                $("#addedTimeline_" + proposalId).html("");

                // Fetch the latest timeline data
                fetchTimeline(proposalId);
            });

            // Fetch and Display Timeline Data when Modal Opens
            // Convert the duration to days based on the unit
            function convertToDays(duration, unit) {
                switch (unit) {
                    case 'days':
                        return duration; // already in days
                    case 'hours':
                        return duration / 24; // convert hours to days
                    case 'weeks':
                        return duration * 7; // convert weeks to days
                    case 'months':
                        return duration * 30; // convert months to days (approximation)
                    default:
                        return 0;
                }
            }

            // Fetch and Display Timeline Data
            function fetchTimeline(proposalId) {
                $.ajax({
                    url: "/timeline/" + proposalId,
                    type: "GET",
                    success: function (response) {
                        if (response.success && response.timelines.length > 0) {
                            let totalDuration = 0;

                            // Clear the previous timeline data
                            $("#addedTimeline_" + proposalId).html('');

                            // Loop through all the timeline entries
                            response.timelines.forEach(function (timeline, index) {
                                // Convert the timeline's duration to days based on the unit
                                let convertedDuration = convertToDays(parseFloat(timeline.duration), timeline.unit);
                                totalDuration += convertedDuration;

                                // Append timeline entries to the table
                                $("#addedTimeline_" + proposalId).append(`
                                            <tr id="moduleRow_${timeline.id}">
                                                <td>${index + 1}</td>
                                                <td>
                                                    <input type="text" class="form-control inline-edit" data-id="${timeline.id}" value="${timeline.title}">
                                                </td>
                                                <td>${timeline.unit}</td>
                                                <td>${timeline.duration}</td>
                    <td>
                        <a class="btn-sm deleteTimeline" type="button" data-id="${timeline.id}" data-proposal="${proposalId}">
                            <i class="mdi mdi-delete"></i>
                        </a>
                    </td>


                                            </tr>
                                        `);
                            });

                            // Display the total duration in the modal
                            $("#totalDurationValue_" + proposalId).text(totalDuration.toFixed(2) + " days");

                            // Optionally, you can also show the total duration in weeks, months, etc.
                            let totalInWeeks = totalDuration / 7;
                            let totalInMonths = totalDuration / 30;
                            $("#totalDurationInWeeks_" + proposalId).text(totalInWeeks.toFixed(2) + " weeks");
                            $("#totalDurationInMonths_" + proposalId).text(totalInMonths.toFixed(2) + " months");
                        }
                    },
                    error: function (xhr) {
                        console.log(xhr.responseText);
                        alert("Failed to load timeline data!");
                    }
                });
            }



            // Ensure modal fetches data each time it opens
            $(".modal").on("shown.bs.modal", function () {
                let proposalId = $(this).attr("id").replace("timeline_", ""); // Extract proposal_id
                fetchTimeline(proposalId);
            });

            // Save New Timeline Data
            $(".saveTimelineBtn").click(function () {
                let proposalId = $(this).data("id");
                let timelineName = $("#moduleName_" + proposalId).val();
                let timelineDuration = $("#moduleDuration_" + proposalId).val();
                let durationUnit = $("#durationUnit_" + proposalId).val(); // Get selected unit
                let token = $('meta[name="csrf-token"]').attr('content');

                if (timelineName.trim() === "" || timelineDuration.trim() === "") {
                    alert("Please fill in all fields!");
                    return;
                }

                $.ajax({
                    url: "/timeline/store",
                    type: "POST",
                    data: {
                        _token: token,
                        proposal_id: proposalId,
                        title: timelineName,
                        duration: timelineDuration,
                        unit: durationUnit // Send the unit along with duration
                    },
                    success: function (response) {
                        if (response.success) {
                            fetchTimeline(proposalId);
                            $("#moduleName_" + proposalId).val("");
                            $("#moduleDuration_" + proposalId).val("");
                            $("#durationUnit_" + proposalId).val("days"); // Reset to default

                            $(".update-success-message").html('<div class="alert alert-success">Timeline added successfully!</div>').fadeIn();

                            setTimeout(function () {
                                $(".update-success-message").fadeOut();
                            }, 3000);
                        } else {
                            alert("Failed to save timeline!");
                        }
                    },
                    error: function (xhr) {
                        console.log(xhr.responseText);
                        alert("Something went wrong! Please try again.");
                    }
                });
            });



            $(document).on("blur", ".inline-edit", function () {
                let moduleId = $(this).data("id");
                let newValue = $(this).val().trim(); // Get input value
                let proposalId = $(this).closest("tr").attr("data-proposal-id"); // Fetch proposal ID
                let messageBox = $("#timeline_" + proposalId).find(".update-success-message"); // Success message container

                if (newValue === "") {
                    alert("Title cannot be empty!");
                    return;
                }

                console.log("Updating ID:", moduleId, "New Value:", newValue); // Debugging

                $.ajax({
                    url: `/timeline/${moduleId}`,
                    type: "PUT",
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                        "Content-Type": "application/json"
                    },
                    data: JSON.stringify({ title: newValue }),
                    success: function (response) {
                        if (response.success) {
                            fetchTimeline(proposalId);
                            $("#moduleName_" + proposalId).val("");
                            $("#moduleDuration_" + proposalId).val("");
                            $("#durationUnit_" + proposalId).val("days"); // Reset to default

                            $(".update-success-message").html('<div class="alert alert-success">Timeline updated successfully!</div>').fadeIn();

                            setTimeout(function () {
                                $(".update-success-message").fadeOut();
                            }, 3000);
                        } else {
                            alert("Failed to save timeline!");
                        }
                    },
                    error: function (xhr) {
                        console.log(xhr.responseText);
                        alert("Something went wrong! Please try again.");
                    }
                });
            });



            // Delete Timeline
            $(document).on("click", ".deleteTimeline", function () {
                var moduleId = $(this).data("id");
                var row = $("#moduleRow_" + moduleId);
                var modal = $(this).closest(".modal");
                var messageBox = modal.find(".delete-success-message");

                $.ajax({
                    url: `/timeline/${moduleId}`,
                    type: "DELETE",
                    data: {
                        _token: "{{ csrf_token() }}",
                    },
                    success: function (response) {
                        if (response.success) {
                            row.remove();
                            updateRowNumbers(modal.attr("id").replace("timeline_", ""));


                            $(".delete-success-message").html('<div class="alert alert-success">Timeline deleted successfully!</div>').fadeIn();

                            setTimeout(function () {
                                $(".delete-success-message").fadeOut();
                            }, 3000);
                        } else {
                            alert("Failed to delete timeline!");
                        }
                    },
                    error: function (xhr) {
                        console.log(xhr.responseText);
                        alert("Error occurred while deleting timeline.");
                    }
                });
            });
        });

    </script>
    <script>
        $(document).ready(function () {
            $(document).on("click", ".open-modules-modal", function () {
                let proposalId = $(this).data("proposal-id");

                // Show loading message
                $("#modulesList").html('<tr><td colspan="4" class="text-center">Loading...</td></tr>');

                // AJAX Request
                $.ajax({
                    url: "/get-proposal-modules/" + proposalId,
                    method: "GET",
                    dataType: "json",
                    success: function (response) {
                        let html = "";
                        let totalHours = 0; // Variable to store total hours

                        if (response.modules && response.modules.length > 0) {
                            response.modules.forEach(function (module, index) {
                                totalHours += parseFloat(module.hours); // Sum the hours

                                html += `<tr>
                                                            <td>${index + 1}</td> <!-- Serial Number -->
                                                            <td>${module.name}</td>
                                                            <td>${module.hours}</td>
                                                            <td>${new Date(module.created_at).toLocaleDateString()}</td>
                                                        </tr>`;
                            });

                            // Add total hours row
                            html += `<tr class="fw-bold">
                                                        <td colspan="2" class="text-end">Total Hours:</td>
                                                        <td colspan="2">${totalHours}</td>
                                                    </tr>`;
                        } else {
                            html = '<tr><td colspan="4" class="text-center">No modules found.</td></tr>';
                        }

                        $("#modulesList").html(html);
                    },
                    error: function () {
                        $("#modulesList").html('<tr><td colspan="4" class="text-center text-danger">Error loading modules.</td></tr>');
                    }
                });
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            let quillInstances = {};

            // Initialize Quill Editors for all Modals
            $("[id^='addModules_']").each(function () {
                let proposalId = this.id.replace("addModules_", "");
                let editorSelector = `#full-editor_${proposalId}`;

                if ($(editorSelector).length) {
                    quillInstances[proposalId] = new Quill(editorSelector, { theme: "snow" });
                }
            });

            // Save Button Click Event
            $(document).on("click", "[id^='saveModule_']", function () {
                var button = $(this);
                var proposalId = button.attr("id").split("_")[1];
                var title = $("#moduleName_" + proposalId).val();
                var quillContent = quillInstances[proposalId]?.root.innerHTML || "";

                button.prop("disabled", true); // Prevent multiple clicks

                $.ajax({
                    url: "{{ route('proposed_informations.store') }}",
                    type: "POST",
                    data: {
                        _token: $('meta[name="csrf-token"]').attr("content"),
                        proposal_id: proposalId,
                        title: quillContent
                    },
                    success: function (response) {
                        if (response.success) {
                            let newData = response.data;
                            let tableBody = $("#moduleTableBody_" + proposalId);

                            // Create table if it doesn't exist
                            if (!tableBody.length) {
                                $("#addedModules_" + proposalId).html(`
                                                <table class="table table-bordered" id="moduleTable_${proposalId}">
                                                    <thead class="table-dark">
                                                        <tr>
                                                            <th>#</th>
                                                            <th>Title</th>
                                                            <th>Actions</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="moduleTableBody_${proposalId}">
                                                    </tbody>
                                                </table>`);
                                tableBody = $("#moduleTableBody_" + proposalId);
                            }

                            let rowCount = tableBody.find("tr").length + 1;
                            let newRow = `
                                            <tr id="moduleRow_${newData.id}">
                                                <td>${rowCount}</td>
                                                <td contenteditable="true" class="editable-title" data-id="${newData.id}">${newData.title}</td>
                                                <td>
                                                    <a class="btn-sm deleteModule" data-id="${newData.id}">
                                                        <i class="mdi mdi-delete"></i>
                                                    </a>
                                                </td>
                                            </tr>`;
                            tableBody.append(newRow);

                            $("#moduleName_" + proposalId).val(""); // Clear input field
                            quillInstances[proposalId].root.innerHTML = ""; // Clear Quill editor

                            // Show success message
                            $("#addedModules_" + proposalId).prepend('<div class="alert alert-success">Module Added Successfully!</div>');
                            setTimeout(() => { $(".alert-success").fadeOut(); }, 3000);
                        }
                    },
                    error: function (xhr) {
                        alert(xhr.responseJSON?.message || "An error occurred!");
                    },
                    complete: function () {
                        button.prop("disabled", false);
                    }
                });
            });

            // Fetch Existing Data on Modal Open
            $(document).on("show.bs.modal", "[id^='addModules_']", function () {
                let proposalId = this.id.replace("addModules_", "");

                fetch(`/proposed-informations/${proposalId}`)
                    .then(response => response.json())
                    .then(data => {
                        let tableHtml = `
                                        <div class="update-success-message"></div>
                                        <table class="table table-bordered" id="moduleTable_${proposalId}">
                                            <thead class="table-dark">
                                                <tr>
                                                    <th>#</th>
                                                    <th>Title</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody id="moduleTableBody_${proposalId}">`;

                        data.data.reverse().forEach((info, index) => {
                            tableHtml += `
                                            <tr id="moduleRow_${info.id}">
                                                <td>${index + 1}</td>
                                                <td contenteditable="true" class="editable-title" data-id="${info.id}">${info.title}</td>
                                                <td>
                                                    <a class="btn-sm deleteModule" data-id="${info.id}">
                                                        <i class="mdi mdi-delete"></i>
                                                    </a>
                                                </td>
                                            </tr>`;
                        });

                        tableHtml += `</tbody></table>`;
                        $("#addedModules_" + proposalId).html(tableHtml);
                    });
            });

            // Inline Editing Feature
            $(document).on("blur", ".editable-title", function () {
                let moduleId = $(this).data("id");
                let newValue = $(this).text().trim();
                let modalId = $(this).closest(".modal").attr("id");
                let messageBox = $("#" + modalId + " .update-success-message");

                fetch(`/proposed-informations/${moduleId}`, {
                    method: "PUT",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                    },
                    body: JSON.stringify({ title: newValue })
                })
                    .then(response => response.json())
                    .then(() => {
                        messageBox.html('<div class="alert alert-success">Updated Successfully!</div>').fadeIn();
                        setTimeout(() => { messageBox.fadeOut(); }, 3000);
                    })
                    .catch(() => {
                        messageBox.html('<div class="alert alert-danger">Error updating. Try again.</div>').fadeIn();
                        setTimeout(() => { messageBox.fadeOut(); }, 3000);
                    });
            });

            // Delete Module Event (Event Delegation)
            $(document).on("click", ".deleteModule", function () {
                var moduleId = $(this).data("id");
                var row = $("#moduleRow_" + moduleId);
                var modalId = $(this).closest(".modal").attr("id");
                var messageBox = $("#" + modalId + " .delete-success-message");

                $.ajax({
                    url: `/proposed-informations/${moduleId}`,
                    type: "DELETE",
                    data: { _token: "{{ csrf_token() }}" },
                    success: function (response) {
                        if (response.success) {
                            row.remove();
                            updateRowNumbers(modalId.replace("addModules_", ""));
                            messageBox.html('<div class="alert alert-success">Deleted Successfully!</div>').fadeIn();
                            setTimeout(() => { messageBox.fadeOut(); }, 3000);
                        }
                    }
                });
            });

            // Function to Update Row Numbers
            function updateRowNumbers(proposalId) {
                let table = document.getElementById(`moduleTable_${proposalId}`);
                if (table) {
                    let rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
                    Array.from(rows).forEach((row, index) => {
                        row.cells[0].innerText = index + 1;
                    });
                }
            }
        });

    </script>





    <!-- Modal for Assigning Employees -->
    <div class="modal fade" id="assignEmployeeModal" tabindex="-1" aria-labelledby="assignEmployeeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Assign Employees</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="assignEmployeeForm" method="POST" action="{{ route('proposals.assign') }}">
                        @csrf
                        <input type="hidden" name="proposal_id" id="assignProposalId">

                        <div class="mb-3">
                            <label class="form-label">Select Employees</label>
                            <div id="employeeList">
                                @forelse($employees as $employee)
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="employees[]"
                                            value="{{ $employee->id }}" id="emp{{ $employee->id }}">
                                        <label class="form-check-label"
                                            for="emp{{ $employee->id }}">{{ $employee->name }}</label>
                                    </div>
                                @empty
                                    <p class="text-muted">No employees available</p>
                                @endforelse
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary">Assign</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll(".open-assign-modal").forEach(button => {
                button.addEventListener("click", function () {
                    let proposalId = this.getAttribute("data-proposal-id");
                    document.getElementById("assignProposalId").value = proposalId;
                });
            });
        });

    </script>



    <!-- Offcanvas for Edit Proposal -->
    <div class="offcanvas offcanvas-end w-50" tabindex="-1" id="editProposalCanvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Edit Proposal</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            <form id="editProposalForm">
                @csrf
                @method('PUT')
                <input type="hidden" id="editProposalId">

                <div class="mb-3">
                    <label>Title</label>
                    <input type="text" id="editTitle" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label>Client</label>
                    <select id="editClient" class="form-control" required>
                        @foreach($clients as $client)
                            <option value="{{ $client->id }}">{{ $client->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label>Project Type</label>
                    <select id="editType" class="form-control" required>
                        @foreach($ptypes as $type)
                            <option value="{{ $type->id }}">{{ $type->category }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Industry</label>
                    <select id="editIndustry" class="form-control" required>
                        <option value="" disabled selected>Select Industry</option>
                        @foreach($industries as $industry)
                            <option value="{{ $industry->id }}">
                                {{ $industry->page_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Solutions</label>
                    <select id="editSolution" class="form-control" required>
                        <option value="" disabled selected>Select Solution</option>
                        @foreach($solutions as $solution)
                            <option value="{{ $solution->id }}">
                                {{ $solution->page_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label>Amount</label>
                    <input type="number" id="editAmount" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label>Sent Date</label>
                    <input type="date" id="editSentDate" class="form-control">
                </div>
                <div class="mb-3">
                    <label>Expiry Date</label>
                    <input type="date" id="editExpiryDate" class="form-control">
                </div>

                <div class="mb-3">
                    <label>Essential Modules</label>
                    <input type="hidden" name="essential_modules" id="editEssentialModules">
                    <div id="editNotes" class="form-control" style="height: 250px; overflow-y: auto;"></div>
                </div>

                <div class="mb-3">
                    <label>Benefits</label>
                    <input type="hidden" name="benefits" id="editBenefitsField">
                    <div id="editBenifits" class="form-control" style="height: 250px; overflow-y: auto;"></div>
                </div>
                <!-- SEO Services Selection -->
                <div class="mb-3">
                    <label>SEO Services</label>
                    <div class="form-control p-3" style="height: 250px; overflow-y: auto;">
                        @foreach($seo_categories as $category)
                            <strong>{{ $category->name }}</strong>
                            <div class="mt-3 mb-3">
                                @foreach($category->services as $service)
                                    <div class="form-check">
                                        <input class="form-check-input edit-seo-service" type="checkbox" name="seo[]"
                                            value="{{ $service->id }}" id="seo_{{ $service->id }}">
                                        <label class="form-check-label" for="seo_{{ $service->id }}">
                                            {{ $service->service_name }}
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="mb-3">
                    <label>Security Services</label>
                    <div class="form-control p-3" style="height: 250px; overflow-y: auto;">
                        @foreach($security_categories as $seccategory)
                            <strong>{{ $seccategory->name }}</strong>
                            <div class="mt-3 mb-3">
                                @foreach($seccategory->services as $service)
                                    <div class="form-check">
                                        <input class="form-check-input edit-security-service" type="checkbox" name="security[]"
                                            value="{{ $service->id }}" id="security_{{ $service->id }}">
                                        <label class="form-check-label" for="service_{{ $service->id }}">
                                            {{ $service->name }}
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="mb-3">
                    <label>Status</label>
                    <select id="editStatus" class="form-control">
                        <option value="pending">Pending</option>
                        <option value="accepted">Accepted</option>
                        <option value="rejected">Rejected</option>
                    </select>
                </div>

                <button type="submit" class="btn btn-primary">Update Proposal</button>
            </form>
        </div>
    </div>

    <!-- JavaScript for AJAX -->
    <!-- Bootstrap Confirm Modal -->
    <div class="modal fade" id="confirmUpdateModal" tabindex="-1" aria-labelledby="confirmUpdateModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmUpdateModalLabel">Confirm Update</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to update this proposal?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" id="confirmUpdateBtn" class="btn btn-primary">Yes, Update</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let selectedProposalId = null;
            let formData = null;

            document.querySelectorAll('.edit-btn').forEach(button => {
                button.addEventListener('click', function () {
                    let proposalId = this.getAttribute('data-id');

                    // Fetch proposal data using AJAX
                    fetch(`/proposals/${proposalId}`)
                        .then(response => response.json())
                        .then(data => {
                            document.getElementById('editProposalId').value = data.id;
                            document.getElementById('editTitle').value = data.title;
                            document.getElementById('editClient').value = data.client_id;
                            document.getElementById('editIndustry').value = data.industry;
                            document.getElementById('editType').value = data.project_type;
                            document.getElementById('editSolution').value = data.solution;
                            document.getElementById('editAmount').value = data.amount;

                            // Format date correctly before inserting into input field
                            document.getElementById('editSentDate').value = data.sent_date ? formatDate(data.sent_date) : '';
                            document.getElementById('editExpiryDate').value = data.expiry_date ? formatDate(data.expiry_date) : '';

                            document.getElementById('editStatus').value = data.status;

                            // ✅ Fix: Set values in Quill editors
                            quillEditNotes.root.innerHTML = data.essential_modules ? data.essential_modules : '';
                            quillEditBenefits.root.innerHTML = data.benefits ? data.benefits : '';

                            // ✅ Pre-check selected SEO services
                            document.querySelectorAll('.edit-seo-service').forEach(checkbox => {
                                checkbox.checked = false; // Uncheck all first
                            });

                            if (data.seo) {
                                let selectedSEO = JSON.parse(data.seo); // Ensure stored SEO services are in JSON format
                                selectedSEO.forEach(serviceId => {
                                    let checkbox = document.getElementById(`seo_${serviceId}`);
                                    if (checkbox) checkbox.checked = true;
                                });
                            }

                            // ✅ Pre-check selected Security Services
                            document.querySelectorAll('.edit-security-service').forEach(checkbox => {
                                checkbox.checked = false; // Uncheck all first
                            });

                            if (data.security) {
                                let selectedSecurity = JSON.parse(data.security); // Ensure stored Security services are in JSON format
                                selectedSecurity.forEach(serviceId => {
                                    let checkbox = document.getElementById(`security_${serviceId}`);
                                    if (checkbox) checkbox.checked = true;
                                });
                            }
                        })
                        .catch(error => console.error('Error fetching proposal data:', error));
                });
            });

            document.getElementById('editProposalForm').addEventListener('submit', function (event) {
                event.preventDefault();

                selectedProposalId = document.getElementById('editProposalId').value;

                // ✅ Collect all checked SEO services
                let selectedSEO = [];
                document.querySelectorAll('.edit-seo-service:checked').forEach(checkbox => {
                    selectedSEO.push(checkbox.value);
                });

                // ✅ Collect all checked Security services
                let selectedSecurity = [];
                document.querySelectorAll('.edit-security-service:checked').forEach(checkbox => {
                    selectedSecurity.push(checkbox.value);
                });

                // ✅ Prepare form data
                formData = {
                    _token: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    _method: 'PUT', // Laravel requires this for PUT requests
                    title: document.getElementById('editTitle').value,
                    client_id: document.getElementById('editClient').value,
                    industry: document.getElementById('editIndustry').value,
                    solutions: document.getElementById('editSolution').value,
                    project_type: document.getElementById('editType').value,
                    amount: document.getElementById('editAmount').value,
                    sent_date: document.getElementById('editSentDate').value,
                    expiry_date: document.getElementById('editExpiryDate').value,
                    status: document.getElementById('editStatus').value,

                    // ✅ Fix: Get values from Quill editors before submitting
                    essential_modules: quillEditNotes.root.innerHTML,
                    benefits: quillEditBenefits.root.innerHTML,

                    // ✅ Store SEO and Security services in JSON format
                    seo: JSON.stringify(selectedSEO),
                    security: JSON.stringify(selectedSecurity)
                };

                // Show Bootstrap Modal
                let confirmModal = new bootstrap.Modal(document.getElementById('confirmUpdateModal'));
                confirmModal.show();
            });

            document.getElementById('confirmUpdateBtn').addEventListener('click', function () {
                if (selectedProposalId && formData) {
                    fetch(`/proposals/${selectedProposalId}`, {
                        method: 'POST',  // Using POST with `_method=PUT`
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(formData)
                    })
                        .then(response => {
                            if (response.redirected) {
                                window.location.href = response.url; // ✅ Redirect to the proposals page
                            }
                        })
                        .catch(error => console.error('Error updating proposal:', error));
                }
            });
        });

        // Function to correctly format the date
        function formatDate(dateString) {
            let dateParts = dateString.split('-'); // Split YYYY-MM-DD
            return `${dateParts[0]}-${dateParts[1]}-${dateParts[2]}`; // Return unchanged date
        }
    </script>

    <script
        src="https://demos.themeselection.com/materio-bootstrap-html-admin-template/assets/vendor/libs/quill/quill.js"></script>
    <script
        src="https://demos.themeselection.com/materio-bootstrap-html-admin-template/assets/js/forms-editors.js"></script>
    {{--
    <script>
        var quill = new Quill('#editor', {
            theme: 'snow'
        });

        var quillBenefits = new Quill('#editor-benefits', {
            theme: 'snow'
        });

        document.querySelector('form').addEventListener('submit', function () {
            document.querySelector('#essential_modules').value = quill.root.innerHTML;
            document.querySelector('#benefits').value = quillBenefits.root.innerHTML;
        });
    </script> --}}
    <script>
        // Initialize Quill editors
        var quill = new Quill('#editor', {
            theme: 'snow'
        });

        var quillBenefits = new Quill('#editor-benefits', {
            theme: 'snow'
        });

        var quillEditNotes = new Quill('#editNotes', {
            theme: 'snow'
        });

        var quillEditBenefits = new Quill('#editBenifits', {
            theme: 'snow'
        });

        // Event listener for the Create Proposal form
        document.querySelector('form').addEventListener('submit', function () {
            document.querySelector('#essential_modules').value = quill.root.innerHTML;
            document.querySelector('#benefits').value = quillBenefits.root.innerHTML;
        });

        // Event listener for the Edit Proposal form
        document.querySelector('#editProposalForm').addEventListener('submit', function () {
            document.querySelector('#editEssentialModules').value = quillEditNotes.root.innerHTML;
            document.querySelector('#editBenefitsField').value = quillEditBenefits.root.innerHTML;
        });
    </script>

    <style>
        .picons .mdi::before,
        .mdi-set {
            font-size: 21px;
        }

        .w-80 {
            width: 80% !important;
        }

        .w-60 {
            width: 60% !important;
        }

        .ql-container {
            border: 1px solid #e3dfdf !important;
            text-align: left !important;
        }
    </style>

@endsection