@extends('layout.master')
@section('content')
<section class="content pb-5">
    <div class="container-fluid">
        <div class="row pt-4">
            <div class="col-md-12">
                <div class="title-section">
                    <p>Settings</p>
                </div>
            </div>

            <div class="col-md-12 pt-0 pt-sm-4">
                <div class="title-section">
                    <p>Courier <span> Courier Priority</span></p>
                </div>
            </div>
        </div>

        <div class="row pt-3 pt-sm-4">
            <div class="col-md-2">
                <nav>
                    <div class="nav nav-tabs courier-tabs flex-column" id="nav-tab" role="tablist" aria-orientation="vertical">
                        <button class="nav-link courier-link {{ !isset($_GET['lspId']) ? 'active' : '' }}" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">
                            Courier Priority 
                        </button>
                        <button class="nav-link courier-link {{ isset($_GET['lspId']) && !empty($_GET['lspId']) ? 'active' : '' }}" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">
                            Courier Selection
                        </button>
                        <button style="display: none;" class="nav-link courier-link  {{ $request->tab == 'rules' ? 'active' : '' }}" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">
                            Courier Rules
                        </button>
                    </div>
                </nav>
            </div>

            <div class="col-md-10">
                <div class="tab-content courier-content" id="nav-tabContent">

                    <!-- courier priority   -->
                    <div class="tab-pane fade {{ !isset($_GET['lspId']) ? 'active show' : '' }}" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">

                        <div class="row mt-4">
                            <div class="col-md-12 d-block d-sm-flex align-items-end justify-content-between">
                                <div class="priority-card fastest">
                                    <label>
                                        <input type="radio" name="product" class="card-input-element" onclick="fastestLogicSelection()" id="fastest_id"/>
                                        <div class="panel panel-default card-input">
                                            <!-- <div class="panel-heading">Product A</div> -->
                                            <div class="panel-body">
                                                <div class="courier-icon">
                                                    <img src="{{asset('images/truck.png')}}" height="60px" alt="">
                                                </div>
                                                <p>Fastest</p>
                                            </div>
                                        </div>
                                    </label>
                                </div>

                                <div class="priority-card chapest">
                                    <label>
                                        <input type="radio" name="product" class="card-input-element" onclick="cheapestLogic()" id="cheapest_id"/>
                                        <div class="panel panel-default card-input">
                                            <!-- <div class="panel-heading">Product A</div> -->
                                            <div class="panel-body">
                                                <div class="courier-icon">
                                                    <img src="{{asset('images/cheapest.png')}}" height="40px" alt="">
                                                </div>
                                                <p>Cheapest</p>
                                            </div>
                                        </div>
                                    </label>
                                </div>

                                <div class="priority-card recommended">
                                    <label>
                                        <input type="radio" name="product" class="card-input-element" />
                                        <div class="panel panel-default card-input">
                                            <div class="panel-heading mpop-heading">Most Popular</div>
                                            <div class="panel-body popular-body">
                                                <div class="courier-icon">
                                                    <img src="{{asset('images/recommended.png')}}" height="50px" alt="">
                                                </div>
                                                <p>Recommended <br> by Spoc</p>
                                            </div>
                                        </div>
                                    </label>
                                </div>

                                <div class="priority-card" id="custom">
                                    <label>
                                        <input type="radio" name="product" class="card-input-element" />
                                        <div class="panel panel-default card-input">
                                            <div class="panel-body">
                                                <div class="courier-icon">
                                                    <img src="{{asset('images/custom.png')}}" height="50px" alt="">
                                                </div>
                                                <p>Custom</p>
                                            </div>
                                        </div>
                                    </label>
                                </div>

                                <div class="priority-card bestRated">
                                    <label>
                                        <input type="radio" name="product" class="card-input-element" />
                                        <div class="panel panel-default card-input">
                                            <div class="panel-body">
                                                <div class="courier-icon">
                                                    <img src="{{asset('images/star.png')}}" height="50px" alt="">
                                                </div>
                                                <p>Best Rated</p>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-12 list">

                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-md-12">
                                <div class="drag-priority lsp-list">

                                    <div class="row">
                                        <div class="col-md-12 text-center">
                                            <h5><i class="fa fa-arrows" aria-hidden="true"></i>GO TO CUSTOM AND DRAG TO SET YOUR PRIORITY</h5>
                                        </div>
                                    </div>
                                    <div class="row sortable" id="couriers">

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

                    <!-- courier selection  -->

                    <div class="tab-pane fade {{ isset($_GET['lspId']) && !empty($_GET['lspId']) ? 'active show' : '' }}" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">

                        <div class="row">
                            <div class="col-md-12">
                                <ul class="nav nav-tabs kyc-tabs selection-tabs" id="myTab" role="tablist">
                                    <li class="nav-item kyc-item">
                                        <a class="nav-link kyc-link selection-link {{ isset($_GET['inactive']) && ($_GET['inactive'] != 'yes') ? 'active' : '' }}" id="individual-tab" data-toggle="tab" href="#individual" role="tab" aria-controls="individual" aria-selected="true">Active</a>
                                    </li>
                                    <li class="nav-item kyc-item">
                                        <a class="nav-link kyc-link selection-link {{ isset($_GET['inactive']) && ($_GET['inactive'] == 'yes') ? 'active' : '' }}" id="business-tab" data-toggle="tab" href="#business" role="tab" aria-controls="business" aria-selected="false">Inactive</a>
                                    </li>
                                    <li class="nav-item kyc-item">
                                        <a class="nav-link kyc-link selection-link" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="all" aria-selected="false">All</a>
                                    </li>
                                </ul>

                                <div class="tab-content kyc-content" id="myTabContent">

                                    <!-- active-tab  -->

                                    <div class="tab-pane fade {{ isset($_GET['inactive']) && $_GET['inactive'] != 'yes' ? 'active show' : '' }}" id="individual" role="tabpanel" aria-labelledby="individual-tab">

                                        <div class="row mt-4">
                                            <div class="col-md-12">
                                                <div class="order-section">
                                                    <div class="row">
                                                        <div class="col order-details">
                                                            <span>{{$activeCount}}</span>
                                                            <p>ActiveCouriers of 1 Couriers</p>
                                                        </div>
                                                        <div class="col order-details">
                                                            <span>{{$pincodeServiceable}}</span>
                                                            <p>Pincode Serviceable</p>
                                                        </div>
                                                        <div class="col order-details">
                                                            <span>{{$countPickup}}</span>
                                                            <p>Pincode Active for Pickup</p>
                                                        </div>
                                                        <div class="col order-details">
                                                            <span>4303</span>
                                                            <p>RTO Pincodes</p>
                                                        </div>
                                                        <div class="col order-details">
                                                            <span>4280</span>
                                                            <p>Out of Delivery Pincode</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row mt-3">
                                            <div class="col-md-9">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="form-group custom-form-group">
                                                            <select class="form-control" name="lsp_name_id" id="lsp_name_id" onchange="lspSelectionFunction(this)">
                                                                <option value="">Selct LSP</option>
                                                                @foreach($userlsp as $keyLsp => $valueLsp)
                                                                    @if(!empty($valueLsp->lsp))
                                                                        <option value="{{@$valueLsp->lsp->id}}">{{ @$valueLsp->lsp->name }}</option>
                                                                    @endif
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="col-md-3 col-8">
                                                      <div class="form-group custom-form-group">
                                                        <select class="form-control" name="active_mode" id="active_mode" onchange="activeSearchName()">
                                                            <option>Select Mode</option>
                                                            <option value="surface">Surface</option>
                                                            <option value="air">Air</option>
                                                            <option value="train">Train</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-3">
                                                    <select class="form-control" onchange="activeSearchName()" name="active_reigon" id="active_reigon">
                                                        <!-- <option value="">Select </option> -->
                                                        <!-- @foreach($zones as $zones)
                                                        <option>{{$zones->name}}</option>
                                                        @endforeach -->
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="row">

                                        @foreach($activeCouriers as $activeCourier)
                                        <div class="col-md-12">
                                            <div class="courier-select-card service-txt">
                                                <div class="row align-items-center">

                                                    <div class="col-md-2">
                                                        <div class="text-center">
                                                            <div class="dash-img">
                                                                <div class="dash-img">
                                                                    <img src="{{@$activeCourier->lsp->url}}" alt="">
                                                                </div>
                                                            </div>
                                                            <h6 id="lsp-name" >{{@$activeCourier->lsp->name}}</h6>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-1">
                                                        <div class="couriericon-img">
                                                            <img src="{{asset('images/delivery_surface.svg')}}" alt="">
                                                        </div>
                                                    </div>

                                                    <div class="col-md-4 col-12">
                                                        <div class="">
                                                            <p><i class="fa fa-phone service-icon" aria-hidden="true"></i>  Call Before Delivery: Not Available</p>
                                                            <p><i class="fa fa-user service-icon" aria-hidden="true"></i> Delivery Boy Number: Not Available</p>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-3 col-12">
                                                        <div class="">
                                                            <p><i class="fa fa-address-book-o service-icon" aria-hidden="true"></i> POD: On Request</p>
                                                            <p><i class="fa fa-map-marker service-icon" aria-hidden="true"></i> Tracking Service: Real Time</p>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-2">
                                                        <div class="text-center">

                                                            <p class="active-txt">Active on: <br> {{date('M d, Y',strtotime(@$activeCourier->updated_at))}}</p>
                                                        </div>
                                                        <div class="courier-arrow">
                                                            <a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                                        </div>
                                                    </div>  
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>

                                <!------->

                                <!-- Inactive-tab  -->

                                <div class="tab-pane fade {{ isset($_GET['inactive']) && ($_GET['inactive'] == 'yes') ? 'active show' : '' }}" id="business" role="tabpanel" aria-labelledby="business-tab">

                                    <div class="row mt-4">
                                        <div class="col-md-12">
                                            <div class="order-section">
                                                <div class="row">
                                                    <div class="col order-details">
                                                        <span>{{$deactiveCount}}</span>
                                                        <p>InactiveCouriers of 39 Couriers</p>
                                                    </div>
                                                    <div class="col order-details">
                                                        <span>{{$pincodeServiceable}}</span>
                                                        <p>Pincode Serviceable</p>
                                                    </div>
                                                    <div class="col order-details">
                                                        <span>{{$countPickup}}</span>
                                                        <p>Pincode Active for Pickup</p>
                                                    </div>
                                                    <div class="col order-details">
                                                        <span>4303</span>
                                                        <p>RTO Pincodes</p>
                                                    </div>
                                                    <div class="col order-details">
                                                        <span>4280</span>
                                                        <p>Out of Delivery Pincode</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-3">
                                        <div class="col-md-9">
                                            <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="form-group custom-form-group">
                                                            <select class="form-control" name="inactive_lsp_name_id" id="inactive_lsp_name_id" onchange="lspSelectionFunctionInactive(this)">
                                                                <option value="">Selct LSP</option>
                                                                @foreach($userlsp as $keyLsp => $valueLsp)
                                                                    @if(!empty($valueLsp->lsp))
                                                                        <option value="{{@$valueLsp->lsp->id}}">{{ @$valueLsp->lsp->name }}</option>
                                                                    @endif
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-3 col-8">
                                                      <div class="form-group custom-form-group">
                                                        <select class="form-control">
                                                            <option>Select Mode</option>
                                                            <option value="surface">Surface</option>
                                                            <option value="air">Air</option>
                                                            <option value="train">Train</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-3">
                                                    <select class="form-control">
                                                        
                                                    </select>
                                                </div>
                                            </div>
                                </div>
                            </div>

                            <div class="row">
                                @foreach($deactiveCouriers as $deactiveCourier)
                                <div class="col-md-12">
                                    <div class="courier-select-card service-txt">
                                        <div class="row align-items-center">

                                            <div class="col-md-2">
                                                <div class="text-center">
                                                    <div class="dash-img">
                                                        <img src="{{$deactiveCouriers->lsp->url}}" alt="">
                                                    </div>
                                                    <h6>{{$deactiveCourier->lsp->name}}</h6>
                                                </div>
                                            </div>

                                            <div class="col-md-1">
                                                <div class="couriericon-img">
                                                    <img src="{{asset('images/delivery_surface.svg')}}" alt="">
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="">
                                                    <p><i class="fa fa-phone service-icon" aria-hidden="true"></i>  Call Before Delivery: Not Available</p>
                                                    <p><i class="fa fa-user service-icon" aria-hidden="true"></i> Delivery Boy Number: Not Available</p>
                                                </div>
                                            </div>

                                            <div class="col-md-3">
                                                <div class="">
                                                    <p><i class="fa fa-address-book-o service-icon" aria-hidden="true"></i> POD: On Request</p>
                                                    <p><i class="fa fa-map-marker service-icon" aria-hidden="true"></i> Tracking Service: Real Time</p>
                                                </div>
                                            </div>

                                            <div class="col-md-2">
                                                <div class="text-center">
                                                    <button type="button" class="btn btn-primary" onclick="active('{{$deactiveCourier->lsp->name}}', {{$deactiveCourier->id}})">Active</button>
                                                    <p class="active-txt">Inactive on: <br> {{date('M d, Y',strtotime($deactiveCourier->updated_at))}}</p>
                                                </div>
                                                <div class="courier-arrow">
                                                    <a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>

                        <!------->

                        <!-- all tab  -->

                        <div class="tab-pane fade" id="all" role="tabpanel" aria-labelledby="allFF-tab">

                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <div class="order-section">
                                        <div class="row">
                                            <div class="col order-details">
                                                <span>{{$count}}</span>
                                                <p>InactiveCouriers of 39 Couriers</p>
                                            </div>
                                            <div class="col order-details">
                                                <span>{{$pincodeServiceable}}</span>
                                                <p>Pincode Serviceable</p>
                                            </div>
                                            <div class="col order-details">
                                                <span>{{$countPickup}}</span>
                                                <p>Pincode Active for Pickup</p>
                                            </div>
                                            <div class="col order-details">
                                                <span>4303</span>
                                                <p>RTO Pincodes</p>
                                            </div>
                                            <div class="col order-details">
                                                <span>4280</span>
                                                <p>Out of Delivery Pincode</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-9">
                                 <div class="row">
                                   <div class="col-md-2 col-4 text-left text-sm-right">
                                    <h6 class="mt-2">Filter By:</h6>
                                </div>

                                <div class="col-md-3 col-8">
                                    <div class="form-group custom-form-group">
                                        <select class="form-control">
                                            <option value="">Surface</option>
                                            <option value="">Air</option>
                                            <option value="">Train</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                  <div class="form-group custom-form-group">
                                    <select class="form-control">
                                        <option value="">Selct LSP</option>
                                                                @foreach($userlsp as $keyLsp => $valueLsp)
                                                                    @if(!empty($valueLsp->lsp))
                                                                        <option value="{{@$valueLsp->lsp->id}}">{{ @$valueLsp->lsp->name }}</option>
                                                                    @endif
                                                                @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <select class="form-control">
                                    <option value="">Zone</option>
                                </select>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="row">
                    @foreach($userlsp as $userlsps)

                    <div class="col-md-12">
                        <div class="courier-select-card service-txt">
                            <div class="row align-items-center">

                                <div class="col-md-2">
                                    <div class="text-center">
                                        <div class="dash-img">
                                            <img src="{{@$userlsps->lsp->url}}" alt="">
                                        </div>
                                        <h6>{{@$userlsps->lsp->name}}</h6>
                                    </div>
                                </div>

                                <div class="col-md-1">
                                    <div class="couriericon-img">
                                        <img src="{{asset('images/delivery_surface.svg')}}" alt="">
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="">
                                        <p><i class="fa fa-phone service-icon" aria-hidden="true"></i>  Call Before Delivery: Not Available</p>
                                        <p><i class="fa fa-user service-icon" aria-hidden="true"></i> Delivery Boy Number: Not Available</p>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="">
                                        <p><i class="fa fa-address-book-o service-icon" aria-hidden="true"></i> POD: On Request</p>
                                        <p><i class="fa fa-map-marker service-icon" aria-hidden="true"></i> Tracking Service: Real Time</p>
                                    </div>
                                </div>

                                <div class="col-md-2">

                                    @if($userlsps->status === 'active')
                                    <div class="text-center">
                                        <p class="active-txt">Active on: <br> {{date('M d, Y',strtotime(@$userlsps->updated_at))}}</p>
                                    </div>
                                    @else
                                    <div class="text-center">
                                        <p class="active-txt">Active on: <br> {{date('M d, Y',strtotime(@$userlsps->updated_at))}}</p>
                                    </div>
                                    @endif
                                    <div class="courier-arrow">
                                        <a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <!------->
        </div>
    </div>
