@extends('layouts/pos_layout')
@section('title', '| Opening Balance List')
@section('content')
    @include('successMsg')
    <style>
        .text-align-center {
            text-align: center !important;
        }

        .text-align-right {
            text-align: right !important;
        }
    </style>

    <div class="row">
        <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-options">
                                <a href="{{ url('pos/addOpeningBalance/') }}" class="btn btn-info pull-right addViewBtn"><i
                                        class="glyphicon glyphicon-plus-sign addIcon"></i>Add Opening Balance</a>
                            </div>
                            <h1 align="center" style="font-family: Antiqua;letter-spacing: 2px">
                                <font color="white">BRANCH WISE OPENING BALANCE LIST</font>
                            </h1>
                        </div>
                        <div class="panel-body panelBodyView">
                            <div>
                                @php
                                    $searchElements = [['element' => 'branchIdWithoutHO'], ['element' => 'dateRange']];

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


                            <table class="table table-striped table-bordered table-condensed first-col-dark" id="datatable"
                                style="width:100%">
                                <thead>
                                    <tr>
                                        <th rowspan="2" width="2%" style="text-align: center !important;" class="sorting_1">SL#</th>
                                        <th rowspan="2" width="10%" style="text-align: center !important;">Opening Date</th>
                                        <th colspan="2" width="20%" style="text-align: center !important;">Branch</th>
                                        <th rowspan="2" width="10%" style="text-align: center !important;">Sale Amount</th>
                                        <th rowspan="2" width="10%" style="text-align: center !important;">Collection Amount</th>
                                        <th rowspan="2" width="10%" style="text-align: center !important;">Balance Amount</th>
                                        <th rowspan="2" width="5%" style="text-align: center !important;">Action</th>
                                    </tr>
                                    <tr>
                                        <th style="text-align: center !important;">Code</th>
                                        <th style="text-align: center !important;">Name</th>
                                    </tr>
                                </thead>
                                <tbody id="tableBodySection">

                                </tbody>

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

    <div id="myModal" class="modal fade" style="margin-top:3%">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="clear:both"></h4>
                </div>
                <div class="modal-body">
                    <div class="deleteContent" style="padding-bottom:20px;">
                        <h4>You are about to delete this item this procedure is irreversible !</h4>
                        <h4>Do you want to proceed ?</h4>
                        <span class="hidden id"></span>
                    </div>
                    <div class="modal-footer">
                        <p id="MSG" class="pull-left" style="color:red"></p>
                        <p id="MSGS" class="pull-left" style="color:green"></p>
                        {!! Form::button('<span id=""></span>', ['class' => 'btn actionBtn', 'id' => 'footer_action_button']) !!}
                        {!! Form::button('<span id=""></span>', [
                            'class' => 'btn actionBtn',
                            'data-dismiss' => 'modal',
                            'id' => 'footer_action_button2',
                        ]) !!}

                        {!! Form::button('<span id=""> Close</span>', [
                            'class' => 'btn btn-warning',
                            'data-dismiss' => 'modal',
                            'id' => 'footer_action_button_dismis',
                        ]) !!}

                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('dataTableScript')
    <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",
                    "data": function(d) {
                        var inputs = {};
                        $.each($('form').serializeArray(), function() {
                            inputs[this.name] = this.value;
                        });
                        d.filter = inputs;
                    }
                },

                "columns": [{
                        "data": "sl"
                    },
                    {
                        "data": "opening_date",
                        className: "text-align-center"
                    },
                    {
                        "data": "branchCode",
                        className: "text-align-center"
                    },
                    {
                        "data": "name",
                        className: "text-align-center"
                    },

                    {
                        "data": "total_sale_amount",
                        className: "text-align-right"
                    },

                    {
                        "data": "totalQuantity",
                        className: "text-align-right"
                    },
                    {
                        "data": "totalAmount",
                        className: "text-align-right"
                    },
                    {
                        "data": "id",
                        className: "text-align-center"
                    }
                ],

                "columnDefs": [{
                    "targets": -1,
                    "data": "id",
                    "render": function(data, type, row, meta) {
                        return '<a href="{{ url('pos/detailsOpeningBalance/') }}/' + row.branchIdEncoded +
                            '" class="btn btn-xs btn-info"><i class="fa fa-eye" aria-hidden="true"></i></a>';
                    }
                }]


            });

            $("#searchForm").submit(function(e) {
                e.preventDefault();
                dataTable.draw();
            });
        });
    </script>
@endsection