@extends('staff.layout')

@section('content')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />

    <style>
        .edit-icon {
            cursor: pointer;
            margin-left: 8px;
        }

        .hidden {
            display: none;
        }

        input[type="date"] {
            margin-top: 5px;
        }
    </style>

    <!-- <a href="" class="badge bg-primary text-decoration-none">Send Approval</a> -->
    <!-- <a href="{{ route('proposal_card_view') }}" class="badge bg-primary text-decoration-none">View Proposal</a> -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <form method="POST" action="{{ route('save_proposal') }}">
        @csrf
        <input type="hidden" name="index_data_id" value="{{ $index_data_id }}">


        <section class="container my-5">
            <div class="card shadow p-4">
                <div class="d-flex align-items-center mb-3">
                    <h3 class="mb-0 me-2">PROPOSAL FOR</h3>
                    <input type="text" id="projectTypeInput" name="project_type" class="form-control"
                        style="width:250px;" placeholder="Enter project type">
                </div>



                <p><strong>Date:</strong>
                    <input type="date" id="dateInput" name="date" style="border:none;">
                </p>

                <p><strong>Open Till:</strong>
    <span id="openTillDisplay"></span>
    <span class="edit-icon" onclick="toggleEdit('openTill')">📅</span><br>
    <input type="date" name="openTill" id="openTillInput" class="hidden" onchange="updateDate('openTill')">
</p>

                <h4 class="mt-4">Scope of Work</h4>
                <div class="container mt-5">
                    

                   


                <textarea name="scope_of_work" id="editor" rows="5" cols="40" placeholder="Type your message here..."
                    style="width:500px;"></textarea>

                <h4 class="mt-4">Third-Party Services (Buy & Maintain by User)</h4>
                <ul id="checkboxList">
                    <li><label><input type="checkbox" name="third_party_services[]" value="Domain" checked>
                            Domain</label></li>
                    <li><label><input type="checkbox" name="third_party_services[]" value="Server" checked>
                            Server</label></li>
                    <li><label><input type="checkbox" name="third_party_services[]" value="Push Notification" checked>
                            Push Notification</label></li>
                    <li><label><input type="checkbox" name="third_party_services[]" value="Payment Gateway" checked>
                            Payment Gateway</label></li>
                    <li><label><input type="checkbox" name="third_party_services[]" value="Google Play Console" checked>
                            Google Play Console</label></li>
                    <li><label><input type="checkbox" name="third_party_services[]" value="Apple Account" checked> Apple
                            Account</label></li>
                    <li><label><input type="checkbox" name="third_party_services[]" value="Load Balancer" checked> Load
                            Balancer</label></li>
                    <li><label><input type="checkbox" name="third_party_services[]" value="Daily Backup" checked> Daily
                            Backup</label></li>
                    <li><label><input type="checkbox" name="third_party_services[]" value="SMS Gateway" checked> SMS
                            Gateway</label></li>
                    <li><label><input type="checkbox" name="third_party_services[]" value="Email Gateway" checked> Email
                            Gateway</label></li>
                </ul>

                <input type="text" id="textInput" placeholder="Enter new service..." onkeydown="handleKey(event)"
                    style="display: none; margin-top: 10px; padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; width: 250px;">

                <button type="button" onclick="showInput()"
                    style="margin-top: 10px; width:150px; padding: 6px 12px; background-color: #007bff; color: white; border: none; border-radius: 4px; font-size: 14px; cursor: pointer;">
                    ➕ Add
                </button>
                <br>

                <div class="form-check mt-4">
                    <input class="form-check-input" type="checkbox" name="budget_types[]" value="Budget Type-1"
                        id="budgetType1">
                    <label class="form-check-label" for="budgetType1">
                        <b> Budget Type-1</b>
                    </label>
                </div>

                <!-- <p>Project Pricing (Estimate)
                    The estimated total cost for the complete development and testing of the mobile applications, web
                    platforms, and backend systems is:
                    ₹ <input type="number" name="budget_type1_amount" placeholder="Enter amount in INR"
                        style="width: 200px; padding: 6px;"></p> -->


