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

<div class="container">
    <div class="row">
        <div class="col-md-12">
            @extends('layouts.invoicetab')
        </div>
    </div>
  </div>
  @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="form-floating form-floating-outline mb-4">
                        <select name="client_id" class="form-control" id="client_id" required>
                            <option value="" disabled selected>Select Client</option>
                            @foreach($clients as $client)
                                <option value="{{ $client->id }}" {{ old('client_id') == $client->id ? 'selected' : '' }}>
                                    {{ $client->name }}
                                </option>
                            @endforeach
                        </select>
                        <label for="client_id">Client</label>
                    </div>

                    <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>
            
            @if($proposals->hasPages())
                {{ $proposals->links() }}
            @endif
        </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 }}" 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 }},

Please find the attached proposal for {{ $proposal->industryModal->page_name }}. 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