@extends('layouts/inventory_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">
                                <a href="{{ route($data['module'] . '_create') }}" class="btn btn-info pull-right addViewBtn">
                                    <i class="glyphicon glyphicon-plus-sign addIcon"></i>{{ $data['addBtnLabel'] }}
                                </a>
                            </div>
                        </div>

                        <div class="panel-body panelBodyView">
                            @php
                                $viewStatus_options = ['' => 'Select any', 'pending' => 'Pending', 'processing' => 'Processing', 'approved' => 'Approved', 'returned' => 'Returned', 'rejected' => 'Rejected'];
                                if ($data['branchName']->name == 'Head Office') {
                                    $searchElements = [['element' => 'report_level','col' => 2], ['element' => 'branchId'], ['element' => 'dateRange'], ['element' => 'inv_group_id'], ['element' => 'inv_category_id'], ['element' => 'inv_sub_category_id'], ['element' => 'inv_model_id'], ['element' => 'custom', 'name' => 'filStatus', 'type' => 'select', 'label' => 'Status', 'options' => $viewStatus_options]];
                                } else {
                                    $searchElements = [['element' => 'dateRange'], ['element' => 'inv_group_id'], ['element' => 'inv_category_id'], ['element' => 'inv_sub_category_id'], ['element' => 'inv_model_id'], ['element' => 'custom', 'name' => 'viewStatus', '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%" rowspan="2" class="text-center  sorting_1 text-nowrap">SL#
                                        </th>
                                        <th width="10" rowspan="2" class="text-center  sorting_1 text-nowrap">
                                            Use Date</th>
                                        <th width="10" rowspan="2" class="text-center text-nowrap">Use No
                                        </th>
                                        <th width="10" rowspan="2" class="text-center text-nowrap">Branch Name
                                        </th>
                                        <th width="10" colspan="3" class="text-center text-nowrap">Use Information</th>
                                        <th width="10" rowspan="2" class="text-center text-nowrap">Qty</th>
                                        <th width="10" rowspan="2" class="text-center text-nowrap">Entry By</th>
                                        <th width="10" rowspan="2" class="text-center text-nowrap">Approved Status</th>
                                        <th width="10" rowspan="2" class="text-center text-nowrap">Action</th>
                                    </tr>
                                    <tr>
                                        <th style="width: 44px;" class="text-nowrap">Employee</th>
                                        <th style="width: 44px;" class="text-nowrap">Department</th>
                                        <th style="width: 44px;" class="text-nowrap">Room</th>
                                    </tr>
                                </thead>
                                <tbody id="tableBodySection">

                                </tbody>

                            </table>
                        </div>
                    </div>
                </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": "use_date",
                        className: "text-center"
                    },
                    {
                        "data": "use_no",
                        className: "text-align-center"
                    },
                    {
                        "data": "branch_name",
                        className: "text-align-center"
                    },
                    {
                        "data": "employee_name",
                        className: "text-align-center"
                    },
                    {
                        "data": "department_name",
                        className: "text-align-center"
                    },
                    {
                        "data": "room_name",
                        className: "text-align-center"
                    },
                    {
                        "data": "total_quantity",
                        className: "text-align-center"
                    },

                    {
                        "data": "created_by",
                        className: "text-align-center"
                    },

                    {
                        "data": "status",
                        className: "text-align-center"
                    },
                    {
                        "data": "id",
                        className: "text-align-center text-nowrap"
                    }
                ],

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

                        var activedate =
                            "{{ date('Y-m-d', strtotime($data['branch_active_date'])) }}";
                        var branchid = "{{ $data['branchName']->id }}";
                        var brachanme = "{{ $data['branchName']->name }}";
                        var today = "{{ date('d-m-Y') }}";

                        var html = '<a href="{{ Request::url() }}/view/' + data +
                            '" class="btn btn-xs btn-info"><i class="fa fa-eye" aria-hidden="true"></i></a>\
                                ';
                        if(row.isTransactionApproveStatus == 'true'){
                            if (row.isAllowForward == true) {
                                html += '<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>';
                            }
                        }
                        if(row.use_status == 'pending'){
                            html += '<a href="{{ Request::url() }}/edit/' + data +
                                '" class="btn btn-xs btn-info"><i class="fa fa-edit" aria-hidden="true"></i></a>';
                            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.responseStatus == '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: 'error',
                                        title: 'Failed to delete!',
                                        text: 'This data has not been deleted.',
                                        showConfirmButton: true,
                                    })
                                }


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



                    }
                })


            });

        });
    </script>
@endsection