<?php $__env->startSection('content'); ?>
    <!-- begin::main content -->
    <style>
  /* Styles for tabs */
 .settings-sidebar{
    width:20%;
    background:white;

 }
 .sittings-sidebar ul li a{
    width:120px;
 }
 
</style>

    <main class="main-content">

        <div class="container">

            <!-- begin::page header -->
            <div class="page-header border-0">
                <h3> <?php echo e(__('message.manage')); ?> <?php echo e(__('message.deal')); ?> <?php echo e(__('message.stages')); ?></h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="<?php echo e(asset('dashboard')); ?>"><?php echo e(__('message.dashboard')); ?></a></li>
                        
                        <li class="breadcrumb-item active" aria-current="page"><?php echo e(__('message.deal')); ?></li>
                    </ol>
                </nav>
            </div>
            <!-- end::page header -->
            <div class="card">
                <div class="card-body">

               
                    <div class="row px-3">
                        <div class="col-md-12 d-flex justify-content-end">
                            <button type="button" class="btn btn-outline-success btn-sm"  data-toggle="modal" data-target="#dealModal"><i class="fa fa-plus" data-toggle="tooltip" data-original-title="Create Deal Stage"></i></button>
                        </div>
                        <div class="col-md-12 px-0 d-flex settings-box">
                                                
                            <!-- Tabs -->
                            <div id="tabs" class="d-flex flex-column shadow-sm">
                                <a href="<?php echo e(asset('pipeline')); ?>" class="tab " onclick="openTab('pipeline')">
                                    <strong> <?php echo e(__('message.pipeline')); ?></strong>
                                </a>
                                <a href="<?php echo e(asset('lead-stage')); ?>" class="tab " onclick="openTab('lead_stage')">
                                    <strong> <?php echo e(__('message.lead_stage')); ?></strong>
                                </a>
                                <a href="<?php echo e(asset('deal-stage')); ?>" class="tab active" onclick="openTab('deal_stage')">
                                    <strong> <?php echo e(__('message.deal_stage')); ?></strong>
                                </a>
                                <a href="<?php echo e(asset('source')); ?>" class="tab" onclick="openTab('source')">
                                    <strong> <?php echo e(__('message.source')); ?></strong>
                                </a>
                                
                                
                            </div>

                            <div class="px-3 w-100">
                                <div class="tab-content active animate__animated animate__fadeIn shadow-sm w-100" id="deal_stage">
                                    
                                    
                                    <div class="row py-3 mb-3" style="background:#f5f5f5;">
                                        <div class="col-md-6 ">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <select class="form-control" name="select_range">
                                                        <option value="5">5</option>
                                                        <option value="10">10</option>
                                                        <option value="15">15</option>
                                                        <option value="20">20</option>
                                                        <option value="25">25</option>
                                                    </select>
                                                   
                                                </div>
                                                <div class="col-md-6 px-0 d-flex align-items-center justify-content-start"> <label>Entries Per Page</label></div>
                                                <div class="col-md-3"></div>
                                            </div>
                                            
                                           
                                        </div>
                                        <div class="col-md-6">
                                            <div class="row">
                                                <div class="col-md-3">
                                                   
                                                </div>
                                                <div class="col-md-9">
                                                    <input type="search" placeholder="search..." name="search" class="form-control">
                                                </div>
                                            </div>
                                            
                                        </div>

                                    </div>

                                    

                                    <div class="row">
                                        <table class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>S.No</th>
                                                    <th>Pipeline</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>1</th>
                                                    <td>
                                                        Sales
                                                    </td>
                                                    <td>
                                                        <button class="btn btn-outline-info btn-sm edit-pipeline-btn">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button class="btn btn-outline-danger btn-sm">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>2</th>
                                                    <td>
                                                        Sales
                                                    </td>
                                                    <td>
                                                        <button class="btn btn-outline-info btn-sm edit-pipeline-btn">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button class="btn btn-outline-danger btn-sm edit-pipeline-btn">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    
                                </div>   
                                                                                          
                            </div>                
                        </div>
                    </div>

                </div>
            </div>

        </div>


       <!-- The Modal -->
       <div class="modal animate__animated animate__bounceInDown animate__delay-0.5s" id="dealModal">
        <div class="modal-dialog modal-dialog-centered w-50">
            <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title"><?php echo e(__('message.create')); ?> <?php echo e(__('message.deal')); ?> <?php echo e(__('message.stage')); ?></h4>
                <button type="button" class="close close-btn" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <form class="" action="" method="post">
                    <div class="form-group">
                        <label> <?php echo e(__('message.deal')); ?> <?php echo e(__('message.name')); ?></label>
                        <input type="text" name="lead_name" class="form-control">
                    </div>
                    <div class="form-group">
                        <label><?php echo e(__('message.pipeline')); ?></label>
                        <select name="pipeline_id" class="form-control">
                            <option>Select</option>
                        </select> 
                    </div>
                    <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-outline-danger mr-3 cancel-btn"  data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-outline-success">Create</button>
                    </div>
                </form>
            </div>

           

            </div>
        </div>
        </div>

    </main>
    <!-- end::main content -->
