@extends('modules.head') @section('contenido')
<div class="header">
    <h3>Tier Pricing Suggestions</h3>
</div>

@php
$completedItems = $tierPricingSuggestion->getTotalApprovedSuggestions() + $tierPricingSuggestion->getTotalRejectedSuggestions();
$totalItems = $tierPricingSuggestion->getTotalSuggestions();
$leftItems = $totalItems - $completedItems;
$progress = 0;
$progressLeft = 100;
if($completedItems){
$progress = round(($completedItems * 100) / $totalItems);
$progressLeft = 100 - $progress;
}
@endphp
<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" style="width:{{$progress}}%">
        {{ $completedItems }} Completed - {{$progress}}%
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar" style="width:{{$progressLeft}}%">
        {{ $leftItems }} Left - {{$progressLeft}}%
    </div>
</div>

<div class="box-body table-responsive">

    <ul class="nav nav-tabs">
        <li data-toggle="tab" class="active"><a href="#pending_suggestions">Pending</a></li>
        <li data-toggle="tab"><a href="#completed_suggestions">Completed</a></li>
    </ul>
    <div class="tab-content" id="tabs">
        <div class="tab-pane active" id="pending_suggestions">
            <table id="tier_pricing_suggestions_table" class="table table-bordered table-hover dataTables_wrapper">
                <div class="bulk-actions-container">
                    <select name="bulk-actions-select" id="bulk-actions-select" class="bulk-actions-select">
                        <option class="bulk-option" value="" style="display:none">Bulk</option>
                        <option class="approve-option" value="approve">Accept</option>
                        <option class="reject-option" value="reject">Deny</option>
                    </select>
                    <div id="apply-btn" onclick="onApply()">Apply</div>
                </div><br>
                <thead>
                    <tr>
                        <th>
                            <button id="selectAll">
                                Select All
                            </button>
                        </th>
                        <th>BPCode</th>
                        <th>Customer</th>
                        <th>Current Tier Pricing</th>
                        <th>Suggested Tier Pricing</th>
                        <!-- <th>Action</th> -->
                    </tr>
                </thead>
                <tbody>
                    @foreach($tierPricingSuggestion->tierPricingSuggestionLines->where('tier_pricing_suggestion_line_status_id', 1) as $tierPricingSuggestionLine)
                    @php
                    $css_class = '';
                    if( $tierPricingSuggestionLine->tierPricingSuggestionLineAction->name == 'upgrade') {
                    $css_class = 'success';
                    }
                    if ($tierPricingSuggestionLine->tierPricingSuggestionLineAction->name == 'downgrade') {
                    $css_class = 'danger';
                    }
                    @endphp
                    <tr>
                        <td><input type="checkbox" value="{{ $tierPricingSuggestionLine->id }}"></td>
                        <td>{{ $tierPricingSuggestionLine->user->document }}</td>
                        <td>
                            <a href="/clients/edit/{{$tierPricingSuggestionLine->user->id}}">{{ $tierPricingSuggestionLine->user->first_name }}</a>
                        </td>
                        <td>
                            @if($tierPricingSuggestionLine->currentTierPricing)
                            <span
                                class="badge"> {{ $tierPricingSuggestionLine->currentTierPricing->getName() }} </span>
                            @endif
                        </td>
                        <td>
                            @if($tierPricingSuggestionLine->suggestedTierPricing)
                            <span
                                class="badge badge-{{ $css_class }}"> {{ $tierPricingSuggestionLine->suggestedTierPricing->getName() }} </span>
                            @endif
                        </td>
                        <!-- <td>
                            <button type="button" class="btn btn-default" onclick="approveSuggestion(this)"
                                data-toggle="tooltip" title="Approve"
                                data-suggestion-line-id="{{ $tierPricingSuggestionLine->id }}">
                                <i class="fa fa-check"></i>
                            </button>
                            <button type="button" class="btn btn-default" onclick="rejectSuggestion(this)"
                                data-toggle="tooltip" title="Reject"
                                data-suggestion-line-id="{{ $tierPricingSuggestionLine->id }}">
                                <i class="fa fa-close"></i>
                            </button>
                        </td> -->
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="tab-pane" id="completed_suggestions">
            <table id="tier_pricing_suggestions_table_completed"
                class="table table-bordered table-hover dataTables_wrapper">
                <thead>
                    <tr>
                        <th>BPCode</th>
                        <th>Customer</th>
                        <th>Current Tier Pricing</th>
                        <th>Suggested Tier Pricing</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($tierPricingSuggestion->tierPricingSuggestionLines->where('tier_pricing_suggestion_line_status_id', '!=', 1) as $tierPricingSuggestionLine)
                    @php
                    $css_class = '';
                    if( $tierPricingSuggestionLine->tierPricingSuggestionLineAction->name == 'upgrade') {
                    $css_class = 'success';
                    }
                    if ($tierPricingSuggestionLine->tierPricingSuggestionLineAction->name == 'downgrade') {
                    $css_class = 'danger';
                    }
                    @endphp
                    <tr>
                        <td>{{ $tierPricingSuggestionLine->user->document }}</td>
                        <td>
                            <a href="/clients/edit/{{$tierPricingSuggestionLine->user->id}}">{{ $tierPricingSuggestionLine->user->first_name }}</a>
                        </td>
                        <td>
                            @if($tierPricingSuggestionLine->currentTierPricing)
                            <span
                                class="badge"> {{ $tierPricingSuggestionLine->currentTierPricing->getName() }} </span>
                            @endif
                        </td>
                        <td>
                            @if($tierPricingSuggestionLine->suggestedTierPricing)
                            <span
                                class="badge badge-{{ $css_class }}"> {{ $tierPricingSuggestionLine->suggestedTierPricing->getName() }} </span>
                            @endif
                        </td>
                        <td>
                            <button class="btn btn-default" disabled>
                                {{ $tierPricingSuggestionLine->tierPricingSuggestionLineStatus->name }}
                                @if($tierPricingSuggestionLine->tierPricingSuggestionLineStatus->name == 'approved')
                                <i class="fa fa-check"></i>
                                @else
                                <i class="fa fa-close"></i>
                                @endif
                            </button>

                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