<p id="budgetType1AmountContainer" style="display: none;">
    <strong>Project Pricing (Estimate)</strong><br>
    The estimated total cost for the complete development and testing of the mobile applications, web
    platforms, and backend systems is:
    ₹ <input type="number" name="budget_type1_amount" id="budgetType1AmountInput"
        placeholder="Enter amount in INR" style="width: 200px; padding: 6px;"> <br><br>

    <strong>After Discount Price</strong> (if any): ₹ 
    <input type="number" name="budget_type1_offer" id="budgetType1OfferInput"
        placeholder="Enter offer price in INR" style="width: 200px; padding: 6px;">
</p>



                <div class="form-check mt-2">
                    <input class="form-check-input" type="checkbox" name="budget_types[]" value="Budget Type-2"
                        id="budgetType2">
                    <label class="form-check-label" for="budgetType2">
                        <b> Budget Type-2</b>
                    </label>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered" id="budgetTable">
                        <thead>
                            <tr>
                                <th>Features</th>
                                <th>Starter</th>
                                <th>Grow</th>
                                <th>Business</th>
                                <th>Scalability</th>
                            </tr>
                        </thead>
                        <tbody id="featureTable">
                            <tr>
                                <td>Scope of Work</td>
                                <td><input type="checkbox" name="budget[Scope of Work][Starter]" checked></td>
                                <td><input type="checkbox" name="budget[Scope of Work][Grow]" checked></td>
                                <td><input type="checkbox" name="budget[Scope of Work][Business]" checked></td>
                                <td><input type="checkbox" name="budget[Scope of Work][Scalability]" checked></td>
                            </tr>
                            <tr>
                                <td>Standard Support</td>
                                <td><input type="checkbox" name="budget[Standard Support][Starter]" checked></td>
                                <td><input type="checkbox" name="budget[Standard Support][Grow]" checked></td>
                                <td><input type="checkbox" name="budget[Standard Support][Business]" checked></td>
                                <td><input type="checkbox" name="budget[Standard Support][Scalability]" checked></td>
                            </tr>
                            <tr>
                                <td>Basic UI</td>
                                <td><input type="checkbox" name="budget[Basic UI][Starter]" checked></td>
                                <td><input type="checkbox" name="budget[Basic UI][Grow]" checked></td>
                                <td><input type="checkbox" name="budget[Basic UI][Business]" checked></td>
                                <td><input type="checkbox" name="budget[Basic UI][Scalability]" checked></td>
                            </tr>
                            <tr>
                                <td>Android App</td>
                                <td><input type="checkbox" name="budget[Android App][Starter]" checked></td>
                                <td><input type="checkbox" name="budget[Android App][Grow]" checked></td>
                                <td><input type="checkbox" name="budget[Android App][Business]" checked></td>
                                <td><input type="checkbox" name="budget[Android App][Scalability]" checked></td>
                            </tr>
                            <tr>
                                <td>iOS App</td>
                                <td><input type="checkbox" name="budget[iOS App][Starter]" checked></td>
                                <td><input type="checkbox" name="budget[iOS App][Grow]" checked></td>
                                <td><input type="checkbox" name="budget[iOS App][Business]" checked></td>
                                <td><input type="checkbox" name="budget[iOS App][Scalability]" checked></td>
                            </tr>
                            <tr>
                                <td>Dedicated DB</td>
                                <td><input type="checkbox" name="budget[Dedicated DB][Starter]"></td>
                                <td><input type="checkbox" name="budget[Dedicated DB][Grow]"></td>
                                <td><input type="checkbox" name="budget[Dedicated DB][Business]" checked></td>
                                <td><input type="checkbox" name="budget[Dedicated DB][Scalability]" checked></td>
                            </tr>
                            <tr>
                                <td>Dedicated Support Manager</td>
                                <td><input type="checkbox" name="budget[Dedicated Support Manager][Starter]"></td>
                                <td><input type="checkbox" name="budget[Dedicated Support Manager][Grow]"></td>
                                <td><input type="checkbox" name="budget[Dedicated Support Manager][Business]" checked>
                                </td>
                                <td><input type="checkbox" name="budget[Dedicated Support Manager][Scalability]" checked>
                                </td>
                            </tr>
                            <tr>
                                <td>Cyber Security Audit</td>
                                <td><input type="checkbox" name="budget[Cyber Security Audit][Starter]"></td>
                                <td><input type="checkbox" name="budget[Cyber Security Audit][Grow]"></td>
                                <td><input type="checkbox" name="budget[Cyber Security Audit][Business]" checked></td>
                                <td><input type="checkbox" name="budget[Cyber Security Audit][Scalability]" checked></td>
                            </tr>
                            <tr>
                                <td>Elite Support</td>
                                <td><input type="checkbox" name="budget[Elite Support][Starter]"></td>
                                <td><input type="checkbox" name="budget[Elite Support][Grow]"></td>
                                <td><input type="checkbox" name="budget[Elite Support][Business]"></td>
                                <td><input type="checkbox" name="budget[Elite Support][Scalability]" checked></td>
                            </tr>
                            <tr id="budgetRow">
                                <td><strong>Budget</strong></td>
                                <td><input type="number" name="budget[Budget][Starter]" value="300000"></td>
                                <td><input type="number" name="budget[Budget][Grow]" value="300000"></td>
                                <td><input type="number" name="budget[Budget][Business]" value="859999"></td>
                                <td><input type="number" name="budget[Budget][Scalability]" value="1649999"></td>
                            </tr>
                        </tbody>
                    </table>

                    <input type="text" id="newFeatureInput" placeholder="Enter new feature..."
                        style="padding: 6px; width: 250px;">
                    <button type="button" onclick="addRow()"
                        style="padding: 6px 12px; background-color: #007bff; color: white; border: none; border-radius: 4px;">➕
                        Add Feature</button>
                </div>


                <h4>Payment Terms</h4>
                <ul>
                    <li>25% - Documentation & UI</li>
                    <li>25% - Front-end Development</li>
                    <li>25% - Backend Development</li>
                    <li>15% - Testing</li>
                    <li>10% - Client Testing & Review</li>
                    <li>0% - Deployment</li>
                </ul>


                <h4 class="mt-4">Team Involved</h4>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Team</th>
                                <th>Responsibility</th>
                                <th>Technology Stack</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Business Analyst</td>
                                <td>Documentation</td>
                                <td>Google Docs</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>UI Designer</td>
                                <td>User Interface Design</td>
                                <td>Figma</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Front-End Developer</td>
                                <td>Front-End Development</td>
                                <td>HTML, CSS, Bootstrap 5, JS Libraries</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>App Developer</td>
                                <td>Mobile App Development</td>
                                <td>Flutter</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>Back-End Developer</td>
                                <td>Server-Side Development</td>
                                <td>PHP Laravel 11</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>Database Administrator</td>
                                <td>Database Management</td>
                                <td>MySQL</td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>Tester</td>
                                <td>Manual Testing</td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td>8</td>
                                <td>Team Lead</td>
                                <td>Project Oversight</td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td>9</td>
                                <td>Project Manager</td>
                                <td>Planning & Execution</td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td>10</td>
                                <td>DevOps Engineer</td>
                                <td>Deployment & Infrastructure</td>
                                <td>-</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <h4 class="mt-4">Project Delivery Timeline</h4>
                <ul>
                    <li>30 Days - Documentation</li>
                    <li>30 Days - UI</li>
                    <li>45 Days - Front-End Development</li>
                    <li>90 Days - App Development</li>
                    <li>30 Days - Backend Development</li>
                    <li>45 Days - Testing</li>
                    <li>As Required - Client-side Testing</li>
                    <li>10 Days - Server Deployment</li>
                </ul>

                <h4 class="mt-4">Terms & Conditions</h4>
                <ul>
                    <li>1. Project communication should be done through a registered email with the client and the concerned
                        project manager.</li>
                    <li>2. Any delays in discussions related to the project delivery timeline or the provision of essential
                        project assets (such as logos, content, etc.) will impact the overall project delivery timeline,
                        additionally if there are any pending or delayed payments, the project delivery timeline will be
                        extended or halted until the outstanding payment is completed.</li>
                    <li>3. The project will be executed in defined phases: Documentation, UI Design, Development, Testing,
                        and Deployment.</li>
                    <li>4. For each phase, 100% payment must be made in advance before the work begins.</li>
                    <li>5. The overall project timeline is dependent on timely approvals, asset delivery from the client,
                        and prompt payments. Any delays on these fronts may extend the delivery schedule accordingly.</li>
                    <li>6. The project delivery timeline may be subject to delays due to third-party services, such as
                        registrations, rejections, approval waiting periods, etc. Clients should acknowledge and accept that
                        such delays are beyond our control. Additionally, any changes related to third-party services may
                        require additional costs if our intervention is needed, especially in cases where additional
                        workload is involved.</li>
                    <li>7. If any additional third-party services are required, we will guide and support the client. Upon
                        client approval, any additional workload may extend the project delivery timeline and increase the
                        project budget accordingly.</li>
                    <li>8. All the project-related approvals, project credentials, and project assets should be shared
                        between the registered email ID that you have given to us and the support email.</li>
                    <li>9. After the project goes live, any bugs within the project scope will be covered under the project
                        maintenance plan. However, issues such as downtime, server failures, or third-party service
                        disruptions are not included in the maintenance coverage. Clients should acknowledge and accept that
                        resolving such issues may require additional costs if our intervention is needed, as these factors
                        are beyond our control. Any resulting impact due to these issues will be the sole responsibility of
                        the client, and we will not be held liable.</li>
                    <li>10. If the client wishes to close the contract, they must submit a formal request via email.
                        Additionally, if any pending payments remain unpaid for more than three months after the invoice is
                        generated, we will halt maintenance services and may suspend the server. Any resulting impact due to
                        this will be the sole responsibility of the client, and we will not be held liable.</li>
                    <li>11. Domain and Hosting/server charges and other third-party services are not included in the project
                        cost.</li>
                    <li>12. After deployment, if any bugs arise, we will work to resolve them as soon as possible. The
                        resolution time will depend on the complexity of the issue.If necessary, the server may be
                        temporarily taken offline during the support period until the issue is fully resolved. Any
                        liability, losses, or impacts caused due to downtime or delays in issue resolution clients should
                        accept that and will be the sole responsibility of the client.</li>
                    <li>13. Standard support will be provided during our regular office working hours. Any support requests
                        outside of these hours will be addressed on the next business day or may incur additional charges if
                        immediate assistance is required.</li>
                    <li>14. After project deployment, we will provide free support for the first 3 months. Beyond this
                        period, support will only be available under an Annual Maintenance Contract (AMC).</li>
                    <li>15. If the client does not request AMC or does not sign the AMC agreement, we will not be
                        responsible for any bugs, issues, or maintenance-related concerns. Any losses, server errors, or
                        downtime issues occurring after the free support period will be the client's sole responsibility.
                    </li>
                    <li>16. The AMC cost will be 30% of the total project cost and will cover ongoing maintenance and bug
                        fixes.AMC will not cover software updates or feature enhancements. Only bugs in the developed code
                        will be considered under maintenance. Any issues related to third-party services, integrations, or
                        external dependencies will not be covered under AMC.</li>
                    <li>17. The project cost is only for developing the software as per the approved Document if any
                        additional updates or changes in the software are requested from the client side the time and new
                        quote will be generated for further development.</li>
                    <li>18. Providing the source code to the client will be chargeable. Any further bug fixes, updates, or
                        modifications after the handover require a new quote for additional development and bug fixing.</li>
                    <li>19. No refunds will be allowed once the project initiated development process has started, including
                        phases such as documentation, UI design, front-end development, backend development, database setup,
                        and testing. Clients acknowledge and accept this policy upon project initiation.</li>
                    <li>20. Clients must ensure secure access credentials, proper hosting security, and regular updates for
                        third-party services, and any breach, unauthorized access, or security vulnerability due to weak
                        client-side security practices is the client’s responsibility.</li>
                    <li>21. In the event of a security breach, we can assist in handling the issue through Vulnerability
                        Assessment and Penetration Testing (VAPT) and SOC Red Team services at an additional cost, and we
                        will not be responsible for any hacks, cyberattacks, or vulnerabilities that arise after project
                        delivery.</li>
                    <li>22. If the project involves handling sensitive user data, compliance with data protection laws (such
                        as GDPR, CCPA, etc.) is the client’s responsibility. We can provide security and compliance support
                        upon request, which will be chargeable.</li>
                    <li>23. This project is delivered under a Minimum Viable Product (MVP) agreement, which includes only
                        the essential features required to launch the product.any form of project scalability—including
                        infrastructure expansion, performance optimization, or system enhancements—is not included in the
                        MVP scope and will require a separate Scalability Agreement. Likewise, migration to a different
                        technology stack is also outside the scope of this agreement and will be chargeable based on the
                        complexity and effort involved.both scalability and migration services will be offered as separate
                        packages, with independent quotations and agreements.</li>
                </ul>

                <p class="mt-5"><strong>ACCEPTANCE OF CONDITIONS</strong><br>
                    The placing of an order will confirm acceptance of the above-mentioned terms and conditions. Conditions
                    stipulated on our Order Form shall be regarded as void if they conflict with our conditions.</p>

                <p class="text-center mt-4">&mdash; End &mdash;</p>


                <button type="submit"
                    style="height:30px; width:90px; background-color:blue; color:white; border:none; border-radius:4px; margin-top: 20px;">
                    Save
                </button>
    </form>

    </section>


    <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
    <script>
        ClassicEditor
            .create(document.querySelector('#editor'))
            .catch(error => {
                console.error(error);
            });
    </script>

    <!-- Date and time -->
    <script>
        function toggleEdit(field) {
            const input = document.getElementById(field + 'Input');
            input.classList.toggle('hidden');
            input.focus();
        }

        function updateDate(field) {
            const display = document.getElementById(field + 'Display');
            const input = document.getElementById(field + 'Input');
            display.textContent = input.value;
            input.classList.add('hidden');
        }
    </script>

    <script>
        window.addEventListener('DOMContentLoaded', (event) => {
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('dateInput').value = today;
        });
    </script>

    <!-- Add new input  -->
    <script>
        function showInput() {
            const input = document.getElementById('textInput');
            input.style.display = 'block';
            input.focus();
        }

        function handleKey(event) {
            if (event.key === 'Enter') {
                event.preventDefault();
                const input = event.target;
                const value = input.value.trim();
                if (value !== '') {
                    const list = document.getElementById('checkboxList');

                    const exists = Array.from(list.querySelectorAll('input[type="checkbox"]')).some(
                        checkbox => checkbox.value.toLowerCase() === value.toLowerCase()
                    );
                    if (!exists) {
                        const newItem = document.createElement('li');
                        newItem.innerHTML = `
            <label>
              <input type="checkbox" name="third_party_services[]" value="${value}" checked>
              ${value}
            </label>`;
                        list.appendChild(newItem);
                    }

                    input.value = '';
                    input.style.display = 'none';
                }
            }
        }
    </script>

    <!-- Add row -->

    <script>
        function addRow() {
            const tableBody = document.getElementById('featureTable');
            const input = document.getElementById('newFeatureInput');
            const featureName = input.value.trim();

            if (featureName === '') {
                alert("Please enter a feature name.");
                return;
            }

            const newRow = document.createElement('tr');

            const nameCell = document.createElement('td');
            nameCell.textContent = featureName;
            newRow.appendChild(nameCell);

            const plans = ['Starter', 'Grow', 'Business', 'Scalability'];

            for (let i = 0; i < plans.length; i++) {
                const td = document.createElement('td');
                const checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.value = plans[i];
                td.appendChild(checkbox);
                newRow.appendChild(td);
            }

            const budgetRow = document.getElementById('budgetRow');
            tableBody.insertBefore(newRow, budgetRow);
            input.value = '';
        }
    </script>



    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>


   

