@extends('layouts.app')
@section('title', __('Credit Management'))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header no-print">
    <h1>@lang('Credit Management List')
        <small></small>
    </h1>
    <!-- <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
    </ol> -->
</section>
<style>
    .ml-5 {
        margin-left: 5px;
    }
</style>
<!-- Main content -->
<section class="content no-print">
    @component('components.filters', ['title' => __('report.filters')])
    <div class="col-md-3">
        <div class="form-group">
            {!! Form::label('location_id', __('purchase.business_location') . ':') !!}
            {!! Form::select('location_id', $business_locations, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang_v1.all')]) !!}
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label>Payment Type :</label>
            <select class='form-control select2' name="payment_type" id="payment_type">
                <option value="all">All</option>
                <option value="credit">Credit</option>
                <option value="debit">Debit</option>
            </select>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label>Payment Method : </label>
            <select class='form-control select2' name="payment_method" id="payment_method">
                <option value="all">All</option>
                <option value="cash">Cash</option>
                <option value="cheque">Cheque</option>
                <option value="demand_draft">Demand Draft</option>
                <option value="bank_transfer">Bank Transfer</option>
                <option value="Other">Other</option>
            </select>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            {!! Form::label('credit_list_filter_date_range', __('report.date_range') . ':') !!}
            {!! Form::text('credit_list_filter_date_range', null, ['placeholder' => __('lang_v1.select_a_date_range'), 'class' => 'form-control', 'readonly']); !!}
        </div>

    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label>Status :</label>
            <select class='form-control select2' name="status" id="status">
                <option value="all">All</option>
                <option value="1">Approved</option>
                <option value="0">Pending</option>
            </select>
        </div>
    </div>
    @endcomponent

    <div class="alert alert-success d-none" id="alert_success" style="display:none;">

    </div>

    @if (session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
    @endif
    @component('components.widget', ['class' => 'box-primary', 'title' => __('All List')])
    @can('purchase.create')
    @slot('tool')
    <div class="box-tools">
        <a class="btn btn-block btn-primary" href="{{action([\App\Http\Controllers\CreditManagementController::class, 'create'])}}">
            <i class="fa fa-plus"></i> @lang('messages.add')</a>
    </div>

    @endslot
    @endcan
    <div class="col-md-12">
        <div class="table-responsive">
            <table class="table table-bordered table-striped ajax_view" id="credit_management_table" style="width: 100%;">
                <thead>
                    <tr>
                        <th>SNO</th>
                        <th>Date &amp; Time</th>
                        <th>Location &amp; Name</th>
                        <th>Description</th>
                        <th>Payment Type</th>
                        <th>Payment Method</th>
                        <th>Transaction / Invoice No</th>
                        <th>Amount</th>
                        <th>Status </th>

                        <th style="width: 100px;">Action</th>
                    </tr>
                </thead>
                <tfoot>

                </tfoot>
            </table>
        </div>
    </div>
    @endcomponent
    <!-- Button to trigger the modal -->
    {{--- View Image Modal---}}
    <div class="modal fade" id="viewImageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md" role="document"> <!-- Medium modal size -->
            <div class="modal-content">

                <div class="modal-body">
                    <!-- Table inside the modal body -->
                    <div class="row">
                        <div class="col-md-12" id="view_img_body">

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    {{---End of  View Image Modal---}}

    <!-- Modal -->
    <div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md" role="document"> <!-- Medium modal size -->
            <div class="modal-content">

                <div class="modal-body">
                    <!-- Table inside the modal body -->
                    <table class="table">

                        <tbody id="viewCredit_tbody">

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

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


</section>



<!-- /.content -->
@stop
@section('javascript')

<script>
    //Date range as a button
    $('#credit_list_filter_date_range').daterangepicker(
        dateRangeSettings,
        function(start, end) {
            $('#credit_list_filter_date_range').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));
            credit_management_table.ajax.reload();
        }
    );
    $('#credit_list_filter_date_range').on('cancel.daterangepicker', function(ev, picker) {
        $('#credit_list_filter_date_range').val('');
        credit_management_table.ajax.reload();
    });

    $('#credit_list_filter_date_range,#payment_type ,#payment_method,#location_id, #status').change(function() {
        credit_management_table.ajax.reload();

    });


    $(document).ready(function() {

        $('input[name="daterange"]').daterangepicker({
            // startDate: moment().subtract(1, 'M'),
            startDate: moment().startOf('month'),
            endDate: moment(),

        });

        credit_management_table = $('#credit_management_table').DataTable({
    "scrollX": true,
    processing: true,
    serverSide: true,
    aaSorting: [
        [0, 'desc']
    ],
    ajax: {
        url: '/credit-management',
        "data": function(d) {
            d.payment_type = $('#payment_type').val();
            d.location_id = $('#location_id').val();
            d.payment_method = $('#payment_method').val();
            d.status = $("#status").val();
            if ($('#credit_list_filter_date_range').val()) {
                var start = $('input#credit_list_filter_date_range')
                    .data('daterangepicker')
                    .startDate.format('YYYY-MM-DD');
                var end = $('input#credit_list_filter_date_range')
                    .data('daterangepicker')
                    .endDate.format('YYYY-MM-DD');
                d.start_date = start;
                d.end_date = end;
            }
            return __datatable_ajax_callback(d);
        }
    },
    columns: [{
            data: 'DT_Row_Index',
            name: 'DT_Row_Index',
            orderable: false,
            searchable: false
        },
        {
            data: 'created_at',
            name: 'created_at',
            render: function(data) {
                var formattedDate = new Date(data).toLocaleString('en-US', {
                    timeZone: 'UTC'
                });
                return formattedDate;
            }
        },
        {
            data: 'name',
            name: 'name',
            searchable: false,
            render: function(data, type, row, meta) {
                return '<div class=""> ' + data + '-' + row.bl_location + '</div>';
            }
        },
        {
            data: 'remarks',
            name: 'remarks'
        },
        {
            data: 'payment_type',
            name: 'payment_type'
        },
        {
            data: 'payment_method',
            name: 'payment_method'
        },
        {
            data: 'invoice_no',
            name: 'invoice_no',
            searchable: false,
            render: function(data, type, row, meta) {
                if (row.payment_method === 'invoice') {
                    return row.invoice_no;
                } else if (row.payment_method === 'cheque') {
                    return row.transaction_cheque_no;
                } else {
                    return ''; // handle other cases if needed
                }
            }
        },
        {
            data: 'amount',
            name: 'amount'
        },
        {
            data: 'status',
            name: 'status',
            searchable: false,
            render: function(data, type, row, meta) {
                if (data == '0') {
                    return '<button type="button" class="btn btn-warning btn-sm status_btn" value="' + row.id + '" onclick="change_status(this.value)">Pending</button>';
                } else if (data == '1') {
                    return '<button type="button" class="btn btn-success btn-sm status_btn" value="' + row.id + '">Approved</button>';
                }
            }
        },
        // Uncomment this column if needed
        // {
        //     data: 'id',
        //     name: 'id',
        //     searchable: false,
        //     render: function(data, type, row, meta) {
        //         return '<button type="button" class="btn btn-primary btn-xs view_btn" value="' + data+'/'+row.bl_location_id + '" onclick="viewCreditDetails(this.value);"><i class="fa fa-eye" aria-hidden="true"></i></button>';
        //     }
        // },
        {
            data: 'action',
            name: 'action'
        }
    ],
});

});


       

    function viewCreditDetails(val) {
        var allval = val.split('/');
        var id = allval[0];
        var location_id = allval[1];
        //   console.log(val);
        $.ajax({
            method: 'GET',
            url: '/credit-management/viewDetails',
            dataType: 'html',
            data: {
                id: id,
                location_id: location_id
            },
            success: function(result) {
                //console.log(result);

                var data = JSON.parse(result);
                var formattedDate = new Date(data[0].credit_created_at).toLocaleString('en-US', {
                    timeZone: 'UTC'
                }); // You can adjust the timezone as needed
                var updatedformattedDate = new Date(data[0].updated_at).toLocaleString('en-US', {
                    timeZone: 'UTC'
                });
                var tbody = $('#viewCredit_tbody');
                var credited_amount = data['credited_amount'] ? parseFloat(data['credited_amount']) : 0;
                var debit_amount = data['debit_amount'] ? parseFloat(data['debit_amount']) : 0;
                var available_balance = credited_amount - debit_amount;

                var credited_pending_amount = data['credited_pending_amount'] ? parseFloat(data['credited_pending_amount']) : 0;
                var debit_pending_amount = data['debit_pending_amount'] ? parseFloat(data['debit_pending_amount']) : 0;
                var pending_balance = credited_pending_amount - debit_pending_amount;
                var transaction_cheque_no = data[0]['transaction_cheque_no'] !== null ? data[0]['transaction_cheque_no'] : '';
                var transaction_date = data[0]['transaction_date'] !== null ? data[0]['transaction_date'] : '';
                var bank_name = data[0]['bank_name'] !== null ? data[0]['bank_name'] : '';
                var ref_no = data[0]['ref_no'] !== null ? data[0]['ref_no'] : '';
                var fullName = data['surname'] + ' ' + data['first_name'] + ' ' + data['last_name'];
                // Create a new table row
                var rowHtml = '<tr class="text-success">' +
                    '<td>Available Balance</td>' +
                    '<td>' + available_balance + '</td>' +
                    '</tr>' +
                    '<tr class="text-warning">' +
                    '<td>Pending Balance</td>' +
                    '<td>' + pending_balance.toFixed(2) + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '</tr>';
                if (ref_no !== null && ref_no !== '') {

                    rowHtml += '<tr class="">' +
                        '<td>Reference Number</td>' +
                        '<td>' + ref_no + '</td>' +
                        '</tr>';
                }

                if (data[0]['invoice_no'] !== null && data[0]['invoice_no'] !== '') {

                    rowHtml += '<tr><td>Invoice Number</td>' +
                        '<td>' + data[0]['invoice_no'] + '</td>' +
                        '</tr>' +
                        '<tr>';
                }
                rowHtml += '<tr>' +
                    '<td>Bussiness Location</td>' +
                    '<td>' + data[0]['name'] + '-' + data[0]['bl_location_id'] + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td>Created Date</td>' +
                    '<td>' + formattedDate + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td>Payment Type</td>' +
                    '<td>' + data[0]['payment_type'] + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td>Amount</td>' +
                    '<td>' + data[0]['amount'] + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td>Payment Method</td>' +
                    '<td>' + data[0]['payment_method'] + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td>Paid By</td>' +
                    '<td>' + data[0]['paid_by'] + '</td>' +
                    '</tr>';

                if (transaction_cheque_no !== null && transaction_cheque_no !== '') {
                    rowHtml += '<tr><td>Transaction / Cheque No.</td>' +
                        '<td>' + transaction_cheque_no + '</td>' +
                        '</tr>' +
                        '<tr>' +
                        '<td>Transaction Date</td>' +
                        '<td>' + transaction_date + '</td>' +
                        '</tr>' +
                        '<tr>' +
                        '<td>Bank Name</td>' +
                        '<td>' + bank_name + '</td>' +
                        '</tr>';
                }
                rowHtml += '<tr class="trdeleted">' +
                    '<td>Last Action Performed By</td>' +
                    '<td>' + fullName + '</td>' +
                    '</tr>' +
                    '<tr class="trdeleted">' +
                    '<td>Updated On</td>' +
                    '<td>' + updatedformattedDate + '</td>' +
                    '</tr>' +
                    '<tr class="trdeleted">' +
                    '<td>Admin Remarks</td>' +
                    '<td>' + data[0]['remarks'] + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td colspan="2" align="center"><button type="button" id="btnClose" class="k-button" data-dismiss="modal">Close</button>&nbsp;</td>' +
                    '</tr>';


                // Append the rowHtml to the table body
                tbody.html(rowHtml);
                $('#viewModal').modal('show');
            },
        });

    }



    function change_status(id) {
        if (confirm("Are you sure you want to Approve this record?")) {
            $.ajax({
                url: '/credit-management/statusChange',
                type: "GET", // Type of request (GET or POST)
                dataType: "json", // Type of data expected in the response
                data: {
                    id: id

                },
                success: function(response) {
                    $("#alert_success").show();
                    $("#alert_success").text(response.message);
                    credit_management_table.ajax.reload();
                    $(".alert-success").delay(5000).fadeOut();
                },
                error: function(xhr, status, error) {
                    $("#alert_success").hide();
                    // Display an error message if the request fails
                    $("#result").html("Error: " + xhr.responseText);
                }
            });
        }
    }





    function destroy(id) {
        if (confirm("Are you sure you want to delete this record?")) {
            $.ajax({
                type: "GET",
                url: '/credit-management/destroy/' + id,
                success: function(data) {
                    // Handle success
                    //  console.log(data);
                    credit_management_table.ajax.reload();
                },
                error: function(xhr, status, error) {
                    // Handle error
                    console.error(xhr.responseText);
                }
            });
        }
    }


    function viewImageDetails(img) {
        var view_img_body = $("#view_img_body");
        if (img !== '') {
            var rowHtml = ' <img src="/uploads/credit_management/' + img + '" class="img-fluid" alt="Cinque Terre" width="100%" height="100%"> ';
        } else {
            var rowHtml = '<h4>Image Not Found ! </h4>';
        }
        view_img_body.html(rowHtml);
        $('#viewImageModal').modal('show');
    }
</script>

@endsection