</div>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/ajax.js') }}"></script>
<script>
    $(function() {
        // Select all rows functionality
        const pendingSuggestionsTable = $('#tier_pricing_suggestions_table').dataTable({
            stateSave: true
        });
        const allPagesCheckboxes = pendingSuggestionsTable.fnGetNodes();
        $('#selectAll').click(function() {
            const thisText = $(this).text();
            if (thisText === "Unselect All") {
                $('input[type="checkbox"]', allPagesCheckboxes)
                    .prop('checked', false);
                $(this).text('Select All');
            } else {
                $('input[type="checkbox"]', allPagesCheckboxes)
                    .prop('checked', true);
                $(this).text('Unselect All');
            }

        });

        $('#tier_pricing_suggestions_table_completed').DataTable();

        $('.nav-tabs > li').click(function() {
            console.log(this)
            $('.tab-pane').removeClass('active');
            $('.nav-tabs > li').removeClass('active');
            $(this).addClass('active');
            $($(this).find('a').attr('href')).addClass('active');
        });

    })

    // function takeAction(el, action) {
    //     const element = $(el);
    //     const data = {
    //         tier_pricing_suggestion_line_id: element.attr('data-suggestion-line-id'),
    //         action: action
    //     }
    //     console.log(data);
    //     swal({
    //         text: "Are you sure you want to perform this action?",
    //         icon: "info",
    //         buttons: ["Cancel", "Ok"],
    //     }).then((value) => {
    //         if (value) {
    //             element.button('loading');
    //             postRequest(
    //                 '{{ route('tier_pricing_suggestions.action') }}',
    //                 data,
    //                 (response) => {
    //                     if (response.result) {
    //                         window.location.reload();
    //                     }
    //                 },
    //                 (response) => {
    //                     element.button('reset');
    //                 }
    //             );
    //         }
    //     });
    // }

    // function approveSuggestion(el) {
    //     takeAction(el, 'approve');
    // }

    // function rejectSuggestion(el) {
    //     takeAction(el, 'reject');
    // }

    // Bulk functionality
    function getAllCheckboxesChecked() {
        return $("#tier_pricing_suggestions_table").find("input[type=checkbox]:checked").map(function() {
            return $(this).val();
        }).get();
    }

    function onApply(){
        let selectedAction = $("#bulk-actions-select").val();
        if (selectedAction == "") {
           swal("", "At least one action must be selected.", "info");
           return false;
        }

        let selectedLines = getAllCheckboxesChecked();
        if (!selectedLines.length) {
            swal("", "At least one line must be selected.", "info");
            return false;
        }

        let payload = [];
        for (let i = 0; i < selectedLines.length; i++) {
            let data = {};
            data.tier_pricing_suggestion_line_id = selectedLines[i];
            data.action = selectedAction;
            payload.push(data);
        }

        swal({
            text: "Are you sure you want to perform this action?",
            icon: "info",
            buttons: ["Cancel", "Ok"],
        }).then((value) => {
            if (value) {
                $.ajax({
                    url: "/tier_pricing_suggestions/take/action-in-bulk",
                    type: "POST",
                    contentType: "application/json",
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                        "Content-Type": "application/json",
                    },
                    data: JSON.stringify(payload),
                    success: function(r) {
                        if (r.status) {
                            swal("", r.message, "success").then(function(ok) {
                                if (ok) {
                                    location.reload();
                                }
                            })
                        } else {
                            swal("", r.message, "warning").then(function(ok) {
                                if (ok) {
                                    location.reload();
                                }
                            })
                        }
                    },
                    error: function(e) {
                        console.log(e)
                    },
                })
            }
        });
       
    
    }

    $('#bulk-actions-select').change(function(){
        if ($(this).val() == "approve") {
            $(this).css('color', '#3D9641');
        }
        else if ($(this).val() == "reject") {
            $(this).css('color', '#EC1F25');
        }
        else{
            $(this).css('color', '#5E5F60');
        }
    });
