@extends('layouts.master')
@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .error {
            color: red;
        }

        table tr td .ledger+.select2-container {
            min-width: 80% !important;
            max-width: 90% !important;
        }

        table tr td .ledgerCr+.select2-container {
            min-width: 80% !important;
            max-width: 90% !important;
        }

        table tr td .ledgerDr+.select2-container {
            min-width: 80% !important;
            max-width: 90% !important;
        }
    </style>
@endsection
@section('title')
    Contra
@endsection
@section('content')
    <main>
        @isset($accountingVoucher)
            <form action="/admin/double-entry/{{ $accountingVoucher->id }}" method="POST" id="accounting-voucher"
                autocomplete="off" class="needs-validation" novalidate>
                @method('put')
            @else
                <form action="/admin/double-entry" method="POST" id="accounting-voucher" autocomplete="off"
                    class="needs-validation" novalidate>
                @endisset
                @csrf
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0 flex-grow-1">
                                    @isset($accountingVoucher)
                                        Edit Contra
                                    @else
                                        Add Contra
                                    @endisset
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row mb-3">
                                    @if (auth()->user()->staff == null)
                                        <div class="col-lg-4">
                                            <label class="form-label">Branch</label>
                                            <select class="form-select" id="branch" name="branch_id"
                                                required>
                                                <option value="">Select branch</option>
                                                @foreach ($branches as $branch)
                                                    <option value="{{ $branch->id }}"
                                                        {{ isset($accountingVoucher) ? ($accountingVoucher->branch_id == $branch->id ? 'selected' : '') : ($branch->name == 'Main Branch' ? 'selected' : '') }}>
                                                        {{ $branch->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif
                                    <div class="col-lg-4">
                                        <label for="nameInput" class="form-label">Voucher Number</label>
                                        <div class="input-group">
                                            @isset($accountingVoucher)
                                                @if (str_contains($accountingVoucher->voucher_number, '-'))
                                                    @php
                                                        $explode = explode('-', $accountingVoucher->voucher_number);
                                                        $voucherNumber = end($explode);
                                                        $prefix = array_pop($explode);
                                                        $prefix = implode('-', $explode);
                                                    @endphp
                                                    <span class="input-group-text"
                                                        id="inputGroup-sizing-sm">{{ $prefix }}</span>
                                                    <input type="text" class="form-control" style="background: lightgrey;"
                                                        name="voucher_number" id="voucher-number" value="{{ $voucherNumber }}"
                                                        readonly>
                                                @else
                                                    <span class="input-group-text" id="inputGroup-sizing-sm"
                                                        style="display: none;"></span>
                                                    <input type="text" class="form-control" style="background: lightgrey;"
                                                        name="voucher_number" id="voucher-number"
                                                        value="{{ $accountingVoucher->voucher_number }}" readonly>
                                                @endif
                                            @else
                                                @if ($voucherType->prefix != null)
                                                    <span class="input-group-text"
                                                        id="inputGroup-sizing-sm">{{ $voucherType->prefix }}</span>
                                                @else
                                                    <span class="input-group-text" id="inputGroup-sizing-sm"
                                                        style="display: none;"></span>
                                                @endif
                                                <input type="text" class="form-control" style="background: lightgrey;"
                                                    name="voucher_number" id="voucher-number" value="" readonly>
                                            @endisset
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label class="form-label">Voucher Type</label>
                                        <select class="form-select" id="voucher-type" name="voucher_type_id"
                                            onchange="changeVoucherType()" required>
                                            @isset($accountingVoucher)
                                            <option value="{{ $accountingVoucher->voucher_type_id }}" selected>
                                                {{ $accountingVoucher->voucherType->name }}</option>
                                        @endisset
                                        </select>
                                    </div>
                                    <div class="col-lg-4">
                                        <label class="form-label">Voucher Date</label>
                                        <input type="date" class="form-control"
                                            value="{{ isset($accountingVoucher) ? $accountingVoucher->voucher_date : date('Y-m-d') }}"
                                            name="voucher_date" id="voucher-date">
                                    </div>
                                    <div class="col-lg-4">
                                        <label class="form-label">Cost Center</label>
                                        <select class="form-select" id="cost-center" name="cost_center_id">
                                            <option value="">Select Cost Center</option>
                                            @foreach ($costCenters as $costCenter)
                                                <option value="{{ $costCenter->id }}"
                                                    {{ isset($accountingVoucher) ? ($accountingVoucher->cost_center_id == $costCenter->id ? 'selected' : '') : '' }}>
                                                    {{ $costCenter->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-4">
                                        <label for="nameInput" class="form-label">Remarks</label>
                                        <textarea class="form-control" name="remarks" rows="3" id="remarks" placeholder="Enter remarks">{{ isset($accountingVoucher) ? $accountingVoucher->remarks : '' }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive table-card">
                                <table class="table table-nowrap table-striped-columns mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th scope="col">Sl No</th>
                                            <th scope="col">Particulars</th>
                                            <th scope="col" style="width: 10%">Debit</th>
                                            <th scope="col" style="width: 10%">Credit</th>
                                            <th scope="col" style="width: 10%">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="rows">
                                        @isset($accountingVoucher)
                                            @foreach ($accountingVoucher->accountingVoucherLedgers as $key => $accountingVoucherLedger)
                                                <tr id="{{ $key + 1 }}">
                                                    <td><a class="fw-semibold">{{ $key + 1 }}</a></td>
                                                    <td>
                                                        <div class="input-group" style="flex-wrap: nowrap !important;">
                                                            <select class="form-select by" style="width: 15rem !important;"
                                                                id="type_{{ $key + 1 }}"
                                                                name="type[{{ $key + 1 }}] required">
                                                                <option value="by"
                                                                    {{ $accountingVoucherLedger->dr_or_cr == 'Dr' ? 'selected' : '' }}>
                                                                    By</option>
                                                                <option value="to"
                                                                    {{ $accountingVoucherLedger->dr_or_cr == 'Cr' ? 'selected' : '' }}>
                                                                    To</option>
                                                            </select>
                                                            <select
                                                                class="form-select ledger {{ $accountingVoucherLedger->dr_or_cr == 'Cr' ? 'ledgerCr' : 'ledgerDr' }}"
                                                                id="ledger_{{ $key + 1 }}"
                                                                name="ledger[{{ $key + 1 }}]"
                                                                style="width: 85% !important; required">
                                                                <option>Select Ledger Account</option>
                                                                <option value="{{ $accountingVoucherLedger->ledger->id }}"
                                                                    selected>{{ $accountingVoucherLedger->ledger->name }}
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td><input class="form-control amount" type="number"
                                                            id="debit_amount_{{ $key + 1 }}"
                                                            name="debit_amount[{{ $key + 1 }}]"
                                                            value="{{ $accountingVoucherLedger->dr_or_cr == 'Dr' ? $accountingVoucherLedger->amount : '' }}"
                                                            placeholder="amount" {{ $accountingVoucherLedger->dr_or_cr == 'Cr' ? 'disabled' : '' }}></td>
                                                    <td><input class="form-control amount" type="number"
                                                            id="credit_amount_{{ $key + 1 }}"
                                                            name="credit_amount[{{ $key + 1 }}]"
                                                            value="{{ $accountingVoucherLedger->dr_or_cr == 'Cr' ? $accountingVoucherLedger->amount : '' }}"
                                                            placeholder="amount" {{ $accountingVoucherLedger->dr_or_cr == 'Dr' ? 'disabled' : '' }} ></td>
                                                    <td>
                                                        <button type="button" class="btn btn-danger btn-sm remove"><i
                                                                class="las la-minus"></i></button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endisset
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td></td>
                                            <td class="text-end fw-semibold">Total</td>
                                            <td id="debitTotal">
                                                {{ isset($accountingVoucher) ? $accountingVoucher->accountingVoucherLedgers->where('dr_or_cr', 'Dr')->sum('amount') : 0.0 }}
                                            </td>
                                            <td id="creditTotal">
                                                {{ isset($accountingVoucher) ? $accountingVoucher->accountingVoucherLedgers->where('dr_or_cr', 'Cr')->sum('amount') : 0.0 }}
                                            </td>
                                            <td></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <br>
                            <div class="text-end">
                                <button type="button" class="btn btn-info" id="row_add" onclick="appendNewRow()"><i
                                        class="las la-plus"></i>Add</button>
                                <button type="submit" id="submit-btn" class="btn btn-primary">
                                    Submit
                                </button>
                            </div>

                        </div>
                    </div>
                </div>
            </form>
    </main>
@endsection
@section('script')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"
        integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ URL::asset('/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script>
        let cost_center_required = false;
        @isset($accountingVoucher)
            $(document).ready(function() {
                calculateTotal();
                $('.ledgerDr').select2({
                    placeholder: 'Select Ledger',
                    ajax: {
                        url: "/admin/get-contra-debit-ledgers",
                        type: "post",
                        data: function(params) {
                            var query = {
                                search: params.term,
                                _token: "{{ csrf_token() }}",
                            }
                            return query;
                        },
                        processResults: function(data) {
                            return {
                                results: $.map(data.data, function(obj) {
                                    console.log(obj);
                                    return {
                                        id: obj.value,
                                        text: obj.name,
                                    };
                                })

                            };
                        },
                    },
                });

                $('.ledgerCr').select2({
                    placeholder: 'Select Ledger',
                    ajax: {
                        url: "/admin/get-contra-credit-ledgers",
                        type: "post",
                        data: function(params) {
                            var query = {
                                search: params.term,
                                _token: "{{ csrf_token() }}",
                            }
                            return query;
                        },
                        processResults: function(data) {
                            return {
                                results: $.map(data.data, function(obj) {
                                    console.log(obj);
                                    return {
                                        id: obj.value,
                                        text: obj.name,
                                    };
                                })

                            };
                        },
                    },
                });
                $('.by').select2({

                })
                tabIndex = 5;
                $('#rows' + ' > tr').each(function() {
                    var rowCount = $(this).attr('id');
                    const select2Type = $('#type_' + rowCount).attr('tabindex', tabIndex + 1);
                    const select2Ledger = $('#ledger_' + rowCount).attr('tabindex', tabIndex + 2);
                    const debitAmount = $('#debit_amount_' + rowCount).attr('tabindex', tabIndex + 3);
                    const creditAmount = $('#credit_amount_' + rowCount).attr('tabindex', tabIndex + 3);
                    tabIndex = parseInt(tabIndex) + parseInt(3);
                });

                $('#row_add').prop('tabindex', tabIndex + 1);
                cost_center_required = '{{ $cost_center_required }}' == '1' ? true : false;
                $('#cost-center').select2({
                    placeholder: 'Select Cost Center',
                });
                $('#cost-center').prop('tabindex', 4);

            });
        @else
            $(document).ready(function() {
                cost_center_required = '{{ $cost_center_required }}' == '1' ? true : false;
                $('#cost-center').select2({
                    placeholder: 'Select Cost Center',
                });
                $('#cost-center').prop('tabindex', 4);
            })
            tabIndex = 5;
            appendNewRow();
        @endisset

        $('#branch').select2({
            placeholder: 'Select Branch',
        });
        $('#branch').select2('open');

        $('#voucher-type').select2({
            placeholder: 'Select Voucher Type',
            ajax: {
                url: "/admin/get-contra-voucher-types",
                type: "post",
                dataType: 'json',
                delay: 250,
                data: {
                    _token: '{{ csrf_token() }}',
                    voucherTypeId: {{ isset($accountingVoucher) ? $accountingVoucher->voucher_type_id : 'null' }},
                    voucherNumber: '{{ isset($accountingVoucher) ? $accountingVoucher->voucher_number : 'null' }}'
                },
                processResults: function(response) {
                    var results = response.data.map(function(item) {
                        return {
                            id: item.id,
                            text: item.name
                        };
                    });

                    return {
                        results: results
                    };
                },

            },
        });

        $('#branch').prop('tabindex', 1);
        $('#voucher-type').prop('tabindex', 2);
        $('#voucher-date').prop('tabindex', 3);
        $('#cost-center').prop('tabindex', 4);
        $('#remarks').prop('tabindex', 5);

        function appendNewRow() {
            var rowCount = $('#rows tr').length;
            if (rowCount == "" || rowCount == undefined) {
                rowCount = 1;
            } else {
                rowCount = parseInt(rowCount) + parseInt(1);
            }
            var row = `<tr id="${rowCount}">
                            <td><a class="fw-semibold">${rowCount}</a></td>
                            <td>
                                <div class="input-group" style="flex-wrap: nowrap !important;">
                                    <select class="form-select by" style="width: 15rem !important;" id="type_${rowCount}" name="type[${rowCount}]" required">
                                        <option value="by">By</option>
                                        <option value="to">To</option>
                                    </select>
                                    <select class="form-select ledger" id="ledger_${rowCount}" name="ledger[${rowCount}]" style="width: 85% !important; required">
                                        <option>Select Ledger Account</option>
                                    </select>
                                </div>
                            </td>
                            <td><input class="form-control amount" type="number" id="debit_amount_${rowCount}" name="debit_amount[${rowCount}]" placeholder="amount"></td>
                            <td><input class="form-control amount" type="number" id="credit_amount_${rowCount}" disabled name="credit_amount[${rowCount}]" placeholder="amount"></td>
                            <td>
                                <button type="button" class="btn btn-danger btn-sm remove"><i class="las la-minus"></i></button>
                            </td>
                        </tr>`;
            $('#rows').append(row);
            $('.ledger').select2({
                placeholder: 'Select Ledger',
                ajax: {
                    url: "/admin/get-contra-debit-ledgers",
                    type: "post",
                    data: function(params) {
                        var query = {
                            search: params.term,
                            _token: "{{ csrf_token() }}",
                        }
                        return query;
                    },
                    processResults: function(data) {
                        return {
                            results: $.map(data.data, function(obj) {
                                console.log(obj);
                                return {
                                    id: obj.value,
                                    text: obj.name,
                                };
                            })

                        };
                    },
                },
            });
            $('#type_' + rowCount).select2({

});

$('#type_' + rowCount).prop('tabindex', tabIndex + 1);
$('#ledger_' + rowCount).prop('tabindex', tabIndex + 2);
$('#debit_amount_' + rowCount).prop('tabindex', tabIndex + 3);
$('#credit_amount_' + rowCount).prop('tabindex', tabIndex + 3);
$('#row_add').prop('tabindex', tabIndex + 4);
tabIndex += 3;
        }

        $(document.body).on('change', '.by', function(e) {
            e.preventDefault();
            var rowId = $(this).closest('tr').attr('id');
            var type = $(this).val();
            let url = '/admin/get-contra-debit-ledgers';
            if (type == 'by') {
                url = '/admin/get-contra-debit-ledgers';
                //disable credit amount
                $(`#credit_amount_${rowId}`).prop('disabled', true);
                $(`#credit_amount_${rowId}`).val('');
                $(`#debit_amount_${rowId}`).prop('disabled', false);
                $(`#debit_amount_${rowId}`).val('');
            } else {
                url = '/admin/get-contra-credit-ledgers';
                //disable debit amount
                $(`#debit_amount_${rowId}`).prop('disabled', true);
                $(`#debit_amount_${rowId}`).val('');
                $(`#credit_amount_${rowId}`).prop('disabled', false);
                $(`#credit_amount_${rowId}`).val('');
            }
            $(`#ledger_${rowId}`).val('').trigger('change');
            $(`#ledger_${rowId}`).select2('destroy');
            $(`#ledger_${rowId}`).select2({
                placeholder: 'Select Ledger',
                ajax: {
                    url: url,
                    type: "post",
                    data: function(params) {
                        var query = {
                            search: params.term,
                            _token: "{{ csrf_token() }}",
                        }
                        return query;
                    },
                    processResults: function(data) {
                        return {
                            results: $.map(data.data, function(obj) {
                                console.log(obj);
                                return {
                                    id: obj.value,
                                    text: obj.name,
                                };
                            })

                        };
                    },
                },
            });
            var nextTabIndex = $('#credit_amount_' + rowId).attr('tabindex');
            $('#ledger_' + rowId).prop('tabindex', nextTabIndex - 1);
            $('#type_' + rowId).prop('tabindex', nextTabIndex - 2);
        });

        $(document).on('click', '.remove', function() {
            //rows count
            var rowCount = $('#rows tr').length;
            if (rowCount == "" || rowCount == undefined) {
                rowCount = 1;
            }
            if (rowCount == 1) {
                alert('You can not delete this row');
                return false;
            }
            var rowId = $(this).closest('tr').attr('id');
            $(`#${rowId}`).remove();
            calculateTotal();
        });

        $(document).on('keyup', '.amount', function() {
            calculateTotal();
        });

        function calculateTotal() {
            let debitTotal = 0;
            let creditTotal = 0;
            $('#rows > tr').each(function(index, element) {
                let debitAmount = $(this).find('.amount').eq(0).val();
                let creditAmount = $(this).find('.amount').eq(1).val();
                if (debitAmount != '') {
                    debitTotal += parseFloat(debitAmount);
                }
                if (creditAmount != '') {
                    creditTotal += parseFloat(creditAmount);
                }
            });
            $('#debitTotal').html(debitTotal.toFixed(3));
            $('#creditTotal').html(creditTotal.toFixed(3));
        }


        $('#accounting-voucher').validate({
            rules: {
                'voucher_number': {
                    required: true,
                },
                'voucher_date': {
                    required: true,
                },
                'amount': {
                    required: true,
                },
                'cost_center_id': {
                    required: function() {
                        return cost_center_required;
                    },
                },
            },
            messages: {
                'voucher_number': {
                    required: "Please enter voucher number",
                },
                'voucher_date': {
                    required: "Please select date",
                },
                'amount': {
                    required: "Please enter amount",
                },
            },
            submitHandler: function(form, e) {
                e.preventDefault();
                $('#submit-btn').prop('disabled', true);
                var url = $(form).attr('action');
                var formData = new FormData(form);
                let creditTotal = $('#creditTotal').html();
                let debitTotal = $('#debitTotal').html();
                if (creditTotal != debitTotal) {
                    $('#submit-btn').prop('disabled', false);
                    Swal.fire({
                        title: 'Error!',
                        text: 'Debit and credit amount must be equal',
                        icon: 'error',
                        confirmButtonText: 'Ok'
                    })
                    return false;
                }
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if (data.status == 'success') {
                            form.reset();
                            Swal.fire({
                                title: 'Success!',
                                text: data.message,
                                icon: 'success',
                                confirmButtonText: 'Ok'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    window.location.href =
                                        "{{ route('contra.index') }}";
                                }
                            })
                        } else {
                            Swal.fire({
                                title: 'Error!',
                                text: data.message,
                                icon: 'error',
                                confirmButtonText: 'Ok'
                            });
                        }
                        $('#submit-btn').prop('disabled', false);
                    },
                    error: function(data) {
                        $('#submit-btn').prop('disabled', false);
                        if (data.status === 422) {
                            var message = data.responseJSON.message;
                            Swal.fire({
                                title: 'Error!',
                                text: message,
                                icon: 'error',
                                confirmButtonText: 'Ok'
                            })
                        } else {
                            // Handle other error cases
                            console.log('Other Error:', data.responseText);
                        }
                    }
                });
            }
        });

        function changeVoucherType() {
            var currentVoucherTypeId = {{ isset($accountingVoucher) ? $accountingVoucher->voucher_type_id : 'null' }};
            var currentVoucherNumber = '{{ isset($accountingVoucher) ? $accountingVoucher->voucher_number : 'null' }}';
            var voucherTypeId = $("#voucher-type").val();
            if (voucherTypeId) {
                $.ajax({
                    url: "{{ route('getVoucherNumber') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        "voucherTypeId": voucherTypeId,
                        "currentVoucherTypeId": currentVoucherTypeId,
                        "currentVoucherNumber": currentVoucherNumber
                    },
                    success: function(data) {
                        $("#voucher-number").val(data.voucherNumber);
                        if (data.prefix != null) {
                            $("#inputGroup-sizing-sm").show();
                            $("#inputGroup-sizing-sm").html(data.prefix);
                        } else {
                            $("#inputGroup-sizing-sm").hide();
                        }
                    },
                    error: function(err) {
                        alert("Something went wrong. Please try again");
                    }
                });
            } else {
                alert("Something went wrong. Please try again");
            }
        }

        $(document).on('keydown', '#voucher-date,#remarks,.amount', function(e) {
            var key = e.which;
            if (key == 13) // the enter key code
            {
                e.preventDefault();
                var tabindex = $(this).attr('tabindex');
                if (tabindex == undefined || isNaN(tabindex)) {
                    return;
                }
                var nextindex = parseInt(tabindex) + 1;
                $("[tabindex='" + nextindex + "']").focus().select();
            }
        });

        $(document).on('select2:select', '#branch,#voucher-type,.ledger,.by,#cost-center', function(e) {
            var tabindex = $(this).attr('tabindex');
            var nextindex = parseInt(tabindex) + 1;
            $("[tabindex='" + nextindex + "']").focus().select();
        });

        $(document).on('select2:close', '#branch,#voucher-type,.ledger,.by,#cost-center', function(e) {
            var tabindex = $(this).attr('tabindex');
            var nextindex = parseInt(tabindex) + 1;
            $("[tabindex='" + nextindex + "']").focus().select();
        });

        $(document).on('select2:open', '#branch,#voucher-type,.ledger,.by,#cost-center', function(e) {
            $('.select2-search__field').focus().select();
        });

        $(document).on('keydown', '#row_add', function(e) {
            var key = e.which;
            if (key == 13) // the enter key code
            {
                $(this).click();
                var rowCount = $('#rows tr:last').attr('id');
                if (rowCount == "" || rowCount == undefined) {
                    rowCount = 1;
                } else {
                    rowCount = parseInt(rowCount) + parseInt(1);
                }
                var tabindex = $(this).attr('tabindex');
                if (tabindex == undefined || isNaN(tabindex)) {
                    return;
                }
                if (rowCount != 1) {
                    var nextindex = parseInt(tabindex) - 3;
                } else {
                    var nextindex = parseInt(tabindex) + 1;
                }
                $("[tabindex='" + nextindex + "']").focus().select();
            }
        });
    </script>
@endsection