{% load static %}
{% include 'includes/header.html' %}
{% include 'includes/sidebar.html' %}
{% include 'includes/navbar.html' %}
                                       
<div class="container-xxl flex-grow-1 container-p-y">

    <!-- Breadcrumb -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0">Company</h4>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="/dashboard">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Company</li>
            </ol>
        </nav>
    </div>

    <div class="row">
        <!-- FormValidation -->
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form id="add_form" class="row g-6 pt-5">
                        {% csrf_token %}   
                    
                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="name">Company Name <span style="color: red;">*</span></label>
                            <input  type="text"  id="name"  class="form-control" name="name"   readonly  required/>
                        </div>

                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="code">Company Code</label>
                            <input  type="text" id="code"  class="form-control" name="code"  readonly required/>
                        </div>

                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="email">Email <span style="color: red;">*</span></label>
                            <input  type="email" id="email"   class="form-control email-validate"  name="email" required />
                            <div class="invalid-feedback">Please enter a valid email address.</div>
                        </div>

                        <div class="col-md-6 form-control-validation">
                            <label class="form-label" for="address1">Address Line1</label>
                            <textarea class="form-control" id="address1" name="address1"></textarea>
                        </div>

                        <div class="col-md-6 form-control-validation">
                            <label class="form-label" for="address2">Address Line 2</label>
                            <textarea class="form-control" id="address2" name="address2"></textarea>
                        </div>

                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="city">City</label>
                            <input  type="text" id="city"  class="form-control" name="city" />
                        </div>


                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="state">State</label>
                            <input  type="text" id="state"  class="form-control" name="state" />
                        </div>

                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="pincode">Pincode</label>
                            <input  type="number" id="pincode"  class="form-control" name="pincode" />
                        </div>

                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="gst">GST</label>
                            <input  type="text" id="gst"  class="form-control" name="gst" />
                        </div>

                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="c_no">CI.No</label>
                            <input  type="text" id="c_no"  class="form-control" name="c_no" />
                        </div>

                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="statecode">Statecode</label>
                            <input  type="text" id="statecode"  class="form-control" name="statecode" />
                        </div>

                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="sales_phone">Sales Phone No</label>
                            <input  type="text" id="sales_phone"  class="form-control" name="sales_phone" />
                        </div>

                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="service_phone">Service Phone No</label>
                            <input  type="text" id="service_phone"  class="form-control" name="service_phone" />
                        </div>

                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="store_support_phone">Store Phone No</label>
                            <input  type="text" id="store_support_phone"  class="form-control" name="store_support_phone" />
                        </div>

                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="cp_name">Contact Person</label>
                            <input  type="text" id="cp_name"  class="form-control" name="cp_name" />
                        </div>
                       

                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="cp_email">Contact Person Email</label>
                            <input  type="text" id="cp_email"  class="form-control email-validate" name="cp_email" />
                            <div class="invalid-feedback">Please enter a valid email address.</div>

                        </div>

                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="cp_mobile">Contact Person Mobile</label>
                            <input  type="text" id="cp_mobile"  class="form-control" name="cp_mobile" maxlength="10" />
                        </div>
                    

                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="cp_phone">Contact Person Phone</label>
                            <input  type="text" id="cp_phone"  class="form-control" name="cp_phone" maxlength="10"  />
                        </div>

                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="report_mail">Report Email</label>
                            <input  type="email" id="report_mail"  class="form-control email-validate" name="report_mail" />
                            <div class="invalid-feedback">Please enter a valid email address.</div>

                        </div>

                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="report_mail">Current Financial Year </label>
                            <select class="select2  form-control" id="financial_year" name="financial_year" >
                                <option value="">Select</option>
                                {% for k in year %}
                                <option value="{{k.id}}">{{k.name}}</option>
                                {% endfor %}
                            </select>
                        </div>  

                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="report_mail">Tax </label>
                            <select class="select2  form-control" id="tax_id" name="tax_id" >
                                <option value="">Select</option>
                                {% for k in tax %}
                                <option value="{{k.id}}">{{k.name}} - {{k.percentage}}%</option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="start_latitude">Latitude </label>
                            <input  type="text" id="start_latitude"  class="form-control" name="start_latitude" />
                        </div>  

                        <div class="col-md-4 form-control-validation">
                            <label class="form-label" for="start_longitude">Longitude </label>
                            <input  type="text" id="start_longitude"  class="form-control" name="start_longitude" />
                        </div>

                        <!-- <div class="col-4 mb-3" style="margin-top: 3%;">
                            <button type="button" class="btn btn-success btn-xs" onclick="showMap('start')"><i class="menu-icon icon-base ti tabler-map"></i></button>
                        </div> -->
                        <div class="col-12 d-flex justify-content-end form-control-validation">
                            <input type="hidden" id="company_id" name="company_id" value="{{company.id}}">
                            <button type="button" name="submitButton" class="btn btn-primary" onclick="history.back()"> Back</button>&nbsp; &nbsp;
                            <button type="submit" name="submitButton" class="btn btn-success" id="updateBtn">Update</button> 
                        </div>
                    </form>
                </div>
            </div>

            <!-- Map Modal -->
            <div id="map_modal" class="modal fade" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Location</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div id="map" style="height: 600px; width: 100%;"></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" id="confirm_location">Confirm Location</button>
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>   

        </div>
    </div>



