@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;
    }
</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>
                        <div class="panel-options">

                        </div>
                    </div>

                    <div class="panel-body panelBodyView">
                        @php
                        if($data['branchName']->name =='Head Office')
                        {
                        $searchElements = [
                        ['element' => 'report_level'],
                        ['element' => 'branchId'],
                        ['element' => 'dateRange']
                        ];
                        }
                        else{
                        $searchElements = [
                        ['element' => 'dateRange'],
                        ];
                        }


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

                        <table class="table table-striped table-bordered table-condensed first-col-dark" id="datatable" style="width:100%">
                            <thead>
                                <tr>
                                    <th width="5%" class="text-center  sorting_1">SL#</th>
                                    <th width="10" class="text-center  sorting_1">Transfer Date</th>
                                    <th width="10" class="">Transfer Bill No</th>
                                    <th width="10">Transfer Out</th>
                                    <th width="10">Transfer In</th>
                                    <th width="10" class="">Total Quantity</th>
                                    <th width="10" class="">Total Amount</th>
                                    <th width="10" class="">Status</th>
                                    <th width="10" class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody id="tableBodySection">

                            </tbody>

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

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

        var columnaray = [{
                "data": "sl"
            },
            {
                "data": "transferDate",
                className: "text-center"
            },
            {
                "data": "transferBillNo"
            },
            {
                "data": "fromBranch"
            },
            {
                "data": "toBranch",
                className: "text-align-right"
            },
            {
                "data": "totalQuantity",
                className: "text-align-right"
            },
            {
                "data": "totalAmount",
                className: "text-align-right"
            },
            {
                "data": "status",
                className: "text-align-right"
            },
            {
                "data": "id",
                className: "text-center"
            }
        ]


        var dataTable = $('#datatable').DataTable({
            "sDom": "ltipr", // For removeing default Search bar //
            "processing": true,
            "serverSide": true,
            "ordering": false,

            "ajax": {
                "url": "{{ Request::url() }}",
                "type": "POST",
                "data": function(d) {
                    var inputs = {};
                    $.each($('form').serializeArray(), function() {
                        inputs[this.name] = this.value;
                    });
                    d.filter = inputs;
                }
            },

            "columns": columnaray,

            "columnDefs": [{
                "targets": -1,
                "data": "id",
                "render": function(data, type, row, meta) {

                    var activedate = "{{ date('Y-m-d',strtotime($data['branch_active_date'])) }}";
                    var branch_id = "{{ $data['branch_id'] }}";
                    var html = '';

                    if (row.transferDateForCheck == activedate) {

                        html += '<a href="{{ Request::url() }}/approve/' + data +
                            '" class="btn btn-xs btn-info"><i class="fa fa-eye" aria-hidden="true"></i></a>';
                        if (row.transferDateForCheck <= activedate && row.delete_check == 0 && (row.toBranchId == branch_id || branch_id == 1)) {
                            //if (row.delete_check == 0) {
                            html += '<a href="javascript:;" data-id=' + data +
                                ' class="btn btn-xs btn-danger delete-action"><i class="fa fa-trash" aria-hidden="true"></i></a>';
                        }
                    } else {
                        html += '<a href="{{ Request::url() }}/approve/' + data +
                            '" class="btn btn-xs btn-info"><i class="fa fa-eye" aria-hidden="true"></i></a>';
                        if (row.transferDateForCheck <= activedate && row.delete_check == 0 && (row.toBranchId == branch_id || branch_id == 1)) {
                            //if (row.delete_check == 0) {
                            html += '<a href="javascript:;" data-id=' + data +
                                ' class="btn btn-xs btn-danger delete-action"><i class="fa fa-trash" aria-hidden="true"></i></a>';
                        }
                    }
                    return html;


                }
            }]


        });

        $("#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: _response.responseStatus,
                                    title: _response.responseTitle,
                                    text: _response.responseText,
                                    showConfirmButton: false,
                                    timer: 1500
                                })

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


                            } else {
                                Swal.fire({
                                    icon: _response.responseStatus,
                                    title: _response.responseTitle,
                                    text: _response.responseText,
                                    showConfirmButton: true
                                })
                            }


                            // setTimeout(function(){
                            //   window.location.reload(1);
                            // }, 1000);
                        }
                    });



                }
            })


        });

    });
</script>
@endsection