@extends('layouts.admin')

@push('styles')
<link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">

<link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">

<link rel="stylesheet" href="{{ asset('plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">

<style type="text/css">
    .btn_mt {
        margin-top: 31px;
    }
</style>
@endpush


@section('content')
<!-- Main content -->
<section class="content">
    <div class="container-fluid pt-2">

        <div class="col-md-12">
            <!-- general form elements -->
            <div class="card card-info">

                <!-- form start -->
                <form method="GET" action="{{ route('saleres.salelist') }}">
                    <div class="card-body">
                        <div class="row">

                            <div class="col-md-2 col-sm-4">
                                <div class="form-group">
                                    <label for="formdate">From Date</label>
                                    <div class="input-group date" id="formdate" data-target-input="nearest">
                                        <input type="text" class="form-control form-control-sm datetimepicker-input"
                                            data-target="#formdate" name="formdate" id="formdate" value="{{ $formdate }}"
                                            placeholder="Enter From Date" required />
                                        <div class="input-group-append" data-target="#formdate"
                                            data-toggle="datetimepicker">
                                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="col-md-2 col-sm-4">
                                <div class="form-group">
                                    <label for="todate">To Date</label>
                                    <div class="input-group date" id="todate" data-target-input="nearest">
                                        <input type="text" class="form-control form-control-sm datetimepicker-input"
                                            data-target="#todate" name="todate" id="todate" value="{{ $todate }}"
                                            placeholder="Enter To Date" required />
                                        <div class="input-group-append" data-target="#todate"
                                            data-toggle="datetimepicker">
                                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                        </div>
                                    </div>

                                </div>
                            </div>


                            <div class="col-md-2 col-sm-4">
                                <div class="form-group">
                                    <label for="outlet_id">Outlet</label>
                                    <select id="outlet_id" name="outlet_id" class="form-control form-control-sm"
                                        style="width: 100%;">
                                        <option value="">Select Outlet</option>
                                        @foreach ($outlets as $v)
                                        <option value="{{ $v->id }}" {{ $v->id == $outlet_id ? 'selected' : '' }}>
                                            {{ $v->id }} - {{ $v->outlet_name }}
                                        </option>
                                        @endforeach

                                    </select>

                                </div>
                            </div>


                            <div class="col-md-2 col-sm-4">
                                <div class="form-group">
                                    <label for="product_id">Invoice No</label>

                                    <input type="text" class="form-control form-control-sm" name="invoiceno"
                                        id="invoiceno" value="" placeholder="Enter Invoiceno" />
                                </div>
                            </div>

                            <div class="col-md-2 col-sm-4">
                                <div class="form-group">
                                    <label for="cash_status">Cash Status</label>
                                    <select id="cash_status" name="cash_status"
                                        class="form-control form-control-sm" style="width: 100%;">
                                        <option value="2" selected>Paid</option>
                                        <option value="1">Pending</option>
                                        <option value="3">Void</option>
                                        <option value="4">Cancel</option>
                                    </select>

                                </div>
                            </div>

                            <div class="col-md-2 col-sm-4">
                                <div class="form-group">
                                    <label for="trans_type"> Sale Type </label>
                                    <select id="trans_type" name="trans_type" value="{{ $trans_type }}"
                                        class="form-control form-control-sm" style="width: 100%;">
                                        <option value="1" selected>Normal</option>
                                        <option value="2">Complementary</option>
                                    </select>

                                </div>
                            </div>

                            <div class="col-md-2 col-sm-4">
                                <div class="form-group">
                                    <label for="client_id">Corporate Client</label>
                                    <select id="client_id" name="client_id" class="form-control form-control-sm select2"
                                        style="width: 100%;">
                                        <option value="">Select Outlet</option>
                                        @foreach ($corporateClients as $v)
                                            <option value="{{ $v->id }}"
                                                {{ $v->id == $client_id ? 'selected' : '' }}>
                                                {{ $v->company_name }}</option>
                                        @endforeach

                                    </select>
                                </div>
                            </div>

                            <div class="col-md-2 col-sm-4">
                                <div class="form-group">
                                    <label for="customer_id">Customer</label>
                                    <select id="customer_id" name="customer_id" class="form-control form-control-sm select2"
                                        style="width: 100%;">
                                        <option value="">Select Customer</option>
                                        @foreach ($customers as $v)

                                            @if(isset($v->mobile_no) && strlen($v->mobile_no) == 11)

                                            <option value="{{ $v->id }}" {{ $v->id == $customer_id ? 'selected' : '' }}>
                                                {{ $v->customer_name }} ({{ $v->mobile_no }})
                                            </option>

                                            @endif

                                        @endforeach

                                    </select>
                                </div>
                            </div>


                            <div class="col-md-2 col-sm-4">
                                <button type="submit" style="margin-top: 30px;"
                                    class="btn btn-primary btn-sm btn_mt">Search</button>
                                <a href="{{ route('saleres.salelist') }}" style="margin-top: 30px;"
                                    class="btn btn-secondary btn-sm btn_mt">Refresh</a>
                            </div>

                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- /.card -->

        <div class="row">
            <!-- left column -->
            <div class="col-md-12">

                <div class="card card-info">
                    <div class="card-header">
                        <h3 class="card-title">Sale List</h3>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <table id="example1" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>SL</th>
                                    <th>Date</th>
                                    <th>Invoice No.</th>
                                    <th>Inv. Amt.</th>
                                    <th>Total Dis.</th>
                                    <th>Total SD</th>
                                    <th>Total Vat</th>
                                    <th class="d-none">Cash Status</th>
                                    <th>Pmode</th>
                                    <th>Mobile No</th>
                                    <th>Cor. Client</th>
                                    <th>Note</th>
                                    <th style="width:90px">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php

                                $sl = 1;
                                $cashStatus = '';
                                $totalAmt = 0;
                                $totalVat = 0;
                                $totalSD = 0;
                                $totalDis = 0;
                                $totalScharge = 0;
                                @endphp

                                @foreach ($saleData as $k => $v)
                                @php
                                $sale_date = date('d-m-Y', strtotime($v->sale_date));

                                $totalAmt = $totalAmt + $v->inv_amt;
                                $totalDis = $totalDis + $v->total_dis_amt;
                                $totalSD = $totalSD + $v->total_sd;
                                $totalVat = $totalVat + $v->total_vat;
                                $totalScharge = $totalScharge + $v->total_scharge;


                                @endphp
                                @if ($v->cash_status == '1')
                                @php
                                $cashStatus = 'Pending';
                                @endphp
                                @elseif($v->cash_status == '2')
                                @php
                                $cashStatus = 'Paid';
                                @endphp
                                @elseif($v->cash_status == '3')
                                @php
                                $cashStatus = 'Void';
                                @endphp
                                @else
                                @php
                                $cashStatus = 'Cancle';

                                @endphp
                                @endif
                                @php
                                $receiveMethodsList = '';
                                if ($v->payment_method == 'Due') {

                                $receivePaymentInfoquery = Helper::receivedPayAmt([
                                'due_receive.sale_id' => $v->id
                                ]);

                                if(count($receivePaymentInfoquery) > 0){

                                }else{
                                $receivePaymentInfoquery = [];
                                }

                                }else{
                                $receivePaymentInfoquery = [];
                                }

                                if(count($receivePaymentInfoquery) > 0){
                                $receiveMethods = [];
                                foreach($receivePaymentInfoquery as $v2){
                                $receiveMethods[] = $v2->pmode_name;

                                }

                                $receiveMethodsList = implode('/', $receiveMethods);


                                }


                                @endphp


                                <tr>
                                    <td>{{ $sl++ }}</td>
                                    <td>{{ $sale_date }}</td>
                                    <td>{{ $v->invoiceno }}</td>
                                    <td>{{ $v->inv_amt }}</td>
                                    <td>{{ $v->total_dis_amt }}</td>
                                    <td>{{ $v->total_sd }}</td>
                                    <td>{{ $v->total_vat }}</td>
                                    <td class="d-none">{{ $cashStatus }}</td>
                                    <td>{{ $v->payment_method }}

                                        @if($receiveMethodsList)

                                        ( Received: {{$receiveMethodsList}})

                                        @endif

                                    </td>
                                    <td>{{ $v->mobile_no }}</td>
                                    <td>{{ $v->company_name }}</td>
                                    <td title="{{ $v->note }}" style="max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                        {{ $v->note }}
                                    </td>
                                    <td>
                                        <button type="button" data-id="{{ $v->id }}" data-toggle="modal"
                                            data-target="#modal-lg"
                                            class="btn btn-primary btn-xs view_inv">View</button>

                                        <button type="button" data-id="{{ $v->id }}"
                                            class="btn btn-success btn-xs inv_print">Print</button>

                                        @can('update_payment')
                                        @if (empty($v->payment_date) && $v->payment_method !== 'Due')
                                        <button type="button"
                                            data-id="{{ $v->id }}"
                                            class="btn btn-secondary btn-xs inv_update_pay">
                                            Pay mode
                                        </button>
                                        @endif
                                        @if (empty($v->payment_date) && $v->payment_method === 'Due')
                                        {{-- <button type="button"
                                            data-id="{{ $v->id }}"
                                            class="btn btn-warning btn-xs inv_update">
                                            Due Payment
                                        </button> --}}
                                        @endif
                                        @endcan


                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <th></th>
                                <th></th>
                                <th>TOTAL</th>
                                <th>{{ $totalAmt }}</th>
                                <th>{{ $totalDis }}</th>
                                <th>{{ $totalSD }}</th>
                                <th>{{ $totalVat }}</th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tfoot>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!--/.col (left) -->
            <!-- right column -->
            <div class="col-md-6">

            </div>
            <!--/.col (right) -->
        </div>
        <!-- /.row -->
    </div><!-- /.container-fluid -->