<?php $__env->stopSection(); ?>
<?php $__env->startPush('footer-script'); ?>
    <!-- begin::select2 -->
    <link rel="stylesheet" href="<?php echo e(asset('public/admin/vendors/select2/css/select2.min.css')); ?>" type="text/css">
    <script src="<?php echo e(asset('public/admin/vendors/select2/js/select2.min.js')); ?>"></script>
    <!-- end::select2 -->
    <script>
       
        $(document).ready(function() {
            $('#js-example-basic-roles').select2({});

            $(".edit-pipeline-btn").click(function(){
                $("#dealModal").modal("show");


                $(".close-btn").click(function(){
                    $("#dealModal").modal("hide");
                });
                $(".cancel-btn").click(function(){
                    $("#dealModal").modal("hide");
                });
           });

        });

        $("#billing_country").on("change",function(){
            var company_id = $(this).val();
            stateFetch(company_id,"billing_state"); 
        });

        $("#location_country").on("change",function(){
            var company_id = $(this).val();
            stateFetch(company_id,"location_state");                
        });

        

        function stateFetch(company_id,appendState)
        {
            $.ajax({
                    type: "post",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        "id": company_id
                    },
                    url: "<?php echo e(asset('fetch-state')); ?>",
                    dataType: "html",
                    success: function(result) 
                    {
                        $("#"+appendState).html("");
                        var allData = JSON.parse(result);
                        if(allData.message=="success")
                        {
                            var data = allData.data;
                            var i;
                            var dOption = "<option selected disabled>--Select--</option>";
                            $("#"+appendState).append(dOption);
                            for(i=0;i<data.length;i++)
                            {
                                var option = `<option value="${data[i].id}">
                                                ${data[i].state_name}
                                                </option>
                                `;
                                $("#"+appendState).append(option);
                            }
                        }
                        else
                        {
                            console.log("failed");
                        }
                    },
                    error:function(xhr,error,status)
                    {
                        console.log(JSON.parse(xhr.responseText));
                    }
                });
        }

        //location city code
        $("#location_city").on("click",function(){
            //var search = $(this).val();
            $(".location_city_search_box").html("");
            if($(".main-add-city-box").hasClass("d-none"))
            {
                $(".main-add-city-box").removeClass("d-none");
                $(".add-search-city-box").removeClass("d-none");

                var typed_city = `
                            <input type="search" class='form-control border px-2 search-city-val' 
                             style='list-style:none;cursor:pointer;'>`;

               
                            
                $(".add-search-city-box").html(typed_city);
                $(".search-city-val").focus();
                
                $(".search-city-val").on('input',function(){
                    
                    $(".location_city_search_box").removeClass("d-none");
                
                    var search = $(this).val();
                    $.ajax({
                        type: "post",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: {
                            "search": search
                        },
                        url: "<?php echo e(asset('search-city')); ?>",
                        dataType: "html",
                        success: function(result) 
                        {
                            $(".location_city_search_box").html("");

                        
                                    
                            var allData = JSON.parse(result);
                            if(allData.message=="success")
                            {
                                //$(".location_city_search_box").removeClass('d-none');
                                var data = allData.data;
                                console.log(data);
                                var i;                           
                                        
                                var new_li = `<li class='text-capitalize rounded new_city_add_btn text-white p-2 mb-2' addcity="${search}" style='list-style:none;cursor:pointer;background:grey'>
                                        Add &nbsp"${search}"...</li>`;
                                    $(".location_city_search_box").append(new_li);
                            
                                for(i=0;i<data.length;i++)
                                {
                                    
                                    var li = `<li class='text-capitalize rounded city_name_li bg-dark text-white p-2 mb-2' city='${data[i].city_name}' style='list-style:none;cursor:pointer;background:grey'>
                                        ${data[i].city_name}</li>`;
                                    $(".location_city_search_box").append(li);
                                }
                                $(".city_name_li").click(function(){
                                
                                    var city = $(this).attr('city');
                                    console.log(city);
                                    $("#location_city").val(city);
                                    
                                    $(".location_city_search_box").addClass('d-none');
                                    $(".main-add-city-box").addClass("d-none");
                                    $(".add-search-city-box").addClass("d-none");
                                });
                            }
                            else
                            {
                                console.log("failed");
                                var new_li = `<li class='text-capitalize rounded new_city_add_btn bg-dark text-white p-2 mb-2' addcity="${search}" style='list-style:none;cursor:pointer'>
                                        Add &nbsp"${search}"...</li>`;
                                    $(".location_city_search_box").append(new_li);
                            }

                                $(".new_city_add_btn").click(function(){
                                    var city = $(this).attr('addcity');
                                    var loc_city = $("#location_city").val(city);
                                // alert(loc_city);
                                    //var city_name = $("#b_city_name").val();
                                    addCity(city,"main-add-city-box","location_city");
                                
                                });
                        },
                        error:function(xhr,error,status)
                        {
                            console.log(JSON.parse(xhr.responseText));
                            var new_li = `<li class='text-capitalize rounded new_city_add_btn bg-dark text-white p-2 mb-2' addcity="${search}" style='list-style:none;cursor:pointer'>
                                        Add &nbsp"${search}"...</li>`;
                                    $(".location_city_search_box").append(new_li);
                        }
                    });
                });
            }  
            
            else
            {
                $(".main-add-city-box").addClass("d-none"); 
            }
                

        });
        
        
        //city code
        $("#billing_city").on("click",function(){
           
            //var search = $(this).val();
            $(".billing_city_search_box").html("");
            $(".billing-main-add-city-box").removeClass("d-none");
            $(".billing-add-search-city-box").removeClass("d-none");
           
            var typed_city = `
                            <input type="search" class='form-control innder-border border search-city-val' 
                             style='list-style:none;cursor:pointer'>`;
                            
                $(".billing-add-search-city-box").html(typed_city);
                $(".search-city-val").focus();
            $(".search-city-val").on('input',function(){
                
                $(".billing_city_search_box").removeClass("d-none");
               
                var search = $(this).val();
                $.ajax({
                    type: "post",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        "search": search
                    },
                    url: "<?php echo e(asset('search-city')); ?>",
                    dataType: "html",
                    success: function(result) 
                    {
                        $(".billing_city_search_box").html("");

                       
                                
                        var allData = JSON.parse(result);
                        if(allData.message=="success")
                        {
                            //$(".location_city_search_box").removeClass('d-none');
                            var data = allData.data;
                            console.log(data);
                            var i;                           
                                    
                            var new_li = `<li class='text-capitalize rounded new_city_add_btn p-2 mb-2' addcity="${search}" style='list-style:none;cursor:pointer;background:#ddd'>
                                    Add &nbsp"${search}"...</li>`;
                                $(".billing_city_search_box").append(new_li);
                           
                            for(i=0;i<data.length;i++)
                            {
                                
                                var li = `<li class='text-capitalize rounded city_name_li p-2 mb-2' city='${data[i].city_name}' style='list-style:none;cursor:pointer;'>
                                    ${data[i].city_name}</li>`;
                                $(".billing_city_search_box").append(li);
                            }
                            $(".city_name_li").on('mouseover',function(){
                                $(this).css({'background':'#ddd','color':'white'});
                            });
                            $(".city_name_li").on('mouseleave', function(){
                                // Reset background and text color when mouse leaves
                                $(this).css({'background':'','color':''});
                            });
                            $(".city_name_li").click(function(){
                               
                                var city = $(this).attr('city');
                                console.log(city);
                                $("#billing_city").val(city);
                                
                                $(".billing_city_search_box").addClass('d-none');
                                $(".billing-main-add-city-box").addClass("d-none");
                                $(".billing-add-search-city-box").addClass("d-none");
                            });
                        }
                        else
                        {
                            console.log("failed");
                            var new_li = `<li class='text-capitalize rounded new_city_add_btn bg-dark text-white p-2 mb-2' addcity="${search}" style='list-style:none;cursor:pointer'>
                                    Add &nbsp"${search}"...</li>`;
                                $(".billing_city_search_box").append(new_li);
                        }

                            $(".new_city_add_btn").click(function(){
                                var city = $(this).attr('addcity');
                                var loc_city = $("#billing_city").val(city);
                               // alert(loc_city);
                                //var city_name = $("#b_city_name").val();
                                addCity(city,"billing-main-add-city-box","billing_city");
                            
                            });
                    },
                    error:function(xhr,error,status)
                    {
                        console.log(JSON.parse(xhr.responseText));
                        var new_li = `<li class='text-capitalize rounded new_city_add_btn bg-dark text-white p-2 mb-2' addcity="${search}" style='list-style:none;cursor:pointer'>
                                    Add &nbsp"${search}"...</li>`;
                                $(".location_city_search_box").append(new_li);
                    }
                });
            });

            


        });

        
        

        $(".location-add-city-btn").click(function(){
            if($(".location-add-city-box").hasClass("d-none"))
            {
                $(".location-add-city-box").removeClass("d-none");
                $(".location-add-city-box").removeClass("animate__animated animate__fadeOut");
                $(".location-add-city-box").addClass("animate__animated animate__bounceInRight");
                $(".location-add-city-box i").removeClass("fa-plus");
                $(".location-add-city-box i").addClass("fa-minus");
            }
            else
            { 
                
                $(".location-add-city-box").removeClass("animate__animated animate__bounceInRight")    
                $(".location-add-city-box").addClass("animate__animated animate__fadeOut"); 
                $(".location-add-city-box").addClass("d-none");              
                $(".location-add-city-box i").removeClass("fa-minus");
                $(".location-add-city-box i").addClass("fa-plus");
                
            }
            
           
           
        });

        $(".l-city-form-btn").click(function(){
            
            var city_name = $("#l_city_name").val();
            addCity(city_name,"location-add-city-box","location_city");
        });
        

        function addCity(city_name,cityformBox,city_input)
        {
            $.ajax({
                    type: "post",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        "city_name": city_name
                    },
                    url: "<?php echo e(asset('add-city')); ?>",
                    dataType: "html",
                    success: function(result) 
                    {
                        console.log(result);
                        var allData = JSON.parse(result);
                        if(allData.message=="success")
                        {
                            $("."+cityformBox).addClass("d-none");
                            $("."+city_input).val(allData.data);
                            
                        }
                        else
                        {
                            //console.log("failed");
                        }
                    },
                    error:function(xhr,error,status)
                    {
                        console.log(JSON.parse(xhr.responseText));
                    }
                });
        }
        
        
    function openTab(tabId) {
        // Get all tabs and hide them
        var tabs = document.querySelectorAll('.tab-content');
        tabs.forEach(function(tab) {
        tab.classList.remove('active');
        });

        // Remove active class from all tabs
        var tabButtons = document.querySelectorAll('.tab');
        tabButtons.forEach(function(button) {
        button.classList.remove('active');
        });

        // Show the clicked tab and add active class
        document.getElementById(tabId).classList.add('active');
        document.querySelector('[onclick="openTab(\'' + tabId + '\')"]').classList.add('active');
    }

    $(".billing-btn-toggle").click(function(){
        if($(".billing-address-main").hasClass('d-none'))
        {
            $(".billing-address-main").removeClass("d-none");
        }
        else
        {
            $(".billing-address-main").addClass("d-none");
        }
    });

    </script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layout', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\lead_admin\resources\views/settings/deal_stage.blade.php ENDPATH**/ ?>