{% include 'vendor/include/header.html' %}
   {% include 'vendor/include/topbar.html' %}
    {% include 'vendor/include/sidebar.html' %}
    {% load static %}
{% load crispy_forms_tags %}
{% load bootstrap5 %}
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">

            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Create Client</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="/vendor/dashboard/">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="#">Client</a></li>
                        <li class="breadcrumb-item active">Create</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">

        <!-- Default box -->
        <div class="card">

            <div class="card-body">

                <div class="row">
                    <div class="col-md-12">
                        
                        <form method="post" action="" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="form-row">
                               
                                <div class="form-group col-md-4">
                                    <label for="first_name" class="">First Name</label>
                                    <input type="text" name="first_name" id="first_name" class="form-control" value="{{clients.first_name}}" required>   
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="last_name" class="">Last Name</label>
                                    <input type="text" name="last_name" id="last_name" class="form-control" value="{{clients.last_name}}" required>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="phone" class="">Phone Number</label>
                                    <input type="tel" name="phone" id="phone" class="form-control" value="{{clients.phone}}" required>
                                </div>
                                
                                
                                <div class="form-group col-md-4">
                                    <label for="company" class="">Company Name</label>
                                    <input type="text" name="company" id="company" class="form-control" value="{{clients.company}}" required>
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="email" class="">Email</label>
                                    <input type="email" name="email" id="email" class="form-control" value="{{clients.email}}" required>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="address" class="">Full Address</label>
                                    <input type="text" name="address" id="address" class="form-control" value="{{clients.location}}" required>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="logo" class="">Logo</label>
                                    <input type="file" name="logo"  id="logo" class="form-control">
                                </div>
                                
<input type="hidden" name="user_id" value="{{clients.id}}" class="form-control" required>

                            <div class="form-group col-md-4">
                                    <label for="location" class="">Location</label>
                                    {% for i in clients.clientlocation.all %}
                                        <input type="text" class="form-control" name="location[]" value="{{i.cl_location}}"><br>
                                        <!--<button onclick="deletelocation()" class="btn btn-danger">Delete</button>-->
                                    {% endfor %}
                                    <input type="button" id="add_location" class="add_field_button" value="Add More Fields">
                                    <div class="col-sm-12" id="key_feature_input_field_div"></div>
                            </div>
                            {% if clients.img %}
                            <div class="form-group col-md-4">
                                <label for="location" class="">Clien Logo</label><br>
                                <img  src="{{clients.img.url}}" class="img-fluid mx-auto" width="100px" />
                            </div>
                            {% endif %}                        

                        </div>
                            <button type="submit" class="btn btn-primary">Update Profile</button>
                        </form>

                    </div>
                </div>

            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->

    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
 <script>
    var count1 = 1;
    var count2 = 1;
    $('#add_location').click(function () {
        $('#key_feature_input_field_div').append('<div class="row" style="margin-top:10px;" id="con1'+count1+'">'+
                                        '<div class="col-sm-9">'+
                                            '<input type="text" class="form-control" name="location[]" placeholder="Location'+count1+'" required/>' + 
                                        '</div>'+
                                        '<div class="col-sm-3">'+
                                            '<button type="button" class="btn btn-danger" id="btnRemove1'+count1+'" onclick="removeBtn(1'+count1+')">Remove</button>'+
                                        '</div>'+
                                    '</div>'
                                    );
        
        count1++;
    });
     function removeBtn(id) 
    {
        $('#con'+id).remove();
    }
    
    
//////////////deletelocation
function deletelocation(){
    let text;
    if (confirm("Are you Sure. you want to Delete location.") == true) {
      alert('s');
    } else {
      text = "You canceled!";
    }
}

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