@extends('layouts.app')
@push('middle_part')
    {{-- <a href="{{ route('journal.create') }}" class="btn btn-primary">@lang('New Journal Entry')</a> --}}
@endpush
@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="row tablerow">
                <div class="col-md-12">
                    @php
                        $page_name = 'PF > Accounting Processiong > Journal Entry';
                    @endphp
                    @include('layouts.table_top')
                </div>
                <div class="col-md-12">
                    <div class="left-card">
                        <div class="wrapper1">
                            <div class="div1">
                            </div>
                        </div>
                        <div class="table-fixed-head table-responsive">
                            <div id="items-table">
                                <form action="{{ route('journal.store') }}" method="post" id="ajax_form_data">
                                    @csrf
                                    <div class="row">
                                        <div class="col-12">

                                            <div class="table-responsive">
                                                <h6 align="center" class="mb-2">Journal Entry</h6>

                                                <div class="journal_entry">
                                                    <table class="table table-bordered">
                                                        <thead>
                                                            <tr>
                                                                <th>Serial No</th>
                                                                <th>Date</th>
                                                                <th>Reason</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td style="padding: 0px;">
                                                                    <input type="text" name="serial_no"
                                                                        class="form-control">
                                                                </td>
                                                                <td class="text-end" style="padding: 0px;">
                                                                    <input type="date" name="date"
                                                                        class="form-control" value="{{ date('Y-m-d') }}">
                                                                </td>
                                                                <td class="text-end" style="padding: 0px;">
                                                                    <select name="type" class="form-control" required>
                                                                        <option value="">Select</option>
                                                                        @foreach ($form_accounts as $account)
                                                                            <option value="{{ $account->name }}">
                                                                                {{ $account->name }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>

                                                    <table class="table table-bordered">
                                                        <thead>
                                                            <tr>
                                                                <th colspan="2">Debit</th>
                                                                <th colspan="2">Credit</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td colspan="2">
                                                                    <table width="100%" id="debit_table">
                                                                        <thead>
                                                                            <tr>
                                                                                <th class="text-center">
                                                                                    Debit Account
                                                                                </th>
                                                                                <th class="text-center">
                                                                                    Amount
                                                                                </th>
                                                                                <th class="text-center">Taxable</th>
                                                                                <th class="text-center"></th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody id="debit_body">
                                                                            <tr>
                                                                                <td class="text-end">
                                                                                    <select name="form_account[]"
                                                                                        id="form_account"
                                                                                        class="form-control form_account"
                                                                                        required>
                                                                                        <option value="">
                                                                                            Select
                                                                                        </option>
                                                                                        @foreach ($form_accounts as $account)
                                                                                            <option
                                                                                                value="{{ $account->id }}"
                                                                                                data-child={{ $account->childs->count() }}>
                                                                                                {{ $account->name }}
                                                                                            </option>
                                                                                        @endforeach
                                                                                    </select>
                                                                                </td>
                                                                                <td class="text-end">
                                                                                    <input type="number"
                                                                                        class="form-control debit"
                                                                                        name="debit[]" step="any">
                                                                                </td>

                                                                                <td>
                                                                                    <input type="checkbox"
                                                                                        name="debit_taxable[]"
                                                                                        value="1">
                                                                                </td>
                                                                                <td>
                                                                                    <button type="button" name="add"
                                                                                        class="confirm-text edit add_debit_row">
                                                                                        <i class="bi bi-plus-square"></i>
                                                                                    </button>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                                <td colspan="2">
                                                                    <table width="100%" id="credit_table">
                                                                        <thead>
                                                                            <tr>
                                                                                <th>Credit Account
                                                                                </th>
                                                                                <th>Amount</th>
                                                                                <th>Taxable</th>
                                                                                <th></th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody id="credit_body">
                                                                            <tr>
                                                                                <td class="text-end">
                                                                                    <select name="to_account[]"
                                                                                        id="to_account"
                                                                                        class="form-control to_account"
                                                                                        required>
                                                                                        <option value="">
                                                                                            Select
                                                                                        </option>
                                                                                        @foreach ($form_accounts as $account)
                                                                                            <option
                                                                                                value="{{ $account->id }}"
                                                                                                data-child={{ $account->childs->count() }}>
                                                                                                {{ $account->name }}
                                                                                            </option>
                                                                                        @endforeach
                                                                                    </select>
                                                                                </td>
                                                                                <td class="text-end">
                                                                                    <input type="number"
                                                                                        class="form-control credit"
                                                                                        name="credit[]" step="any">
                                                                                </td>
                                                                                <td>
                                                                                    <input type="checkbox"
                                                                                        name="credit_taxable[]"
                                                                                        value="1">
                                                                                </td>
                                                                                <td>
                                                                                    <button type="button" name="add"
                                                                                        class="confirm-text edit add_credit_row">
                                                                                        <i class="bi bi-plus-square"></i>
                                                                                    </button>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                        <tfoot>
                                                            <tr>
                                                                <td class="text-right"><b>Total Debit:</b></td>
                                                                <td class="text-right">
                                                                    <span id="total_debit">0.00</span>
                                                                    <input type="hidden" name="total_debit"
                                                                        id="total_debit_input">
                                                                </td>
                                                                <td class="text-right"><b>Total Credit:</b></td>
                                                                <td class="text-right">
                                                                    <span id="total_credit">0.00</span>
                                                                    <input type="hidden" name="total_credit"
                                                                        id="total_credit_input">
                                                                </td>
                                                            </tr>
                                                        </tfoot>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="justify-content-end d-flex">
                                            <button class="btn-selcet btn btn-primary mr-2" id="submit"
                                                type="submit">@lang('Save')</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {

            $(".add_debit_row").on('click', function(e) {
                e.preventDefault();
                $.ajax({
                    type: 'get',
                    url: "{{ route('journal.add_debit_row') }}",
                    dataType: "HTML",
                    success: function(data) {
                        $("#debit_body").append(data);
                    },
                    error: function(data) {
                        console.log(data);
                    }
                });
                calculateSum();
            });

            $(".add_credit_row").on('click', function(e) {
                e.preventDefault();
                $.ajax({
                    type: 'get',
                    url: "{{ route('journal.add_credit_row') }}",
                    dataType: "HTML",
                    success: function(data) {
                        $("#credit_body").append(data);
                    },
                    error: function(data) {
                        console.log(data);
                    }
                });
                calculateSum();
            });

            $(document).on('change', '.form_account', function() {

                fromaccountparent($(this).closest('tr'));
            });

            function fromaccountparent(row) {
                var id = row.find('.form_account').val();
                var child = row.find(".form_account").find(':selected').data('child');
                if (child > 0) {
                    $.ajax({
                        type: 'get',
                        data: {
                            id: id
                        },
                        url: "{{ route('journal.add_form_child_account') }}",
                        dataType: "HTML",
                        success: function(data) {
                            // row.find(".form_account_child").empty().append(data).show();
                        },
                        error: function(data) {
                            console.log(data);
                        }
                    });
                } else {
                    row.find(".form_account_child").hide();
                }

            }

            $(document).on("change", ".form_account", function(e) {
                e.preventDefault();
            });



            $(document).on('change', '.to_account', function() {
                toaccountparent($(this).closest('tr'));
            });

            function toaccountparent(row) {
                var id = row.find('.to_account').val();
                var child = row.find(".to_account").find(':selected').data('child');
                if (child > 0) {
                    $.ajax({
                        type: 'get',
                        data: {
                            id: id
                        },
                        url: "{{ route('journal.add_to_child_account') }}",
                        dataType: "HTML",
                        success: function(data) {
                            // row.find(".to_account_child").empty().append(data).show();
                        },
                        error: function(data) {
                            console.log(data);
                        }
                    });
                } else {
                    row.find(".to_account_child").hide();
                }
            }

            $(document).on("change", ".to_account", function(e) {
                e.preventDefault();
            });



            $(document).on('click', '.row-delete-debit', function() {
                $(this).closest('tr').remove();
                calculateSum();
            });

            // Delete row from credit table
            $(document).on('click', '.row-delete-credit', function() {
                $(this).closest('tr').remove();
                calculateSum();
            });

            function calculateSum() {
                let total_debit = 0;
                let total_credit = 0;

                let debitrows = $("#debit_table tbody tr");
                debitrows.each(function(index) {
                    let tblrows = $(this);
                    let debit = parseFloat(tblrows.find('td input.debit').val()) || 0;
                    total_debit += debit;
                });


                let creditrows = $("#credit_table tbody tr");
                creditrows.each(function(index) {
                    let tblrow_c = $(this);
                    let credit = parseFloat(tblrow_c.find('td input.credit').val()) || 0;
                    total_credit += credit;
                });

                $("#total_debit").html(total_debit);
                $("#total_debit_input").val(total_debit);
                $("#total_credit").html(total_credit);
                $("#total_credit_input").val(total_credit);

            }

            $(document).on('input', '.debit', function() {
                calculateSum();
            });
            $(document).on('input', '.credit', function() {
                calculateSum();
            });


        });
    </script>
@endpush