@extends('layouts/pos_layout')
@section('title', '| ' . $data['pageTitle'])
@section('content')
<style>
    .page-item.active .page-link {
        background-color: lightgrey !important;
        border: 1px solid black;
    }

    .page-link {
        color: black !important;
    }

    .subtotal {
        background-color: #9CB1D3 !important;
    }

    .grandtotal {
        background-color: #819BC4 !important;
    }

    .table.table-condensed>thead>tr>td,
    .table.table-condensed>tbody>tr>td,
    .table.table-condensed>tfoot>tr>td,
    .table.table-condensed>thead>tr>th,
    .table.table-condensed>tbody>tr>th,
    .table.table-condensed>tfoot>tr>th {
        padding: 5px 3px !important;
        font-size: 9px !important;
        border: 1px solid #eee !important;

    }

    .table.table-condensed>thead>tr>td,
    .table.table-condensed>tbody>tr>td,
    .table.table-condensed>tfoot>tr>td {
        padding: 5px 3px !important;
        font-size: 11px !important;
        border: 1px solid #eee !important;

    }

    .table thead tr th {
        font-size: 9px !important;
    }

    tr.footerrow {
        font-weight: bold;
    }

    p.text-center.reportHeading {
        font-size: 15px;
    }

    p.text-center.reportHeading {
        font-size: 13px;
    }

    .page-container .main-content {
        overflow: hidden;
    }

    .dataTables_wrapper {
        overflow-x: auto;
    }

    @media only screen and (max-width: 1380px) {
        #datatable {
            overflow-x: auto;
        }

        .select2-container {
            min-width: 100% !important;
            height: 33px;
            width: 13vw !important;
        }
    }

    @media (min-width: 768px) {
        .modal-dialog {
            width: 600px;
            margin: 30px auto;
            margin-top: 15%;
        }
    }
</style>
<div class="row page-wrap">
    <div class="col-md-12">
        <div class="" style="">
            <div class=" ">
                <div class="panel panel-default" style="background-color:#708090;">
                    <div class="panel-heading" style="padding-bottom:0px">
                        <div class="panel-title">
                            <h2>{!! $data['pageTitle'] !!}</h2>
                        </div>

                        @if($data['buttonVisiable'] == true)
                        <div class="panel-options">
                            <a href="{{ route('create_Rebateoff') }}" class="btn btn-info pull-right addViewBtn">
                                <i class="glyphicon glyphicon-plus-sign addIcon"></i>Add Rebateoff
                            </a>
                        </div>
                        @endif

                    </div>

                    <div class="panel-body panelBodyView">
                        @php
                        if($data['branchName']->name =='Head Office')
                        {
                        $searchElements = [
                        ['element' => 'branchId'],
                        ['element' => 'custom', 'name' => 'fillSaleBillNo','type' => 'text',
                        'label' => 'Sale Bill No'],
                        ['element' => 'dateRange'],

                        ];
                        }
                        else{
                        $searchElements = [
                        ['element' => 'dateRange'],
                        ['element' => 'custom', 'name' => 'fillSaleBillNo','type' => 'text',
                        'label' => 'Sale Bill No'],
                        ];
                        }


                        @endphp
                        @include('partials.searchPanel.main', ['searchElements' => $searchElements])

                        <table class="table table-striped table-bordered table-condensed first-col-dark" id="datatable">
                            <thead>
                                <tr>
                                    <th rowspan="2" width="5%" class="text-center  sorting_1 text-nowrap">SL#</th>
                                    <th rowspan="2" width="8" class="text-center text-nowrap">Rebateoff Date</th>
                                    <th colspan="2" width="10" class="text-center text-nowrap">Customer Information</th>
                                    <th rowspan="2" width="10" class="text-center text-nowrap">Branch</th>
                                    <th rowspan="2" width="8" class="text-center text-nowrap">Rebateoff Bill No</th>
                                    <th rowspan="2" width="8" class="text-center text-nowrap">Sales Bill No</th>
                                    <th rowspan="2" width="10" class="text-center text-nowrap">Sale Amount(TK)</th>
                                    <th rowspan="2" width="10" class="text-center text-nowrap">Paid Amount(TK)</th>
                                    <th rowspan="2" width="10" class="text-center text-nowrap">Rebateoff Amount(TK)</th>
                                    <th rowspan="2" width="10" class="text-center text-nowrap">Current Due Amount(TK)</th>
                                    <th rowspan="2" width="10" class="text-center text-nowrap">Approve Status</th>
                                    <th rowspan="2" width="9%" class="text-center text-nowrap">Action</th>
                                </tr>
                                <tr>
                                    <th width="4" class="text-center text-nowrap">ID</th>
                                    <th width="4" class="text-center text-nowrap">Customer Name</th>
                            </thead>
                            <tbody id="tableBodySection1">

                            </tbody>

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

