@extends('layouts/pos_layout')
@section('title', '| Opening Stock 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/addOpeningStock/')}}" class="btn btn-info pull-right addViewBtn"><i
                                        class="glyphicon glyphicon-plus-sign addIcon"></i>Add Opening Stock</a>
                            </div>
                            <h1 align="center" style="font-family: Antiqua;letter-spacing: 2px">
                                <font color="white">BRANCH WISE OPENING STOCK 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;">Total Quantity</th>
                                        <th rowspan="2" width="10%" style="text-align: center !important;">Total 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>

    @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",
                        className: "text-align-center"
                    },
                    {
                        "data": "openingDate",
                        className: "text-align-center"
                    },
                    {
                        "data": "branchCode",
                        className: "text-align-center"
                    },
                    {
                        "data": "name",
                        className: "text-align-center"
                    },

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

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

                        var html = '<a href="{{ url('pos/viewBranchOpeningStockDetails/') }}/' + row.branchIdEncoded +
                            '" class="btn btn-xs btn-info"><i class="fa fa-eye" aria-hidden="true"></i></a>';

                        if (row.isEditable == true) {
                            html +=
                                '<a href="{{ url('pos/editBranchOpeningStockDetails/') }}/' + row.branchIdEncoded +
                            '" class="btn btn-xs btn-info"><i class="fa fa-pencil" aria-hidden="true"></i></a>';

                            html +=
                                    '<a href="javascript:;" data-id=' + row.branchIdEncoded +
                                    ' 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',
                            url: './deleteOpeningStock',
                            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,
                                    })
                                }
                            }
                        });



                    }
                })


            });
        });
    </script>
@endsection