</div>



{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}
<script>

    $(document).ready(function () {

        safeValue('#name', '{{ company.name|escapejs }}');
        safeValue('#code', '{{ company.company_code|escapejs }}');
        safeValue('#email', '{{ company.email|escapejs }}');
        safeValue('#address1', '{{ company.address_line_1|escapejs }}');
        safeValue('#address2', '{{ company.address_line_2|escapejs }}');
        safeValue('#city', '{{ company.city|escapejs }}');
        safeValue('#state', '{{ company.state|escapejs }}');
        safeValue('#pincode', '{{ company.pincode|escapejs }}');
        safeValue('#gst', '{{ company.gst|escapejs }}');
        safeValue('#c_no', '{{ company.cin|escapejs }}');
        safeValue('#statecode', '{{ company.statecode|escapejs }}');
        safeValue('#sales_phone', '{{ company.sales_phone|escapejs }}');
        safeValue('#service_phone', '{{ company.service_phone|escapejs }}');
        safeValue('#store_support_phone', '{{ company.store_support_phone|escapejs }}');
        safeValue('#cp_name', '{{ company.cp_name|escapejs }}');
        safeValue('#cp_email', '{{ company.cp_mail|escapejs }}');
        safeValue('#cp_mobile', '{{ company.cp_mobile|escapejs }}');
        safeValue('#cp_phone', '{{ company.cp_phone|escapejs }}');
        safeValue('#report_mail', '{{ company.report_mail|escapejs }}');
        // safeValue('#financial_year', '{{ company.current_fy|escapejs }}');
        safeValue('#start_longitude', '{{ company.longitude|escapejs }}');
        safeValue('#start_latitude', '{{ company.latitude|escapejs }}');
        safeSelectValue('#tax_id', '{{ company.tax_id|escapejs }}');
        safeSelectValue('#financial_year', '{{ company.current_fy}}');

        validateEmailInput('.email-validate');

    });

        

   
    $('#updateBtn').on('click', function(event) {
        event.preventDefault();
        const formData = new FormData($('#add_form')[0]);
        console.log('formData', formData)

        $.ajax({
            type: 'POST',
            url: '/update_company/',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRFToken': getCSRFToken()  
            },
            success: function(response) {
                if (response.message === 'success') {
                    showToast('success', 'Company details updated successfully!');
                }
                else if (response.message === 'warning' && response.error_message)  {
                    showSweetAlert('warning', 'You do not have permission to update company details');
                } 
                else {
                    showToast('error', 'Failed to update company details.');
                }
            },
            error: function(xhr, errmsg, err) {
                console.log(xhr.status + ": " + xhr.responseText);
            }
        });
    });


</script>