@extends('layouts.master')
@section('content')
    <div class="row mt-2 mb-3">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Loyalty Offer <span>Management</span></h2>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
            <ol class="breadcrumb">
                <li><a><span>Loyalty Offer</span></a></li>
                <li><span>Management</span></li>
            </ol>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="header">
                    <h2>{{$scheme->title}} <span> Retailers list</span>
                    </h2>
                </div>

                <div class="body">
                    <table class="table table-hover dt-responsive nowrap" id="retailers" style="width:100%">
                        <thead>
                        <tr>
                            <th>SN.</th>
                            <th>Shop Code</th>
                            <th>Retailer Name</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody id="retailerslist">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        var retailers       =   {};
        var segments        =   location.href;
        segments            =   $.trim(segments.replace('#', ''));
        segments            =   segments.split('/');
        function loadretailers(){
            $('#retailerslist').empty();
            $('#table1').DataTable().destroy();
            let i = 0
            retailers.forEach(x=>{
                i++;
                let action = '';
                if(x.status != '3'){
                    action = `<button  id="btn-${x.id}" data-id="${x.id}" status='${x.status}' class="btn btn-default ${ x.status == 2 ? 'btn-line':'red-bg'}  mb-0 removeretailerAssignment">${ x.status == 2 ? 'Activate': 'Disable'}</button>`;
                }
                $('#retailerslist').append(`<tr id="tr-id-${x.id}">
                                                        <td>${i}</td>
                                                        <td>${x.shop_code}</td>
                                                        <td>${x.retailer_name}</td>
                                                        <td id="status-${x.id}">${ x.status == 1 ? 'Active':(x.status == 2 ? 'Disabled':'Availed')}</td>
                                                        <td>${action}</td>
                                                    </tr>`);
            });
            $('#retailers').DataTable();
            $('#notifDiv').fadeOut();
        }
        $.ajax({
            url: `/LoyaltySchemeRetailerslist/${segments[4]}`,
            type: "get",
            contentType: false,
            cache: false,
            processData:false,
            beforeSend : function()
            {
                $('#retailerslist').empty();
                $('#notifDiv').fadeIn();
                $('#notifDiv').css('background', 'blue');
                $('#notifDiv').text('Loading retailers .... ');

            },
            success: function(data)
            {
                if(data.status == 'success'){
                    if(data.data){
                        retailers  = data.data;
                        loadretailers();
                    }
                }else{
                    $('#notifDiv').fadeIn();
                    $('#notifDiv').css('background', 'green');
                    $('#notifDiv').text(data.msg);
                    setTimeout(() => {
                        $('#notifDiv').fadeOut();
                    }, 3000);
                }
            },
            error: function(e)
            {
                $('#notifDiv').fadeIn();
                $('#notifDiv').css('background', 'red');
                $('#notifDiv').text('Some thing when wrong.');
                setTimeout(() => {
                    $('#notifDiv').fadeOut();
                }, 3000);
            }
        });


        $(document).on('click', '.removeretailerAssignment', function () {

            var id = $(this).attr('data-id');
            $('#deleteModal .modal-title').text('Warning');
            $('#deleteModal .modal-body p').text('Are you sure yo update retailer status!');
            $('#deleteModal').modal('show');
            $('.confirm_delete').attr('id', id);
            deleteRef = $(this);
        })

        $(document).on('click', '.confirm_delete', function () {

            var thisRef =   $(this);
            let id  =   thisRef.attr('id');
            let status  =   $(`#btn-${id}`).attr('status');
            thisRef.attr('disabled', 'disabled');
            thisRef.text('Processing...');
            $('.cancel_delete_modal').attr('disabled', 'disabled');
            $.ajax({
                url: `/LoyaltySchemeRemoveRetailerAssignment/${id}/${status}`,
                type: "get",
                contentType: false,
                cache: false,
                processData:false,
                beforeSend : function()
                {
                    $('#notifDiv').fadeIn();
                    $('#notifDiv').css('background', 'blue');
                    $('#notifDiv').text('Please wait, system is updating the retailer target data ... ');

                },
                success: function(data)
                {
                    $('#deleteModal').modal('hide');
                    thisRef.removeAttr('disabled');
                    thisRef.text('Yes');
                    if(data.status == 'success'){
                        if(data.status_code == 1){
                            $(`#btn-${id}`).attr('status',data.status_code);
                            $(`#status-${id}`).text('Active');


                            $(`#btn-${id}`).removeClass('btn-line');
                            $(`#btn-${id}`).addClass('red-bg');
                            $(`#btn-${id}`).text('Disable');

                        }else{
                            $(`#btn-${id}`).attr('status',data.status_code);
                            $(`#status-${id}`).text('Disabled');


                            $(`#btn-${id}`).addClass('btn-line');
                            $(`#btn-${id}`).removeClass('red-bg');
                            $(`#btn-${id}`).text('Activate');
                        }

                        //loadretailers();
                        $('#notifDiv').fadeIn();
                        $('#notifDiv').css('background', 'green');
                        $('#notifDiv').text(data.msg);
                        setTimeout(() => {
                            $('#notifDiv').fadeOut();
                        }, 3000);
                    }else{
                        $('#notifDiv').fadeIn();
                        $('#notifDiv').css('background', 'green');
                        $('#notifDiv').text(data.msg);
                        setTimeout(() => {
                            $('#notifDiv').fadeOut();
                        }, 3000);
                    }
                },
                error: function(e)
                {
                    $('#notifDiv').fadeIn();
                    $('#notifDiv').css('background', 'red');
                    $('#notifDiv').text('Some thing when wrong.');
                    setTimeout(() => {
                        $('#notifDiv').fadeOut();
                    }, 3000);
                }
            });
        });

    </script>
@endpush