@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="javascript:;" class="btn btn-info pull-right addViewBtn gotoInventory">
                                <i class="glyphicon glyphicon-plus-sign addIcon"></i>Goto Inventory Mode
                            </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" style="width:100%">
                            <thead>
                                <tr>
                                    <th  class="text-center  sorting_1 text-nowrap">SL#</th>
                                    <th  class="text-center text-nowrap">Audit Date</th>
                                    <th  class="text-center text-nowrap">Branch</th>
                                    <th  class="text-center text-nowrap">Bill No</th>
                                    <th  class="text-center text-nowrap">Adjustment Quantity</th>
                                    <th  class="text-center text-nowrap">Adjustment Amount</th>
                                    <th  class="text-center text-nowrap">Status</th>
                                    <th  class="text-center text-nowrap">Action</th>
                                </tr>
                                
                            </thead>
                            <tbody id="tableBodySection1">

                            </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": "inventoryDate",
                    className: "text-align-center text-nowrap"
                },{
                    "data": "branch_info",
                    className: " text-nowrap"
                },

                {
                    "data": "billNo",
                    className: " text-nowrap"
                },
                {
                    "data": "qty",
                    className: "text-align-center text-nowrap"
                },
                {
                    "data": "total_amount",
                    className: "text-align-right text-nowrap"
                },
                {
                    "data": "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 isheadoffice = "{{ $data['isHeadoffice'] }}";
                    var activedate = row.activeDate;
                    var htmlAction = '';
                    // && row.writeoff_date == activedate

                    if (row.inventory_Date == activedate && isheadoffice == 1) {
                        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>';
                    }


                    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,
                                })
                            }
                        }
                    });



                }
            })


        });


        /// Inventory mode

        $(document).on('click', '.gotoInventory', function() {
            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: 'btn btn-success',
                    cancelButton: 'btn btn-danger'
                },
                buttonsStyling: false
            })

            swalWithBootstrapButtons.fire({
                title: 'Are you really want to go to inventory mood?',
                html: "<p style='color:red;font-size: 12px;font-weight: bold;'> Please note that if inventory mood is on all access and transaction will be paused for this branch untill going back to inventory mood off.</p> ",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, Proceed!',
                cancelButtonText: 'No, cancel!',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = "{{ route('MoodOn_Inventory') }}";

                }
            })
        });

    });
</script>
@endsection