</section>
<!-- /.content -->


<!-- /.modal -->

<div class="modal fade" id="modal-lg">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Invoice Details</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="inv_details">

            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>


<!-- Due Payment Update Modal -->
<div class="modal fade" id="duePaymentModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="" id="duePaymentForm">
                @csrf
                <input type="hidden" name="sale_id" id="due_sale_id">
                <div class="modal-header">
                    <h5 class="modal-title">Receive Due Payment</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div id="inv_update_body" class="modal-body">

                    <div class="row">
                        <div class="col-sm-12">
                            <table class="table table-sm table-borderless">
                                <tbody>
                                    <tr>
                                        <th style="width:150px;"> <b>Invoice No:</b></th>
                                        <td style="text-align: right;"> <span id="inv_no"></span></td>
                                    </tr>
                                    <tr>
                                        <th style="width:150px;"> <b>Amount:</b></th>
                                        <td style="text-align: right;"><span id="inv_amt"> </span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-12">
                            <table class="table table-sm table-striped">
                                <tbody id="pmethods">


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


                    <div class="form-group">
                        <label>Payment Date</label>
                        <div class="input-group date" id="payment_date" data-target-input="nearest">
                            <input type="text"
                                name="payment_date"
                                class="form-control form-control-sm datetimepicker-input"
                                data-target="#payment_date"
                                placeholder="Select Payment Date"
                                required>
                            <div class="input-group-append" data-target="#payment_date" data-toggle="datetimepicker">
                                <div class="input-group-text">
                                    <i class="fa fa-calendar"></i>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="form-group">
                        <label>Note</label>
                        <textarea name="note" class="form-control form-control-sm"></textarea>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-sm">Save Payment</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="paymodemodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="" id="paymodemodalForm">
                @csrf
                <input type="hidden" name="sale_id" id="due_sale_id_2">
                <div class="modal-header">
                    <h5 class="modal-title">Update Payment Mode</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div id="inv_update_body" class="modal-body">

                    <div class="row">
                        <div class="col-sm-12">
                            <table class="table table-sm table-borderless">
                                <tbody>
                                    <tr>
                                        <th style="width:150px;"> <b>Invoice No:</b></th>
                                        <td style="text-align: right;"> <span id="inv_no_2"></span></td>
                                    </tr>
                                    <tr>
                                        <th style="width:150px;"> <b>Amount:</b></th>
                                        <td style="text-align: right;"><span id="inv_amt_2"> </span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-12">
                            <table class="table table-sm table-striped">
                                <tbody id="pmethods_2">


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


                    <!-- <div class="form-group">
                        <label>Payment Date</label>
                        <div class="input-group date" id="payment_date" data-target-input="nearest">
                            <input type="text"
                                name="payment_date"
                                class="form-control form-control-sm datetimepicker-input"
                                data-target="#payment_date"
                                placeholder="Select Payment Date"
                                required>
                            <div class="input-group-append" data-target="#payment_date" data-toggle="datetimepicker">
                                <div class="input-group-text">
                                    <i class="fa fa-calendar"></i>
                                </div>
                            </div>
                        </div>
                    </div> -->


                    <div class="form-group">
                        <label>Note</label>
                        <textarea name="note" class="form-control form-control-sm"></textarea>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-sm">Save Payment</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>

