@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
                        $viewStatus_options = ['' => 'Select any','0' => 'Pending','1' => 'Approved'];
                        if($data['branchName']->name =='Head Office')
                        {
                        $searchElements = [
                        ['element' => 'report_level'],
                        ['element' => 'branchId'],
                        ['element' => 'dateRange'],
                        ['element' => 'custom', 'name' => 'filStatus','type' => 'select',
                        'label' => 'Status','options' => $viewStatus_options],
                        ];
                        }
                        else{
                        $searchElements = [
                        ['element' => 'dateRange'],
                        ['element' => 'custom', 'name' => 'filStatus','type' => 'select',
                        'label' => 'Status','options' => $viewStatus_options],
                        ];
                        }


                        @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="">Category</th>
                                    <th width="10" class="">Total Quantity</th>
                                    <th width="10" class="">Product Cost</th>
                                    <th width="10" class="">Transportation Cost</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": "proCategory",
                className: "text-center"
            },
            {
                "data": "totalQuantity",
                className: "text-center"
            },
            {
                "data": "totalAmount",
                className: "text-align-right"
            },
            {
                "data": "delivery_cost",
                className: "text-align-right"
            },
            {
                "data": "admin_management_user_approved",
                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",
                "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": columnaray,

            "columnDefs": [{
                "targets": -1,
                "data": "id",
                "render": function(data, type, row, meta) {
                    var html = '';

                    var activedate = "{{ $data['branch_active_date'] }}";

                    //  console.log(row.transferDate,activedate,row.admin_management_user_approved_status_val);

                    if (row.isManagementUserApprove == true) {
                        if (row.isReceivedApproveByDate == true) {
                        // if (row.requisitionDate == activedate) {
                            html += '<a href="{{ Request::url() }}/approve/' + data +
                                '" class="btn btn-xs btn-info" title="Transfer Delivery Approve"><i class="fa fa-check" style="color:'+row.admin_management_user_color+'" aria-hidden="true"></i></a>';

                        } else {
                            html += '<a href="{{ Request::url() }}/approve/' + data +
                                '" class="btn btn-xs btn-info" title="Transfer Delivery Approve"><i class="fa fa-check" style="color:'+row.admin_management_user_color+'" aria-hidden="true"></i></a>';
                        }
                    }else{
                        html += '<a href="{{ Request::url() }}/view/' + data +
                                '" class="btn btn-xs btn-info" title="Transfer Delivery View"><i class="fa fa-eye" 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: '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,
                                })
                            }


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



                }
            })


        });

    });
</script>
@endsection