@extends('layouts.master')
@section('title')
    CRM Deal Registration Form
@endsection
@section('content')
    <form action="{{ route('create.deal') }}" method="POST">
        @csrf
        <div class="row">
            <!-- Deal Registration Card -->
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h3 class="card-title text-center text-primary mb-4">CRM Deal Registration Form</h3>

                        <!-- Deal Name -->
                        <div class="row mb-3">
                            <label for="deal_name" class="col-sm-2 col-form-label">Deal Name</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" placeholder="Enter Deal Name" id="deal_name"
                                    name="deal_name" required>
                            </div>
                        </div>

                        <!-- RFQ No -->
                        <div class="row mb-3">
                            <label for="rfq_no" class="col-sm-2 col-form-label">RFQ No</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" placeholder="Enter RFQ Number" id="rfq_no"
                                    name="rfq_no" required>
                            </div>
                        </div>

                        <!-- Client Name -->
                        <div class="row mb-3">
                            <label for="client_name" class="col-sm-2 col-form-label">Client Name</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" placeholder="Enter Client Name" id="client_name"
                                    name="client_name" required>
                                <div id="to_list"></div>
                            </div>

                        </div>

                        <!-- Client Phone -->
                        <div class="row mb-3">
                            <label for="client_phone" class="col-sm-2 col-form-label">Client Phone</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="tel" placeholder="Enter Client Phone"
                                    id="client_phone" name="client_phone" required>
                            </div>
                        </div>

                        <!-- Client Email -->
                        <div class="row mb-3">
                            <label for="client_email" class="col-sm-2 col-form-label">Client Email</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="email" placeholder="Enter Client Email"
                                    id="client_email" name="client_email" required>
                            </div>
                        </div>

                        <!-- Client Type -->
                        <div class="row mb-3">
                            <label for="client_type" class="col-sm-2 col-form-label">Client Type</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" placeholder="Enter Client Type" id="client_type"
                                    name="client_type" required>
                            </div>
                        </div>

                        <!-- Client Address -->
                        <div class="row mb-3">
                            <label for="client_address" class="col-sm-2 col-form-label">Client Address</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" placeholder="Enter Client Address"
                                    id="client_address" name="client_address" required>
                            </div>
                        </div>

                        <!-- End Date -->
                        <div class="row mb-3">
                            <label for="end_date" class="col-sm-2 col-form-label">End Date</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="date" id="end_date" name="end_date" required>
                            </div>
                        </div>

                        <!-- NAICS Code -->
                        <div class="row mb-3">
                            <label for="naics_code" class="col-sm-2 col-form-label">NAICS Code</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" placeholder="Enter NAICS Code" id="naics_code"
                                    name="naics_code" required>
                            </div>
                        </div>

                        <!-- Probability -->
                        <div class="row mb-3">
                            <label for="probability" class="col-sm-2 col-form-label">Probability</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="probability" name="probability" required>
                                    <option value="">Select Probability</option>
                                    <option value="Low">Low</option>
                                    <option value="Medium">Medium</option>
                                    <option value="High">High</option>
                                </select>
                            </div>
                        </div>

                        <!-- Manufacturer/Publisher -->
                        <div class="row mb-3">
                            <label for="mfr_pub" class="col-sm-2 col-form-label">Mfr / Publisher</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text"
                                    placeholder="Enter Manufacturer/Publisher Name" id="mfr_pub" name="mfr_pub"
                                    required>
                            </div>
                        </div>

                        <!-- Distributor Name -->
                        <div class="row mb-3">
                            <label for="distributor_name" class="col-sm-2 col-form-label">Distributor Name</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" placeholder="Enter Distributor Name"
                                    id="distributor_name" name="distributor_name" required>
                            </div>
                        </div>

                        <!-- Source -->
                        <div class="row mb-3">
                            <label for="source" class="col-sm-2 col-form-label">Source</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="source" name="source" required>
                                    <option value="">Select Source</option>
                                    <option value="Online">Online</option>
                                    <option value="Referral">Referral</option>
                                    <option value="Direct">Direct</option>
                                </select>
                            </div>
                        </div>

                        <!-- Sales -->
                        <div class="row mb-3">
                            <label for="sales" class="col-sm-2 col-form-label">Sales</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="sales" name="sales" required>
                                    <option value="">Select Sales</option>
                                    <option value="Team A">Team A</option>
                                    <option value="Team B">Team B</option>
                                    <option value="Team C">Team C</option>
                                </select>
                            </div>
                        </div>

                        <!-- Deal Type -->
                        <div class="row mb-3">
                            <label for="deal_type" class="col-sm-2 col-form-label">Deal Type</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="deal_type" name="deal_type" required>
                                    <option value="">Select Deal Type</option>
                                    <option value="New Business">New Business</option>
                                    <option value="Renewal">Renewal</option>
                                    <option value="Upsell">Upsell</option>
                                </select>
                            </div>
                        </div>



                        <!-- Responsible Rep -->
                        <div class="row mb-3">
                            <label for="responsible_rep" class="col-sm-2 col-form-label">Responsible Rep</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" placeholder="Enter Responsible Rep"
                                    id="responsible_rep" name="responsible_rep" required>
                            </div>
                        </div>

                        <!-- Team -->
                        <div class="row mb-3">
                            <label for="team" class="col-sm-2 col-form-label">Team</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="team" name="team" required>
                                    <option value="">Select Team</option>
                                    <option value="Sales">Sales</option>
                                    <option value="Marketing">Marketing</option>
                                </select>
                            </div>
                        </div>

                        <!-- VCloud Invoice No -->
                        <div class="row mb-3">
                            <label for="vcloud_invoice_no" class="col-sm-2 col-form-label">VCloud Invoice No</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" placeholder="Enter VCloud Invoice Number"
                                    id="vcloud_invoice_no" name="vcloud_invoice_no" required>
                            </div>
                        </div>

                        <!-- Customer PO No -->
                        <div class="row mb-3">
                            <label for="customer_po_no" class="col-sm-2 col-form-label">Customer PO No</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" placeholder="Enter Customer PO Number"
                                    id="customer_po_no" name="customer_po_no" required>
                            </div>
                        </div>

                        <!-- Customer PO Date -->
                        <div class="row mb-3">
                            <label for="customer_po_date" class="col-sm-2 col-form-label">Customer PO Date</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="date" id="customer_po_date" name="customer_po_date"
                                    required>
                            </div>
                        </div>

                        <!-- Disti PO No -->
                        <div class="row mb-3">
                            <label for="disti_po_no" class="col-sm-2 col-form-label">Disti PO No</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" placeholder="Enter Disti PO Number"
                                    id="disti_po_no" name="disti_po_no" required>
                            </div>
                        </div>

                        <!-- Invoice Date -->
                        <div class="row mb-3">
                            <label for="invoice_date" class="col-sm-2 col-form-label">Invoice Date</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="date" id="invoice_date" name="invoice_date"
                                    required>
                            </div>
                        </div>

                        <!-- Week -->
                        <div class="row mb-3">
                            <label for="week" class="col-sm-2 col-form-label">Week</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="week" name="week" required>
                                    <option value="">Select Week</option>
                                    <option value="Week 1">Week 1</option>
                                    <option value="Week 2">Week 2</option>
                                    <option value="Week 3">Week 3</option>
                                </select>
                            </div>
                        </div>

                        <!-- Period of Performance Start Date -->
                        <div class="row mb-3">
                            <label for="period_of_performance_start_date" class="col-sm-2 col-form-label">Period of
                                Performance Start Date</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="date" id="period_of_performance_start_date"
                                    name="period_of_performance_start_date" required>
                            </div>
                        </div>

                        <!-- Period of Performance End Date -->
                        <div class="row mb-3">
                            <label for="period_of_performance_end_date" class="col-sm-2 col-form-label">Period of
                                Performance End Date</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="date" id="period_of_performance_end_date"
                                    name="period_of_performance_end_date" required>
                            </div>
                        </div>

                        <!-- Proof of Delivery -->
                        <div class="row mb-3">
                            <label for="proof_of_delivery" class="col-sm-2 col-form-label">Proof of Delivery</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="proof_of_delivery" name="proof_of_delivery" required>
                                    <option value="">Select Proof of Delivery</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <!-- Tracking Detail -->
                        <div class="row mb-3">
                            <label for="tracking_detail" class="col-sm-2 col-form-label">Tracking Detail</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" placeholder="Enter Tracking Detail"
                                    id="tracking_detail" name="tracking_detail" required>
                            </div>
                        </div>

                        <!-- Order Status -->
                        <div class="row mb-3">
                            <label for="order_status" class="col-sm-2 col-form-label">Order Status</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" placeholder="Enter Order Status"
                                    id="order_status" name="order_status" required>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Line Items Section -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h3 class="card-title text-center text-primary mb-4">Line Items/Part Numbers</h3>
                        <div class="table-responsive">
                            <table class="table mb-0" id="itemTable">
                                <thead class="bg-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Line Items</th>
                                        <th>Part Numbers</th>
                                        <th>Descriptions</th>
                                        <th>Qty</th>
                                        <th>Revenue</th>
                                        <th>Cost</th>
                                        <th>Misc Fee</th>
                                        <th>GMD</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td><input class="form-control" type="text" name="item_no_1"></td>
                                        <td><input class="form-control skuSearchInput" type="text" name="part_no_1">
                                            <ul class="list-group skuResults dropdown-menu"
                                                style="position: absolute; z-index: 1000; display: none;"></ul>
                                        </td>
                                        <td>
                                            <textarea class="form-control" name="description_1" rows="1"></textarea>
                                        </td>
                                        <td><input class="form-control" type="number" name="qty_1"></td>
                                        <td><input class="form-control revenue-input" type="number" name="revenue_1"
                                                oninput="calculateTotals()"></td>
                                        <td><input class="form-control cost-input" type="number" name="cost_1"
                                                oninput="calculateTotals()"></td>
                                        <td><input class="form-control misc-input" type="number" name="misc_1"
                                                oninput="calculateTotals()"></td>
                                        <td><input class="form-control gmd-input" type="number" name="gmd_1"
                                                oninput="calculateTotals()"></td>
                                        <td><button type="button" class="btn btn-danger"
                                                onclick="removeRow(this.parentNode.parentNode.rowIndex)"><i
                                                    class="fa fa-minus"></i></button></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <button type="button" class="btn btn-success mt-3" id="plus" onclick="addRow()">+</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Totals Section -->
        <div class="row mt-4">
            <div class="col-lg-3">
                <label>Total Cost:</label>
                <input class="form-control" type="number" id="totalCost" name="total_cost" readonly>
            </div>
            <div class="col-lg-3">
                <label>Total GMD:</label>
                <input class="form-control" type="number" id="totalGMD" name="total_gmd" readonly>
            </div>
            <div class="col-lg-3">
                <label>Total Misc Fee:</label>
                <input class="form-control" type="number" id="totalMisc" name="total_misc_fee" readonly>
            </div>
            <div class="col-lg-3">
                <label>Total Revenue:</label>
                <input class="form-control" type="number" id="totalRevenue" name="total_revenue" readonly>
            </div>
        </div>
        <div class="text-center mt-4">
            <button class="btn btn-primary" type="submit">Submit</button>
        </div>
    </form>
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
        crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            // Handle 'to' data
            $(document).on('keyup', '#client_name', function() {
                var val = $(this).val();
                $.ajax({
                    url: "{{ route('edit_to_search') }}",
                    type: 'GET',
                    data: {
                        'to': val
                    },
                    success: function(data) {
                        $('#to_list').html(data);
                    }
                });
            });

            // Handle click on 'to' suggestion
            $(document).on('click', '#to_list li', function() {
                var value = $(this).text();
                $('#client_name').val(value);
                $("#to_list").html('');

                // Send AJAX request to fetch additional details
                $.ajax({
                    url: "{{ route('edit_fetch_to_details') }}",
                    type: 'GET',
                    data: {
                        'to': value
                    },
                    success: function(response) {
                        $('#client_email').val(response.to_email);
                        $('#client_address').val(response.to_address);
                        $('#client_phone').val(response.to_phone);


                    }
                });
            });
        })
    </script>
    <script>
        $(document).ready(function() {
            // Handle keyup event for all skuSearchInput
            $(document).on('keyup', '.skuSearchInput', function() {
                let query = $(this).val().trim();
                let resultsList = $(this).next('.skuResults'); // Get the associated <ul> element

                if (query.length > 2) {
                    $.ajax({
                        url: '/search-sku',
                        type: 'GET',
                        data: {
                            query: query
                        },
                        success: function(data) {
                            resultsList.empty().show();

                            if (data.length > 0) {
                                data.forEach(item => {
                                    resultsList.append(`
                                                <li class="list-group-item sku-item" 
                                                    data-sku="${item.sku}" 
                                                    data-msrp="${item.msrp}" 
                                                    data-list-price="${item.list_price}" 
                                                    data-source="${item.source}">
                                                    <strong>${item.sku}</strong> - MSRP: $${item.msrp}, List Price: $${item.list_price}, Source: ${item.source}
                                                </li>
                                            `);
                                });
                            } else {
                                resultsList.append(
                                    '<li class="list-group-item">No matching results found</li>'
                                );
                            }
                        },
                        error: function() {
                            alert('Error retrieving SKU data.');
                        }
                    });
                } else {
                    resultsList.empty().hide();
                }
            });

            // Handle SKU selection
            $(document).on('click', '.sku-item', function() {
                let selectedSku = $(this).data('sku');
                let selectedMsrp = $(this).data('msrp');
                let selectedListPrice = $(this).data('list-price');
                let inputField = $(this).closest('td').find(
                    '.skuSearchInput'); // Find the corresponding input

                // Set the SKU in the input field
                inputField.val(selectedSku);
                inputField.next('.skuResults').hide(); // Hide the results

                // Set MSRP and List Price in the respective cells (cell 3 and 4)
                let row = inputField.closest('tr');
                row.find('input[name^="revenue_"]').val(selectedMsrp); // Set MSRP in cell 3
                // row.find('input[name^="cost_"]').val(selectedListPrice); // Set COGS in cell 4
                calculateTotals();

                // Trigger the updateExtended function for those cells
                row.find('input[name^="revenue_"]').trigger('keyup');
                row.find('input[name^="cost_"]').trigger('keyup');

                console.log(
                    `Selected SKU: ${selectedSku}, MSRP: ${selectedMsrp}, List Price: ${selectedListPrice}`
                );
            });

            // Hide results when clicking outside
            $(document).on('click', function(e) {
                if (!$(e.target).closest('.skuSearchInput').length) {
                    $('.skuResults').hide();
                }
            });
            calculateTotals();
        });
    </script>
    <script>
        function calculateTotals() {
            let totalCost = 0,
                totalGMD = 0,
                totalMisc = 0,
                totalRevenue = 0;

            // Iterate through all rows in the table
            document.querySelectorAll("#itemTable tbody tr").forEach(row => {
                // Get input values for the current row
                const revenue = parseFloat(row.querySelector(".revenue-input")?.value || 0);
                const cost = parseFloat(row.querySelector(".cost-input")?.value || 0);
                const misc = parseFloat(row.querySelector(".misc-input")?.value || 0);

                // Calculate GMD for the current row
                const gmd = revenue - cost - misc;
                row.querySelector(".gmd-input").value = gmd.toFixed(2);

                // Accumulate totals
                totalCost += cost;
                totalMisc += misc;
                totalRevenue += revenue;
                totalGMD += gmd;
            });

            // Update totals
            document.getElementById("totalCost").value = totalCost.toFixed(2);
            document.getElementById("totalGMD").value = totalGMD.toFixed(2);
            document.getElementById("totalMisc").value = totalMisc.toFixed(2);
            document.getElementById("totalRevenue").value = totalRevenue.toFixed(2);
        }

        function addRow() {
            var table = document.getElementById("itemTable").getElementsByTagName('tbody')[0];
            var newRow = table.insertRow(table.rows.length);
            var rowIndex = table.rows.length;

            newRow.innerHTML = `
                    <th scope="row">${rowIndex}</th>
                    <td><input class="form-control" type="text" name="item_no_${rowIndex}"></td>
                    <td>
                        <input class="form-control skuSearchInput" type="text" name="part_no_${rowIndex}">
                        <ul class="list-group skuResults dropdown-menu" style="position: absolute; z-index: 1000; display: none;"></ul>
                    </td>
                    <td><textarea class="form-control" name="description_${rowIndex}" rows="1"></textarea></td>
                    <td><input class="form-control" type="number" name="qty_${rowIndex}"></td>
                    <td><input class="form-control revenue-input" type="number" name="revenue_${rowIndex}" oninput="calculateTotals()"></td>
                    <td><input class="form-control cost-input" type="number" name="cost_${rowIndex}" oninput="calculateTotals()"></td>
                    <td><input class="form-control misc-input" type="number" name="misc_${rowIndex}" oninput="calculateTotals()"></td>
                    <td><input class="form-control gmd-input" type="number" name="gmd_${rowIndex}" readonly></td>
                    <td><button type="button" class="btn btn-danger" onclick="removeRow(this.parentNode.parentNode.rowIndex)"><i class="fa fa-minus"></i></button></td>
                `;
        }

        function removeRow(rowIndex) {
            var table = document.getElementById("itemTable").getElementsByTagName('tbody')[0];
            if (table.rows.length > 1) {
                table.deleteRow(rowIndex - 1);
                updateLineNumbers();
                calculateTotals();
            }
        }

        function updateLineNumbers() {
            var table = document.getElementById("itemTable").getElementsByTagName('tbody')[0];
            for (var row = 0; row < table.rows.length; row++) {
                table.rows[row].cells[0].innerHTML = row + 1;
            }
        }
    </script>
@endsection