@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="{{ route('create_installment_sale') }}"
                                        class="btn btn-info pull-right addViewBtn">
                                        <i class="glyphicon glyphicon-plus-sign addIcon"></i>Add Installment Sale
                                    </a>
                                </div>

                                <div class="panel-options" style="padding-right: 10px">
                                    <a href="{{ route('create_cash_sale') }}" class="btn btn-info pull-right addViewBtn">
                                        <i class="glyphicon glyphicon-plus-sign addIcon"></i>Add Cash Sale
                                    </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">
                                <thead>
                                    <tr>
                                        <th rowspan="2" width="5%" class="text-center  sorting_1 text-nowrap">SL#
                                        </th>
                                        <th rowspan="2" width="8" class="text-center text-nowrap">Sales Date</th>
                                        <th colspan="2" width="10" class="text-center text-nowrap">Customer
                                            Information</th>
                                        <th rowspan="2" width="10" class="text-center text-nowrap">Branch</th>
                                        <th rowspan="2" width="8" class="text-center text-nowrap">Bill No</th>
                                        <th rowspan="2" width="10" class="text-center text-nowrap">Sales Type</th>
                                        <th colspan="@if ($data['company']->othersFeeApplicable == 'Yes') 4 @else 3 @endif" width="10" class="text-center text-nowrap">Sale Amount(TK)
                                        </th>
                                        <th rowspan="2" width="10" class="text-center text-nowrap">Sale By</th>
                                        <th rowspan="2" width="10" class="text-center text-nowrap">Entry By</th>
                                        <th rowspan="2" width="9%" class="text-center text-nowrap">Action</th>
                                    </tr>
                                    <tr>
                                        <th width="4" class="text-center text-nowrap">ID</th>
                                        <th width="4" class="text-center text-nowrap">Customer Name</th>
                                        <th width="10" class="text-center text-nowrap">Product Price</th>
                                        <th width="10" class="text-center text-nowrap">Processign Fee</th>
                                        @if ($data['company']->othersFeeApplicable == 'Yes')
                                            <th width="10" class="text-center text-nowrap">Others Fee</th>
                                        @endif
                                        <th width="10" class="text-center text-nowrap">Total</th>
                                    </tr>
                                </thead>
                                <tbody id="tableBodySection">

                                </tbody>

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

    <!-- edit sales by modal -->
    <div class="modal fade" id="salesByModal" style="overflow:hidden;" role="dialog"
        aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="exampleModalLongTitle">Sales By Id Update</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        @csrf
                        <div class="form-group">
                            <lavel><b>Date : </b><span id='date_val'></span></lavel>
                        </div>
                        <div class="form-group">
                            <lavel><b>Bill NO :</b> <span id='bill_val'></span></lavel>
                            <input type="hidden" id="sale_val">
                        </div>
                        <div class="form-group">
                            <lavel><b>Customer :</b> <span id='cusid_val'></span></lavel>
                        </div>
                        <div class="form-group">
                            <lavel><b>Total Amount :</b> <span id='total_val'></span></lavel>
                        </div>
                        <div class="form-group">
                            <lavel><b>Employee</b></lavel>
                            <select class="form-controll custom-select2" name="employeName" id="employee_name">
                                <option>Select an employee</option>
                                @foreach ($data['employee'] as $value)
                                    <option value="{{ $value->id }}">{{ $value->name }}</option>
                                @endforeach
                            </select>

                        </div>
                        <div class="form-group">
                            <input type="button" value="Submit" id="actionBtn" class="btn btn-primary" />
                        </div>
                    </form>



                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {

            var othersFeeApplicable = "{{ $data['company']->othersFeeApplicable }}";
            var prm = '';

            if (othersFeeApplicable == 'Yes') {
                prm = [{
                        "data": "sl"
                    },
                    {
                        "data": "sales_date",
                        className: "text-align-center text-nowrap"
                    },
                    {
                        "data": "customer_no",
                        className: "text-align-center text-nowrap"
                    },
                    {
                        "data": "customer_name",
                        className: "text-nowrap"
                    },
                    {
                        "data": "branch_info",
                        className: "text-nowrap"
                    },
                    {
                        "data": "sales_bill_no",
                        className: "text-nowrap"
                    },
                    {
                        "data": "sales_type",
                        className: "text-align-center text-nowrap"
                    },
                    {
                        "data": "gross_total",
                        className: "text-align-right text-nowrap"
                    },
                    {
                        "data": "processing_fee",
                        className: "text-align-right text-nowrap"
                    },
                    {
                        "data": "others_fee",
                        className: "text-align-right text-nowrap"
                    },
                    {
                        "data": "total_amount",
                        className: "text-align-right text-nowrap"
                    },
                    {
                        "data": "saleByName",
                        className: "text-nowrap"
                    },
                    {
                        "data": "entryByName",
                        className: "text-nowrap"
                    },
                    {
                        "data": "id",
                        className: "text-align-center text-nowrap"
                    }
                ]
            } else {
                prm = [{
                        "data": "sl"
                    },
                    {
                        "data": "sales_date",
                        className: "text-align-center text-nowrap"
                    },
                    {
                        "data": "customer_no",
                        className: "text-align-center text-nowrap"
                    },
                    {
                        "data": "customer_name",
                        className: "text-nowrap"
                    },
                    {
                        "data": "branch_info",
                        className: "text-nowrap"
                    },
                    {
                        "data": "sales_bill_no",
                        className: "text-nowrap"
                    },
                    {
                        "data": "sales_type",
                        className: "text-align-center text-nowrap"
                    },
                    {
                        "data": "gross_total",
                        className: "text-align-right text-nowrap"
                    },
                    {
                        "data": "processing_fee",
                        className: "text-align-right text-nowrap"
                    },
                    {
                        "data": "total_amount",
                        className: "text-align-right text-nowrap"
                    },
                    {
                        "data": "saleByName",
                        className: "text-nowrap"
                    },
                    {
                        "data": "entryByName",
                        className: "text-nowrap"
                    },
                    {
                        "data": "id",
                        className: "text-align-center text-nowrap"
                    }
                ]
            }

            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": prm,

                "columnDefs": [{
                    "targets": -1,
                    "data": "id",
                    "render": function(data, type, row, meta) {
                        var role = "{{ $data['roletype'] }}";
                        var roleId = "{{ $data['roleId'] }}";
                        var range = '2022-07-01';
                        var activedate = row.activeDate;
                        var html = '<a href="{{ Request::url() }}/view/' + data +
                            '" class="btn btn-xs btn-info"><i class="fa fa-envelope" aria-hidden="true"></i></a>';

                        if ((role == 'Branch User' || roleId == 1) && (row.compare_sales_date >=
                                range)) {
                            html +=
                                '<a href="javascript:;" class="btn btn-xs btn-info" id="updatedSalesBy" data-id=' +
                                data + ' data-date=' + row.sales_date + ' data-cusid=' + row
                                .customer_no + ' data-cusname=' + row.customer_name +
                                '   data-bill=' + row.sales_bill_no + ' data-totalamount=' + row
                                .total_amount +
                                '><i class="fa fa-refresh" aria-hidden="true"></i></a>';
                        }
                        if (row.sales_type == 'Cash') {
                            if (row.saleDeleteCheck == 0 && row.is_opening_balance == 0 && row
                                .sales_date == activedate) {
                                html += '<a href="{{ Request::url() }}/editCashSale/' + data +
                                    '" class="btn btn-xs btn-info"><i class="fa fa-edit" aria-hidden="true"></i></a>' +
                                    '<a href="javascript:;" data-id=' + data +
                                    ' class="btn btn-xs btn-danger delete-action"><i class="fa fa-trash" aria-hidden="true"></i></a>';
                            }
                        } else {
                            if (row.saleDeleteCheck == 0 && row.is_opening_balance == 0 && row
                                .sales_date == activedate) {
                                html += '<a href="{{ Request::url() }}/editInstallmentSale/' +
                                    data +
                                    '" class="btn btn-xs btn-info"><i class="fa fa-edit" aria-hidden="true"></i></a>' +
                                    '<a href="javascript:;" data-id=' + data +
                                    ' class="btn btn-xs btn-danger delete-action"><i class="fa fa-trash" aria-hidden="true"></i></a>';
                            }
                            html += '<a href="{{ Request::url() }}/shedule/' + data +
                                '" class="btn btn-xs btn-info"><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,
                                    })
                                }
                            }
                        });



                    }
                })


            });


            $(document).on('click', '#updatedSalesBy', function() {
                $('#bill_val').html('');
                $('#date_val').html('');
                $('#cusid_val').html('');
                $('#total_val').html('');
                $('#sale_val').html('');

                var sale_id = $(this).data('id');
                var date = $(this).data('date');
                var cusid = $(this).data('cusid');
                var cusname = $(this).data('cusname');
                var branch = $(this).data('branch');
                var type = $(this).data('type');
                var bill = $(this).data('bill');
                var totalamount = $(this).data('totalamount');
                $('#salesByModal').modal('show');
                $('#bill_val').html(bill);
                $('#date_val').html(date);
                $('#cusid_val').html(cusid + ' ' + cusname);
                $('#total_val').html(totalamount);
                $('#sale_val').val(sale_id);
            });

            $(document).on('click', '#actionBtn', function() {
                var sale_id = $('#sale_val').val();
                var emp_id = $('#employee_name').val();
                $.ajax({
                    type: 'post',
                    url: '{{ Request::url() }}/salesByUpdate',
                    data: {
                        '_token': $('input[name=_token]').val(),
                        'id': sale_id,
                        'empid': emp_id,
                    },
                    success: function(_response) {

                        if (_response.responseTitle == 'success') {
                            Swal.fire({
                                icon: 'success',
                                title: 'Updated!',
                                text: 'This data has been updated.',
                                showConfirmButton: false,
                                timer: 1500
                            })

                            setTimeout(function() {
                                dataTable.ajax.reload();
                            }, 1000);

                            $('#salesByModal').modal('hide');


                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Failed to update!',
                                text: 'This data has not been updated.',
                                showConfirmButton: true,
                            })
                        }
                    }
                });
            });



        });
    </script>
@endsection