{% extends "layout/default.html" %}
{% load i18n %}
{% block title %}{% translate "Lead Details" %}{% endblock %}
{% block breadcumbheading %}
{% translate "Manage Leads" %}
{% endblock  %}
{% block breadcumbfirst %}
<a href="{%url 'leads:list' %}" class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage Leads </a>
{% endblock  %}
{% block breadcumbaddmore %}
		<li class="breadcrumb-item">
			<span class="bullet bg-gray-400 w-5px h-2px"></span>
		</li>
		<li class="breadcrumb-item text-muted" style="text-transform: capitalize;">Details</li>
{% endblock  %}

{% block content %}
<div class="custom mt-3 create-cust">
    <div class="row g-5 g-xl-10 mb-5 mb-xl-10">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
            <div class="card card-flush single-card-head">
        	    <div class="card-header pt-7 pb-7">
        		    <h3 class="card-title align-items-start flex-column">
        			    <span class="card-label fw-bold text-gray-800">Lead Details</span>
        		    </h3>
                   {% if messages %}
                        <div class="d-flex justify-content-center align-items-center">
                            {% for message in messages %}
                              <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %}" role="alert" style="width: 300px;">
                                {{ message }}
                                </div>  
                            {% endfor %}
                         </div>
                    {% endif %}
        		    <div class="card-toolbar" style="text-align:left;">
        			    <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                            <!--<a href="{%url 'leads:list'%}"><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">-->
                            <!--    View List-->
                            <!--</button></a>-->
                            
                            <!--<a href="{%url 'leads:note_customer' lead.id %}"><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">-->
                            <!--    Note History-->
                            <!--</button></a>-->
                            
                            <!--<a href="{%url 'leads:lead_attachments_view' lead.id %}"><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">-->
                            <!--    View Attachments-->
                            <!--</button></a>-->
                            <!-- {% if customer.customer_id == None %}-->
                            <!--<a href="{%url 'leads:add_quote' lead.id %}"><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">-->
                            <!--    Add Quote-->
                            <!--</button></a>-->
                            
                            <!--<a href="{%url 'leads:list_quote_lead' lead.id %}"><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">-->
                            <!--    List Quote-->
                            <!--</button></a>-->
                            
                            <!--<a href="{%url 'leads:convert_to_customer' lead.id %}"><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">-->
                            <!--   Convert To Customer-->
                            <!--</button></a>-->
                            <!--   {% endif %}-->
                            <!--  <a href="{%url 'leads:edit' lead.id %}"><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">-->
                            <!--  Edit-->
                            <!--</button></a>-->
                            
                            
                            
                            <a href="#" class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Action<i class="ki-duotone ki-down fs-5 ms-1"></i></a>
                                        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true" style="">
                                            {% if lead.customer_id == None %} <div class="menu-item px-3" style="text-align:left;">
                                                <a  class="menu-link px-3" data-bs-toggle="modal" data-bs-target="#attachmentModal-{{ lead.id }}">Add Attachments</a>
                                            </div>
                                           
                                            <div class="menu-item px-3">
                                                <a href="{%url 'leads:edit' lead.id %}" class="menu-link px-3">Edit</a>
                                            </div>
                                            <div class="menu-item px-3">
                                                <a href="{%url 'leads:convert_to_customer' lead.id %}" class="menu-link px-3">Convert To Customer</a>
                                            </div>
                                             {% endif %}
                                           
                                            <div class="menu-item px-3">
                                                <a href="{%url 'leads:note_customer' lead.id %}" class="menu-link px-3" data-kt-users-table-filter="delete_row">Note History</a>
                                            </div>
                                           
                                             <div class="menu-item px-3">
                                                <a href="{%url 'leads:lead_attachments_view' lead.id %}" class="menu-link px-3" data-kt-users-table-filter="delete_row">View Attachments</a>
                                            </div>
                                             {% if lead.customer_id == None %}
                                            <div class="menu-item px-3">
                                                <a href="{%url 'leads:add_quote' lead.id %}" class="menu-link px-3" data-kt-users-table-filter="delete_row">Add Quote</a>
                                            </div>
                                            
                                            <div class="menu-item px-3">
                                                <a href="{%url 'leads:list_quote_lead' lead.id %}" class="menu-link px-3" data-kt-users-table-filter="delete_row">List Quote</a>
                                            </div>
                                            {% endif %}
                        </div>
        	    	</div>
            	</div>
    	    </div>
            <div class="card card-flush mt-6 mb-6 parent_fulsh_card">
                <div class="card-body pt-6">
                    <div class="row g-9">
                        <div class="col-md-4 fv-row fv-plugins-icon-container" id="companyField" style="display: block;">
                            <label class=" fs-5 fw-semibold mb-2">Company Name: </label>{{ lead.company_name}}
                        </div>
                        <div class="col-md-4 fv-row fv-plugins-icon-container individualFields" id="individualFields" style="display: block;">
                            <label class=" fs-5 fw-semibold mb-2" id='fname'>First Name: </label>{{ lead.first_name }}
                        </div>
                        <div class="col-md-4 fv-row fv-plugins-icon-container individualFields" id="individualFields" style="display: block;">
                            <label class=" fs-5 fw-semibold mb-2" id="lname">Last Name: </label>{{ lead.last_name }}
                        </div>
                        <div class="col-md-4 fv-row fv-plugins-icon-container">
                            <label class=" fs-5 fw-semibold mb-2" >Work Phone: </label> {{ lead.work_phone }}
                        </div>
                        <div class="col-md-4 fv-row fv-plugins-icon-container">
                            <label class=" fs-5 fw-semibold mb-2" >Mobile: </label> {{ lead.mobile }}
                        </div>
                        <div class="col-md-4 fv-row fv-plugins-icon-container">
                            <label class=" fs-5 fw-semibold mb-2">Email: </label>{{ lead.email }}
                        </div>
                        <div class="col-md-6 fv-row fv-plugins-icon-container" hidden>
                            <label class=" fs-5 fw-semibold mb-2" for="abn">ABN</label> 
                            <input type="number" class="form-control form-control-solid" placeholder="Enter ABN Here" name="abn" id="abn"  pattern="\d{11,}" minlength="11"  maxlength="11"   value="{{ lead.abn }}" >
                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                            </div>
                        </div>
                        <div class="col-md-4 fv-row fv-plugins-icon-container">
                            <label class="fs-5 fw-semibold mb-2">Lead Source:  </label>
                            {% if lead.lead_source == 1 %}  Sales agent {% endif %}
                                {% if lead.lead_source == 2 %} Facebook {% endif %}
                                 {% if lead.lead_source == 3 %} Instagram {% endif %}
                                 {% if lead.lead_source == 4 %} Linkin {% endif %}
                                 {% if lead.lead_source == 5 %} Website {% endif %}
                                {% if lead.lead_source == 6 %} Referral {% endif %}
                           
                        </div> 
                        <div class="col-md-4 fv-row fv-plugins-icon-container">
                            <label class=" fs-5 fw-semibold mb-2">Business Type: </label>
                            {% if lead.business_type == 1 %} Commercial {% endif %}
                                {% if lead.business_type == 2 %} Residential {% endif %}
                               {% if lead.business_type == 3 %} Shopfitters {% endif %}
                               {% if lead.business_type == 4 %} Other {% endif %}
                            </select>
                        </div> 
                        <div class="col-md-4 fv-row fv-plugins-icon-container">
                            <label class="fs-5 fw-semibold mb-2">Interested In Products: </label>
                         
                                {% for product in allproducts %}
                                   {% if product.id in selected_product_ids %} {{ product.product_name }}({{ product.sku}}) {% endif %}
                                {% endfor %}
                            
                        </div>
                       
                    </div>
                </div>
            </div>
            <div id="quu"></div>
            <div class="card card-flush">
                <div class="card-body pt-6">
                    <div class="row g-9 mb-5">
                          <div class="col-md-4 fv-row fv-plugins-icon-container" id="companyField" style="display: block;">
                            <label class=" fs-5 fw-semibold mb-2">Street: </label>{{ lead.street }}
                        </div>
                         <div class="col-md-4 fv-row fv-plugins-icon-container" id="companyField" style="display: block;">
                            <label class=" fs-5 fw-semibold mb-2">Suburb: </label>{{ lead.city }}
                        </div>
                         <div class="col-md-4 fv-row fv-plugins-icon-container">
                            <label class=" fs-5 fw-semibold mb-2">State: </label>
                          {% if lead.state == 'ACT' %} Australian Capital Territory {% endif %}
                              {% if lead.state == 'NSW' %} New South Wales {% endif %}
                                {% if lead.state == 'NT' %} Northern Territory {% endif %}
                               {% if lead.state == 'QLD' %} Queensland {% endif %}
                                {% if lead.state == 'SA' %} South Australia {% endif %}
                                 {% if lead.state == 'TAS' %} Tasmania {% endif %}
                               {% if lead.state == 'VIC' %} Victoria {% endif %}
                                {% if lead.state == 'WA' %} Western Australia {% endif %}
                             
                        </div>
                         <div class="col-md-4 fv-row fv-plugins-icon-container" id="companyField" style="display: block;">
                            <label class=" fs-5 fw-semibold mb-2">Postcode: </label>{{ lead.post_code }}
                        </div>
                   
                        <div class="col-md-4 fv-row fv-plugins-icon-container">
                            <label class=" fs-5 fw-semibold mb-2">Country: </label>Australia
                        </div>
                        
                        {% if '1' in request.user.get_role or user.is_superuser  %}
                        <div class="col-md-4 fv-row fv-plugins-icon-container">
                            <label class=" fs-5 fw-semibold mb-2"  for="userid-{{ lead.id }}">Assign to Sales User: </label>
                           
                                {% for user in users %}
                              {% if user.id|stringformat:"s" == lead.assigned_to.id|stringformat:"s" %} {% if user.userinfo.first_name %}{{ user.userinfo.first_name }} {{ user.userinfo.last_name }}{%else%}-{%endif%} {% endif %}
                                {% endfor %}
                        </div>
                        {% endif %}
                       
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}
{% block script %}
	 <script>
           $('#customer').on("change", function (){
               var val=$(this).val();             
                if ( val== 0) {
                    $('#companyField').css('display','block');
                    $('#fname').html("Director's First Name");
                    $('#lname').html("Director's Last Name");
                    $('#company').attr('required',true);
                } else if (val == "1") {
                        $('#companyField').css('display','none');
                  $(".individualFields").css('display','block');
                  $('#fname').html("First Name");
                    $('#lname').html("Last Name");
                    $('#company').removeAttr('required');
                } else {
                   $('#companyField').css('display','none');
                    $(".individualFields").css('display','block');
                }
            });
                
            $(document).ready(function () {
                $(document).on('click','.is_primary',function(){
                    if( $(this).is(':checked'))
                    {
                    var count=$(this).attr('data-count');
                    $('.is_primary').prop( "checked", false );;
                    $(this).prop( "checked", true );;
                    }
                });
                $('body').on('click', '#delbtn', function() {
                    $(this).parent().parent().parent().remove();
                });
            });
    </script>
    
    <script>
        function updateMapLink() {
            const street = document.getElementById('street').value;
            const suburb = document.getElementById('city').value;
            const state = document.getElementById('state').value;
            const postcode = document.getElementById('postcode').value;
            const country = document.getElementById('country').value;
        
            const address = `${street}, ${suburb}, ${state} ${postcode}, ${country}`;
            const encodedAddress = encodeURIComponent(address);
            const mapUrl = `https://www.google.com/maps/search/?api=1&query=${encodedAddress}`;
        
            const link = document.getElementById('map-preview');
            link.href = mapUrl;
            link.textContent = "Preview Address on Google Maps";
            link.style.display = 'inline';
        }
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            ['street', 'city', 'state', 'postcode', 'country'].forEach(id => {
                const input = document.getElementById(id);
                if (input) {
                    input.addEventListener('input', updateMapLink);
                }
            });
        });
    </script>
  
   <script>
        const postcodeInput = document.getElementById('postcode');
        postcodeInput.addEventListener('input', () => {
        if (postcodeInput.value.length > 6) {
          postcodeInput.value = postcodeInput.value.slice(0, 6); // Truncate to 10 digits
        }
        });
        
        function validateForm() {
                var numberField = document.getElementById("abn");
                var numberValue = numberField.value;
        
                if (numberValue && numberValue.length < 11) {
                    alert("Please enter valid ABN.");
                    return false; // Prevent form submission
                }
                if (numberValue && numberValue.length > 11) {
                    alert("Please enter valid ABN.");
                    return false; // Prevent form submission
                }
                $('.form').attr('action',"{%url 'leads:edit' lead.id %}");
                return true; // Allow form submission
            }
  </script>
    
{% endblock script %}