</div>
</div>

<!-- courier rules  -->

<div style="display: none;" class="tab-pane fade {{ $request->tab == 'rules' ? 'show active' : '' }}" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">

        let lspIds123 = '';
        let zoneIds = '';
        let activeModeValue = '';
        let inactiveModeValue = '';

        if (lspIds123) {

            let lspId234 = lspIds123;

            var data = {
                '_token': "{{csrf_token()}}",
                'lspIds': lspId234
            }

            $.ajax({
                url : "{{route('lsp-zones-list')}}",
                type: 'POST',
                data: data,
                success:function(data) {

                    if(data.success == true){
                        $('#active_reigon')
                        .append($("<option></option>").attr("value", '')
                            .text('Select Zone'));
                        $.each(data.data, function(key, value) {   
                            $('#active_reigon')
                            .append($("<option></option>")
                                .attr("value", value.id)
                                .text(value.name)); 
                        });

                        $('#lsp_name_id').val(lspId234);
                        $('#active_reigon').val(zoneIds);
                        $('#active_mode').val(activeModeValue);

                        $('#inactive_lsp_name_id').val(lspId234);
                    }
                }
            });

        }

        function lspSelectionFunction(e) {
            let lspId = e.value;

            var data = {
                '_token': "{{csrf_token()}}",
                'lspIds': lspId
            }

            $.ajax({
                url : "{{route('lsp-zones-list')}}",
                type: 'POST',
                data: data,
                success:function(data) {

                    if(data.success == true){
                        $('#active_reigon')
                        .append($("<option></option>").attr("value", '')
                            .text('Select Zone'));
                        $.each(data.data, function(key, value) {   
                            $('#active_reigon')
                            .append($("<option></option>")
                                .attr("value", value.id)
                                .text(value.name)); 
                        });

                        window.location.href = '{{ url('view/courier/selection') }}?lspId=' + lspId + "&z_id="+zoneIds;
                    }
                }
            });

        }


        function lspSelectionFunctionInactive(e) {
            let lspId = e.value;

            var data = {
                '_token': "{{csrf_token()}}",
                'lspIds': lspId
            }

            $.ajax({
                url : "{{route('lsp-zones-list')}}",
                type: 'POST',
                data: data,
                success:function(data) {

                    if(data.success == true){
                        $('#active_reigon')
                        .append($("<option></option>").attr("value", '')
                            .text('Select Zone'));
                        $.each(data.data, function(key, value) {   
                            $('#active_reigon')
                            .append($("<option></option>")
                                .attr("value", value.id)
                                .text(value.name)); 
                        });

                        window.location.href = '{{ url('view/courier/selection') }}'+'?inactive=yes'+'&lspId=' + lspId + "&z_id="+zoneIds;
                    }
                }
            });

        }



        function activeSearchName(){

            var region = $('#active_reigon').val();
            var mode = $('#active_mode').val();
            let lspId = lspIds123;
            window.location.href = '{{ url('view/courier/selection') }}?lspId=' + lspId + "&z_id="+region + "&mode="+ mode;

        }

         if (zoneIds) {

            $('#active_reigon').val(zoneIds);

        }


    function deactive(name,id){
        var data = {
            '_token': "{{csrf_token()}}",
            'name' : name,
            'id' : id
        }

        $.ajax({
            url : "{{route('deactive/status')}}",
            type: 'POST',
            data: data,
            success:function(data) {
                if(data == 'success'){
                    window.location.reload();

                }
            }
        });
    }
    function active(name,id){
        var data = {
            '_token': "{{csrf_token()}}",
            'name' : name,
            'id' : id
        }

        $.ajax({
            url : "{{route('active/status')}}",
            type: 'POST',
            data: data,
            success:function(data) {
                if(data == 'success'){
                    window.location.reload();
                }
            }
        });
    }

    function cheapestLogic(){

        var data = {
            '_token': "{{csrf_token()}}",
            'cheapest': $('#cheapest_id').val()
        }

        $.ajax({
            url : "{{route('lsp-cheapest-logic-selection')}}",
            type: 'POST',
            data: data,
            success:function(data) {

                if(data == 'Update cheapest Logics'){

                   return swal({
                                        title: "Success",
                                        text: data,
                                        type: "success",

                                        closeOnConfirm: true,
                                        showLoaderOnConfirm: true,
                                    });

                }
                        // console.log(data); return false;
                if(data == 'success'){
                    console.log('hi');
                    window.location.reload();

                }
            }
        });

    }

    function fastestLogicSelection(){

        var data = {
            '_token': "{{csrf_token()}}",
            'cheapest': $('#fastest_id').val()
        }

        $.ajax({
            url : "{{route('lsp-fastest-logic-selection')}}",
            type: 'POST',
            data: data,
            success:function(data) {

                if(data ==  'Update Fastest Logics'){

                     return swal({
                                        title: "Success",
                                        text: data,
                                        type: "success",

                                        closeOnConfirm: true,
                                        showLoaderOnConfirm: true,
                                    });

                }

                if(data == 'success'){

                    window.location.reload();

                }
            }
        });

    }

    $(document).ready(function(){


        $(".fastest").on("click", function(e) {

            html = '<div class="col-md-12"><div class="priority-txt mb-2"><p>Allow the AI to choose the best couriers based on ratings, pricing, pickup and delivery performance</p></div><div class="text-center mt-4"><button type="button" class="btn btn-primary">Save Courier Priority</button></div></div>';
            $('.list').html(html);

        });
        $(".chapest").on("click", function(e) {
            html = '<div class="col-md-12"><div class="priority-txt mb-2"><p>Prioritize your search by focusing on the most cost-effective couriers.</p></div><div class="text-center mt-4"><button type="button" class="btn btn-primary">Save Courier Priority</button></div></div>';
            $('.list').html(html);
            $('.lsp-list').html('');

        });
        $(".recommended").on("click", function(e) {
            html = '<div class="col-md-12"><div class="priority-txt mb-2"><p>MPCL</p></div><div class="text-center mt-4"><button type="button" class="btn btn-primary">Save Courier Priority</button></div></div>';
            $('.list').html(html);
            $('.lsp-list').html('');

        });
        $(".bestRated").on("click", function(e) {
            html = '<div class="col-md-12"><div class="priority-txt mb-2"><p>View the best couriers based on ratings and overall performance.</p></div><div class="text-center mt-4"><button type="button" class="btn btn-primary">Save Courier Priority</button></div></div>';
            $('.list').html(html);
            $('.lsp-list').html('');
        });

        $("#custom").on("click", function(e) {

            html = '<div class="col-md-12"><div class="priority-txt mb-2"><p>Drag and drop the couriers to create a customized priority based on your shipping needs.</p></div></div>';
            $('.list').html(html);



            dataTable = '<div class="row" id="sortable">@foreach($lsps as $lsp)<div class="col-md-4 ui" data-id="{{$lsp->id}}"><div class="first-box" draggable="true"><div class="prior-img"><img src="{{$lsp->url}}" alt=""></div><h6 class="prior-head">{{$lsp->name}}</h6><p class="prior-txt">Min.Weight {{$lsp->min_weight}}kg</p><hr><div class="row"><div class="col-md-7"><p> Call Before Delivery: </p></div><div class="col-md-5"><span>Available</span></div><div class="col-md-7"><p> POD: </p></div><div class="col-md-5"><span>Instant</span></div><div class="col-md-7"><p>Delivery Boy Number: </p></div><div class="col-md-5"><span>Not Available</span></div><div class="col-md-7"><p> Tracking Services: </p></div><div class="col-md-5"><span>Real Time</span></div></div></div></div>@endforeach</div><div class="text-center mt-4"><button type="button" class="btn btn-primary">Save Courier Priority</button></div>';

            $('.lsp-list').html(dataTable);

            $("#sortable").sortable({

                update: function(e, ui) {
                            // gets the new and old index then removes the temporary attribute
                    var newIndex = ui.item.index();
                    var oldIndex = $(this).attr('data-previndex');
                    var element_id = ui.item.attr('id');
                    var id = ui.item.data('id');
                            // alert('id of Item moved = '+element_id+' old position = '+oldIndex+' new position = '+newIndex);
                    var data = {
                        '_token': "{{csrf_token()}}",
                        'priority' : +newIndex,
                        'id' : id
                    }
                    $.ajax({
                        url : "{{route('update/priority')}}",
                        type: 'POST',
                        data: data,
                        success:function(data) {
                            console.log(data); return false;

                        }
                    });
                    $(this).removeAttr('data-previndex');
                }
            });
            $("#sortable").disableSelection();
        });
    })

</script>
@endsection