<script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/jszip/jszip.min.js') }}"></script>
<script src="{{ asset('plugins/pdfmake/pdfmake.min.js') }}"></script>
<script src="{{ asset('plugins/pdfmake/vfs_fonts.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>

<script src="{{ asset('plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>


<script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>

@if (Auth::user()->hasRole('sale_user'))

<script>
    $('#formdate').datetimepicker({
        format: 'DD-MM-YYYY',

        minDate: moment().startOf('month')
    });

    $('#todate').datetimepicker({
        format: 'DD-MM-YYYY',
        minDate: moment().startOf('month')
    });
</script>
@else
<script>
    $('#formdate').datetimepicker({
        format: 'DD-MM-YYYY',


    });

    $('#todate').datetimepicker({
        format: 'DD-MM-YYYY',
    });
</script>

@endif

<script>
    function printSlip(sale_id, type) {


        $("#inv_details").html('');


        var url = "{{ route('salerestbl.printslip',':id') }}";
        url = url.replace(':id', sale_id);

        var jqxhr = $.get(url, function(data) {
                if (!data) {
                    alert('No Sale found!');
                }
            })
            .done(function(data) {



                if (type == '1') {

                    $("#inv_details").html(data.slip);



                } else {

                    var mywindow = window.open('', 'Invoice Print', 'height=400,width=600');
                    mywindow.document.write('<html><head><title></title>');
                    mywindow.document.write(
                        '<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">'
                    );
                    mywindow.document.write('</head><body >');
                    mywindow.document.write(data.slip);
                    mywindow.document.write('</body></html>');
                    mywindow.document.close();
                    mywindow.focus();

                    setTimeout(function() {
                        mywindow.print();
                    }, 1000);

                    setTimeout(function() {
                        mywindow.close();
                    }, 1000);

                }

            })
            .fail(function() {

            })
            .always(function() {

            });

        jqxhr.always(function() {

        });

    }

    function voidInvoice(sale_id, type) {

        if (confirm('Are you sure you want to void this sale?')) {

            var url = "{{ route('saleres.voidinvoice', ':id') }}";
            url = url.replace(':id', sale_id);

            var jqxhr = $.get(url, function(data) {

                })
                .done(function(data) {
                    if (data) {
                        location.reload();
                    }
                });
        }
    }





    $(function() {

        $(".inv_void").click(function() {
            var sale_id = $(this).data("id");

            var type = '2';

            voidInvoice(sale_id, type);
        });


        $(".inv_update").click(function() {

            $("#pmethods").html('');

            let sale_id = $(this).data("id");
            $("#due_sale_id").val(sale_id);
            $("#duePaymentModal").modal("show");

            var url = "{{ route('saleres.mupdate',':id') }}";
            url = url.replace(':id', sale_id);

            $.get(url)
                .done(function(data) {

                    if (!data) {
                        alert('No Sale found!');
                        return;
                    }

                    $("#inv_no").html(data.invoiceno);
                    $("#inv_amt").html(data.inv_amt);
                    $("#pmethods").html(data.pmethods);

                    $("#due_sale_id").val(sale_id);

                })
                .fail(function() {
                    alert('Something went wrong!');
                });

        });
        $(".inv_update_pay").click(function() {

            $("#pmethods_2").html('');

            let sale_id = $(this).data("id");
            // console.log(sale_id);
            $("#due_sale_id_2").val(sale_id);
            $("#paymodemodal").modal("show");

            var url = "{{ route('saleres.mupdate',':id') }}";
            url = url.replace(':id', sale_id);

            $.get(url)
                .done(function(data) {

                    if (!data) {
                        alert('No Sale found!');
                        return;
                    }

                    $("#inv_no_2").html(data.invoiceno);
                    $("#inv_amt_2").html(data.inv_amt);
                    $("#pmethods_2").html(data.pmethods);

                    $("#due_sale_id_2").val(sale_id);

                })
                .fail(function() {
                    alert('Something went wrong!');
                });

        });


        $(".inv_print").click(function() {
            var sale_id = $(this).data("id");

            var type = '2';

            printSlip(sale_id, type);
        });

        $(".view_inv").click(function() {
            var sale_id = $(this).data("id");

            var type = '1';

            printSlip(sale_id, type);
        });




        // $('#formdate').datetimepicker({
        //     format: 'DD-MM-YYYY'
        // });

        $('#payment_date').datetimepicker({
            format: 'DD-MM-YYYY',
            defaultDate: moment()
        });

        // $('#todate').datetimepicker({
        //     format: 'DD-MM-YYYY'
        // });

        $('.select2').select2()

        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })


        $("#example1").DataTable({
            "responsive": true,
            "lengthChange": false,
            "autoWidth": false,
            "paging": false,
            buttons: [{
                    extend: 'excel',
                    title: 'Product List'
                },
                {
                    extend: 'pdf',
                    title: 'Product List'
                },
                {
                    extend: 'print',
                    title: 'Product List'
                },
                'colvis'
            ]

        }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');

        $('#example2').DataTable({
            "paging": false,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "responsive": true,
        });

    });


    $("#duePaymentForm").submit(function(e) {
        e.preventDefault();

        $.ajax({
            url: "{{ route('saleres.receiveDuePayment') }}",
            method: "POST",
            data: $(this).serialize(),
            success: function(res) {
                if (res.success) {
                    alert('Payment received successfully');
                    location.reload();
                }
            }
        });
    });
    $("#paymodemodalForm").submit(function(e) {
        e.preventDefault();

        $.ajax({
            url: "{{ route('saleres.paymodechange') }}",
            method: "POST",
            data: $(this).serialize(),
            success: function(res) {
                if (res.success) {
                    alert('Payment Method Updated successfully');
                    location.reload();
                }
            }
        });
    });
</script>
@endpush