</script>
<style>
    .badge-success {
        background-color: #3c763d;
    }

    .badge-danger {
        background-color: #a94442;
    }

    .nav-tabs {
        margin-bottom: 16px;
    }

    .header {
        margin-bottom: 8px;
    }

    /* Bulk action styles */
    .bulk-actions-container {
        display: flex;
        justify-content: flex-start;
    }

    .bulk-actions-container > * {
        cursor:pointer;
    }

    .bulk-actions-select{
        background-color: #F4F4F4;
        border: 1px solid #C2C2C2;
        padding: 8px 20px;
    }

    .bulk-actions-select:hover{
        background-color: #E6E6E6;
        border: 1px solid #5E5F60;
        color: #5E5F60
    }

    .bulk-actions-select:focus{
        outline: none;
    }

    .bulk-option, .bulk-option:hover{
       color: #5E5F60;
    }

    .approve-option, .approve-option:hover{
       color: #3D9641;
    }
    
    .reject-option, .reject-option:hover{
       color: #EC1F25;
    }
    
    .bulk-actions-container>div:nth-child(2) {
        border: 1px solid #3D9641;
        margin-left: 5px;
        color: #3D9641;
        border-radius:24px;
        padding: 8px 20px;
    }

    .bulk-actions-container>div:nth-child(2):hover {
        border: 1px solid #C2C2C2;
        color: #444444;
    }

    #selectAll{
        background-color: #F4F4F4;
        border: 1px solid #C2C2C2;
        color: #444444;
        border-radius:24px;
        padding: 8px 20px;
    }

    #selectAll:hover{
        background-color: #E6E6E6;
    }
</style>

@endsection