@extends('layout')
@section('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> {{__('message.manage')}} {{__('message.deal')}} {{__('message.stages')}}</h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ asset('dashboard') }}">{{__('message.dashboard')}}</a></li>
                        
                        <li class="breadcrumb-item active" aria-current="page">{{__('message.deal')}}</li>
                    </ol>
                </nav>
            </div>
            <!-- end::page header -->
            <div class="card">
                <div class="card-body">
                    <x-flashMessage />
               
                    <div class="row px-3">
                        <div class="col-md-12 d-flex justify-content-end">
                            <button type="button"  class="btn btn-outline-secondary add-dealstage-btn"   data-toggle="modal" data-target="#dealstageModal"><i class="ti-plus" data-toggle="tooltip" title="Create Lead 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="{{asset('pipeline')}}" class="tab " onclick="openTab('pipeline')">
                                    <strong> {{__('message.pipeline')}}</strong>
                                </a>
                                <a href="{{asset('lead-stage')}}" class="tab " onclick="openTab('lead_stage')">
                                    <strong> {{__('message.lead_stage')}}</strong>
                                </a>
                                <a href="{{asset('deal-stage')}}" class="tab active" onclick="openTab('deal_stage')">
                                    <strong> {{__('message.deal_stage')}}</strong>
                                </a>
                                <a href="{{asset('source')}}" class="tab" onclick="openTab('source')">
                                    <strong> {{__('message.source')}}</strong>
                                </a>
                               {{-- <a href="{{asset('links')}}" class="tab" onclick="openTab('links')">
                                    <strong> Links</strong>
                                </a>--}}
                                
                                
                            </div>

                            <div class="px-3 w-100">
                                <div class="tab-content active animate__animated animate__fadeIn shadow-sm w-100" id="dealstage">
                                    
                                    {{-- 
                                    <div class="row py-3 mb-3" style="background:#f5f5f5;">
                                        <div class="col-md-6 ">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <form action="{{asset('pipeline')}}" method="get" class="range-form">
                                                        <select class="form-control select_range" name="select_range" >
                                                            <option value="5" {{isset($_GET['select_range']) && $_GET['select_range']=='5' ? 'selected' : '' }}>5</option>
                                                            <option value="10" {{ isset($_GET['select_range']) && $_GET['select_range']=='10' ? 'selected' : '' }}>10</option>
                                                            <option value="15" {{ isset($_GET['select_range']) && $_GET['select_range']=='15' ? 'selected' : '' }}>15</option>
                                                            <option value="20" {{ isset($_GET['select_range']) && $_GET['select_range']=='20' ? 'selected' : '' }}>20</option>
                                                            <option value="25" {{ isset($_GET['select_range']) && $_GET['select_range']=='25' ? 'selected' : '' }}>25</option>
                                                        </select>
                                                    </form>
                                                    
                                                </div>
                                                <div class="col-md-5 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">
                                                    <form class="d-flex" action="{{asset('pipeline')}}" method="get">
                                                        <input type="search" placeholder="search..." name="search" class="form-control" value="{{isset($_GET['search']) ? $_GET['search'] : ''}}">
                                                        <button class="btn btn-outline-warning"><i class="fa fa-refresh"></i></button>
                                                    </form>
                                                </div>
                                                
                                                
                                            </div>
                                            
                                        </div>

                                    </div>--}}

                                    

                                    <div class="row">
                                        @if(isset($deal_stage))
                                        <table class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>S.No</th>
                                                    <th>Stage</th>
                                                    <th>Pipeline</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($deal_stage as $key=>$value)
                                                <tr>
                                                    <td>{{++$key}}</th>
                                                    <td>
                                                        {{$value->name}}
                                                    </td>
                                                    
                                                    <td>
                                                        @foreach($pipeline as $p)
                                                            @if($p->id == $value->pipeline_id)
                                                                {{$p->name}}
                                                            @endif
                                                        @endforeach
                                                    </td>
                                                    </td>
                                                    <td>
                                                        <button fetch-data="{{$value}}" class="btn btn-outline-info btn-sm edit-dealstage-btn">
                                                            <i class="fa fa-pencil"></i>
                                                        </button>
                                                        <button class="btn btn-outline-danger btn-sm delete-dealstage-btn" leadstage-id="{{$value->id}}">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                        @endif
                                    </div>
                                    <div class="blade-pagination py-3 d-flex justify-content-center">
                                        {{$deal_stage->links()}}
                                </div>
                                    
                                </div>   
                                                                                            
                            </div>                  
                        </div>
                    </div>

                </div>
            </div>

        </div>


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

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

                <!-- Modal body -->
                <div class="modal-body">
                    <form class="dealstage-form" action="{{asset('add-deal-stage')}}" method="post">
                        @csrf
                        <input type="hidden" name="modal_id" class="modal_id" value="">
                        <div class="form-group">
                            <label>{{__('message.lead')}} {{__('message.stage')}} {{__('message.name')}}</label>
                            <input type="text" name="name" class="form-control dealstage_name">
                        </div>
                        <div class="form-group">
                            <label>{{__('message.pipeline')}}</label>
                            <select name="pipeline_id" class="form-control pipeline_id" >

                                <option disabled selected>Select</option>
                                @foreach($pipeline as $value)
                                    <option value="{{$value->id}}">{{$value->name}}</option>
                                @endforeach
                            </select> 
                        </div>
                        <div class="form-group">
                            <label>order</label>
                            <input type="number" name="order" class="form-control order">
                        </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 submit-btn">Create</button>
                        </div>
                    </form>
                </div>

            

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

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

            $(".add-dealstage-btn").click(function(){
                $(".dealstage-form").trigger('reset');
                $(".modal_id").val("");
                $(".submit-btn").html("Create");
            });

           $(".edit-dealstage-btn").click(function(){
                var allData = $(this).attr('fetch-data');
                var newData = JSON.parse(allData);
                $(".submit-btn").html("Update");
                console.log(newData);
                $("#dealstageModal").modal("show");
                $(".modal_id").val(newData.id);
                $(".dealstage_name").val(newData.name);
                $(".pipeline_id").val(newData.pipeline_id);


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

           $(".delete-dealstage-btn").click(function(){
                var id = $(this).attr("leadstage-id");
               

                swal({
                    title: 'Are you sure?',
                    text: 'Once deleted, you will not be recover!',
                    icon: 'warning',
                    dangerMode: true,
                    buttons: ["Cancel", "Yes!"],
                }).then(function(value) {
                    if (value) {
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });

                        $.ajax({
                            type: "post",
                            data: {
                                "id": id
                            },
                            url: "{{asset('delete-dealstage')}}",
                            dataType: "html",
                            success: function(result) {
                                //console.log(result);
                                swal("success!", "Successfully deleted!", "success");
                                window.location.reload();
                            },
                            error:function(error)
                            {
                                swal("Failed !", "Failed !", "error");
                                window.location.reload();
                            }
                        });
                       
                    }
                });
           });

           $('.select_range').on('change',function(){
                //var range = $(this).val();
                $('.range-form').submit();
                
                
           });

        });

        $("#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: "{{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: "{{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: "{{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: "{{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>
@endpush