<script>
    function toggleBudgetSections() {
        const isType1Checked = $('#budgetType1').is(':checked');
        const isType2Checked = $('#budgetType2').is(':checked');

        // Budget Type-1 section
        if (isType1Checked) {
            $('#budgetType1AmountContainer').show();
        } else {
            $('#budgetType1AmountContainer').hide();
            $('#budgetType1AmountInput').val('');
            $('#budgetType1OfferInput').val('');
        }

        // Budget Type-2 section (feature table)
        if (isType2Checked) {
            $('#budgetTable').closest('.table-responsive').show();
        } else {
            $('#budgetTable').closest('.table-responsive').hide();
        }
    }

    $(document).ready(function () {
        // Initial state on page load
        toggleBudgetSections();

        // Trigger on checkbox change
        $('#budgetType1, #budgetType2').on('change', function () {
            toggleBudgetSections();
        });

        // Handle form submit via AJAX
        $('#proposalForm').on('submit', function (e) {
            e.preventDefault();

            const projectType = $('#projectTypeInput').val().trim();
            if (projectType === '') {
                toastr.error('Please enter the project type.');
                return;
            }

            const date = $('#dateInput').val();
            const openTill = $('#openTillInput').val();
            const scopeOfWork = $('#editor').val();

            const services = [];
            $('#checkboxList input[type=checkbox]:checked').each(function () {
                services.push($(this).val());
            });

            const budgetTypes = [];
            $('input[name="budget_types[]"]:checked').each(function () {
                budgetTypes.push($(this).val());
            });

            let budget = [];
            let budget_type1_amount = null;
            let budget_type1_offer = null;

            if (budgetTypes.includes('Budget Type-1')) {
                budget_type1_amount = $('#budgetType1AmountInput').val();
                budget_type1_offer = $('#budgetType1OfferInput').val();
            }

            if (budgetTypes.includes('Budget Type-2')) {
                $('#featureTable tr').each(function () {
                    const row = $(this);
                    const featureName = row.find('td:first').text().trim();

                    if (featureName === 'Budget') {
                        const budgetValues = {};
                        row.find('td input[type=number]').each(function (index) {
                            const plan = ['Starter', 'Grow', 'Business', 'Scalability'][index];
                            budgetValues[plan] = $(this).val();
                        });
                        budget.push({
                            feature: 'Budget',
                            plans: budgetValues
                        });
                    } else if (featureName !== '') {
                        const plans = [];
                        row.find('input[type=checkbox]').each(function (index) {
                            if ($(this).is(':checked')) {
                                plans.push(['Starter', 'Grow', 'Business', 'Scalability'][index]);
                            }
                        });
                        budget.push({
                            feature: featureName,
                            plans: plans
                        });
                    }
                });
            }

            const paymentTermsCheckboxValues = [];
            $('input[name="payment_terms[]"]:checked').each(function () {
                paymentTermsCheckboxValues.push($(this).val());
            });

            const paymentTermDetails = $('#paymentTermDetailsInput').val() || '';

            $.ajax({
                url: '{{ route('save_proposal') }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    project_type: projectType,
                    date: date,
                    openTill: openTill,
                    scope_of_work: scopeOfWork,
                    third_party_services: services,
                    budget_types: budgetTypes,
                    budget_type1_amount: budget_type1_amount,
                    budget_type1_offer: budget_type1_offer,
                    budget: JSON.stringify(budget),
                    payment_terms: paymentTermsCheckboxValues,
                    payment_term_details: paymentTermDetails
                },
                success: function (response) {
                    toastr.success('Proposal saved successfully!');
                    $('#proposalForm')[0].reset();
                    toggleBudgetSections(); // Reset visibility
                },
                error: function (xhr) {
                    console.error(xhr.responseJSON);
                    toastr.error('Something went wrong. Please check your input.');
                }
            });
        });
    });
