@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">Incentive<span> Management</span></h2>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a ><span>Incentives</span></a></li>
            <li><span>List</span></li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
                {{-- openSideBarToAddDistributor --}}
            <div class="header"> <a href="/IncentiveSettings" class="btn add_button "><i class="fa fa-plus"></i>
                    <span>New Incentive</span></a>
                <h2>Incentive <span> List</span> 
                </h2>
            </div>
            <div class="body">
                <table class="table table-hover dt-responsive nowrap" id="example" style="width:100%">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Duration Type</th>
                            <th>Start Month</th>
                            <th>End Month</th> 
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($incentives as $data)
                            <tr class="incentive-{{$data->id}}">
                                <td>{{$data->id}}</td>
                                <td>{{$data->duration_type == 1 ? 'Monthly' : 'Quarterly'}}</td>
                                <td>{{date('m-Y',strtotime($data->start_month))}}</td>
                                <td>{{date('m-Y',strtotime($data->end_month))}}</td>
                                <td>
                                    <a href="/IncentiveSettings/{{$data->id}}" class="btn btn-default btn-line">Edit</a> 
                                    <button type="button" id="{{$data->id}}" class="btn btn-default red-bg delete-incentive">Delete</button> 
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
    <script>
        $('.delete-incentive').click(function(){
            $('#deleteModal .confirm_delete').attr('id',$(this).attr('id')).attr('delete-for','all');
            $('#hidden_btn_to_open_modal').click();
        });
        $('.confirm_delete').click(function() {
            var id          =   $(this).attr('id');
            var delete_for  =   $(this).attr('delete-for');
            var thisRef     =   $(this);
            thisRef.attr('disabled', 'disabled');
            thisRef.text('Processing...');
            $('.cancel_delete_modal').attr('disabled', 'disabled');
            $.ajax({
                type: 'POST',
                url: '/delete-incentive-detail',
                data: {
                    _token      :   $('input[name="_token"]').val(),
                    id          :   id,
                    delete_for  :   delete_for
                },
                success: function(response) {
                    thisRef.removeAttr('disabled');
                    thisRef.text('Yes');
                    $('.cancel_delete_modal').removeAttr('disabled');
                    if (response.status == "success") {
                        $('#notifDiv').fadeIn();
                        $('#notifDiv').css('background', 'green');
                        $('#notifDiv').text('Deleted Successfully');
                        setTimeout(() => {
                            $('#notifDiv').fadeOut();
                        }, 3000);
                        $(`.incentive-${id}`).remove();
                        $('.cancel_delete_modal').click();
                    } else {
                        $('#notifDiv').fadeIn();
                        $('#notifDiv').css('background', 'red');
                        $('#notifDiv').text('Unable to delete at the moment!');
                        setTimeout(() => {
                            $('#notifDiv').fadeOut();
                        }, 3000);
                    }

                }
            });
        });
    </script>
@endpush