<!-- edit sales by modal -->
<div class="modal fade" id="salesByModal" style="overflow:hidden;" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLongTitle">Sales By Id Update</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    @csrf
                    <div class="form-group">
                        <lavel><b>Date : </b><span id='date_val'></span></lavel>
                    </div>
                    <div class="form-group">
                        <lavel><b>Bill NO :</b> <span id='bill_val'></span></lavel>
                        <input type="hidden" id="sale_val">
                    </div>
                    <div class="form-group">
                        <lavel><b>Customer :</b> <span id='cusid_val'></span></lavel>
                    </div>
                    <div class="form-group">
                        <lavel><b>Total Amount :</b> <span id='total_val'></span></lavel>
                    </div>
                    <div class="form-group">
                        <lavel><b>Employee</b></lavel>
                        <select class="form-controll custom-select2" name="employeName" id="employee_name">
                            <option>Select an employee</option>
                            @foreach($data['employee'] as $value)
                            <option value="{{ $value->id}}">{{ $value->name}}</option>
                            @endforeach
                        </select>

                    </div>
                    <div class="form-group">
                        <input type="button" value="Submit" id="actionBtn" class="btn btn-primary" />
                    </div>
                </form>



            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {

        var dataTable = $('#datatable').DataTable({
            "sDom": "ltipr", // For removeing default Search bar //
            "processing": true,
            "serverSide": true,
            "ordering": false,
            "ajax": {
                "url": "{{ Request::url() }}",
                "type": "POST",
                "beforeSend": function() {
                $('#loadingModal').show();

                },
                "data": function(d) {

                    var inputs = {};
                    $.each($('form').serializeArray(), function() {
                        inputs[this.name] = this.value;
                    });
                    d.filter = inputs;
                }
            },
            "drawCallback": function(settings) {
                $('#loadingModal').hide();
            },

            "columns": [
                {
                    "data": "sl"
                },
                {
                    "data": "rebateoff_date",
                    className: "text-align-center text-nowrap"
                },
                {
                    "data": "customer_no",
                    className: "text-align-center text-nowrap"
                },
                {
                    "data": "customer_name",
                    className: "text-nowrap"
                },
                {
                    "data": "branch_info",
                    className: "text-nowrap"
                },
                {
                    "data": "rebateBillNo",
                    className: "text-nowrap"
                },
                {
                    "data": "sales_bill_no",
                    className: " text-nowrap"
                },
                {
                    "data": "sales_amount",
                    className: "text-align-right text-nowrap"
                },
                
                {
                    "data": "paid_amount",
                    className: "text-align-right text-nowrap"
                },
                {
                    "data": "rebateoff_amount",
                    className: "text-align-right text-nowrap"
                },
                {
                    "data": "current_due_amount",
                    className: "text-align-right text-nowrap"
                },
                {
                    "data": "final_status",
                    className: "text-align-center text-nowrap"
                },
                {
                    "data": "id",
                    className: "text-align-center text-nowrap"
                }
            ],

            "columnDefs": [{
                "targets": -1,
                "data": "id",
                "render": function(data, type, row, meta) {
                    var role = "{{ $data['roletype']}}";
                    var roleId = "{{ $data['roleId'] }}";
                    var activedate = row.activeDate;
                    var htmlAction = '';
                        // && row.writeoff_date == activedate
                    
                    
                    if (row.saleDeleteCheck == 0  ) {
                        var htmlAction = '<a href="javascript:;" data-id=' + data +
                                ' class="btn btn-xs btn-danger delete-action"><i class="fa fa-trash" aria-hidden="true"></i></a>';
                        if (row.isTransactionApproveStatus == 'true') {
                            htmlAction += '<a href="{{ Request::url() }}/approve/' + data +
                            '" class="btn btn-xs btn-info"><i class="fa fa-check" style="color:'+row.color+'" aria-hidden="true"></i></a>';
                        }
                    }
                    return htmlAction; 
                }
            }]
        });

        $("#searchForm").submit(function(e) {
            e.preventDefault();
            dataTable.draw();
        });



        //delete function
        $(document).on('click', '.delete-action', function() {

            Swal.fire({
                title: 'Are you sure?',
                text: "Once delete you won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#7e7979',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {

                    $.ajax({
                        type: 'post',
                        url: '{{ Request::url() }}/delete',
                        data: {
                            '_token': $('input[name=_token]').val(),
                            'id': $(this).data('id')
                        },
                        success: function(_response) {

                            if (_response.responseTitle == 'success') {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Deleted!',
                                    text: 'This data has been deleted.',
                                    showConfirmButton: false,
                                    timer: 1500
                                })

                                setTimeout(function() {
                                    dataTable.ajax.reload();
                                }, 1000);


                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Failed to delete!',
                                    text: 'This data has not been deleted.',
                                    showConfirmButton: true,
                                })
                            }
                        }
                    });



                }
            })


        });


        $(document).on('click', '#updatedSalesBy', function() {
            $('#bill_val').html('');
            $('#date_val').html('');
            $('#cusid_val').html('');
            $('#total_val').html('');
            $('#sale_val').html('');

            var sale_id = $(this).data('id');
            var date = $(this).data('date');
            var cusid = $(this).data('cusid');
            var cusname = $(this).data('cusname');
            var branch = $(this).data('branch');
            var type = $(this).data('type');
            var bill = $(this).data('bill');
            var totalamount = $(this).data('totalamount');
            $('#salesByModal').modal('show');
            $('#bill_val').html(bill);
            $('#date_val').html(date);
            $('#cusid_val').html(cusid + ' ' + cusname);
            $('#total_val').html(totalamount);
            $('#sale_val').val(sale_id);
        });

        $(document).on('click', '#actionBtn', function() {
            var sale_id = $('#sale_val').val();
            var emp_id = $('#employee_name').val();
            $.ajax({
                type: 'post',
                url: '{{ Request::url() }}/salesByUpdate',
                data: {
                    '_token': $('input[name=_token]').val(),
                    'id': sale_id,
                    'empid': emp_id,
                },
                success: function(_response) {

                    if (_response.responseTitle == 'success') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Updated!',
                            text: 'This data has been updated.',
                            showConfirmButton: false,
                            timer: 1500
                        })

                        setTimeout(function() {
                            dataTable.ajax.reload();
                        }, 1000);

                        $('#salesByModal').modal('hide');


                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Failed to update!',
                            text: 'This data has not been updated.',
                            showConfirmButton: true,
                        })
                    }
                }
            });
        });



    });
</script>
@endsection