</script>








    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const typeInput = document.getElementById('projectTypeInput');
            const titleInput = document.getElementById('projectTitle');

            if (typeInput && titleInput) {
                typeInput.addEventListener('input', function() {
                    titleInput.value = this.value;
                });
            }
        });
    </script>

    <script>
    function toggleEdit(field) {
        const input = document.getElementById(field + 'Input');
        input.classList.toggle('hidden');
        input.focus();
    }

    function updateDate(field) {
        const display = document.getElementById(field + 'Display');
        const input = document.getElementById(field + 'Input');
        display.textContent = input.value;
        input.classList.add('hidden');
    }

    window.addEventListener('DOMContentLoaded', () => {
        const today = new Date();
        const todayStr = today.toISOString().split('T')[0];
        document.getElementById('dateInput').value = todayStr;

        
        const threeMonthsLater = new Date(today);
        threeMonthsLater.setMonth(today.getMonth() + 3);

        
        if (threeMonthsLater.getDate() !== today.getDate()) {
            
            threeMonthsLater.setDate(0);
        }

        const tillDateStr = threeMonthsLater.toISOString().split('T')[0];
        document.getElementById('openTillInput').value = tillDateStr;
        document.getElementById('openTillDisplay').textContent = tillDateStr;
    });
    </script>
@endsection