@extends('layouts.app')
@push('style')
    <style>
        .table td {
            font-size: 15px;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !important;
        }

        .income {
            border: none !important;
            font-size: 15px !important;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !important;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            /* display: none; <- Crashes Chrome on hover */
            -webkit-appearance: none !important;
            margin: 0;
            /* <-- Apparently some margin are still there even though it's hidden */
        }


        input[type=number] {
            -moz-appearance: textfield !important;
            /* Firefox */
            border-radius: none !important;
        }


        .box-title {
            font-size: 16px;
            font-weight: 600;
            padding: 10px;
            background: #d7daea;
        }

        td.active.text-start {
            padding: 0 10px !important;
            border: 1px solid #b1b1b1;
            background: #210a0e30;
        }

        td.text-end {
            padding: 0 !important;
        }

        td.text-end input.form-control {
            border-radius: 0;
            border: none;
            width: 100%;
        }

        td.text-end select.form-select.form-control {
            border-radius: 0;
            border: none;
            width: 100%;
        }

        td.text-end textarea.form-control {
            border-radius: 0;
            border: none;
            width: 100%;
        }
    </style>
@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 > Edit Journal';
                    @endphp
                    @include('layouts.table_top')
                </div>

                <div class="col-md-12">
                    <div class="left-card">
                        <div id="items-table">
                            <form action="{{ route('journal.update', $item->id) }}" method="post" id="ajax_form_data">
                                @csrf
                                <div class="row">
                                    <div class="col-12">

                                        <div class="table-responsive" style="height:500px;">

                                            <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"
                                                                    value="{{ $item->serial_no }}">
                                                            </td>
                                                            <td class="text-end" style="padding: 0px;">
                                                                <input type="date" name="date" class="form-control"
                                                                    value="{{ $item->date }}">
                                                            </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 }}"
                                                                            @selected($item->type == $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" colspan="2">
                                                                                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">
                                                                        @foreach ($item->debits as $key => $debit)
                                                                            <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 }}"
                                                                                                {{ $debit->account_id == $account->id ? 'selected' : '' }}>
                                                                                                {{ $account->name }}
                                                                                            </option>
                                                                                        @endforeach
                                                                                    </select>
                                                                                </td>
                                                                                <td class="text-end">
                                                                                    <div class="form_account_child">
                                                                                    </div>
                                                                                </td>
                                                                                <td class="text-end">
                                                                                    <input type="number"
                                                                                        class="form-control debit"
                                                                                        name="debit[]"
                                                                                        value="{{ $debit->amount }}"
                                                                                        step="any">
                                                                                </td>
                                                                                <td>
                                                                                    <input type="checkbox"
                                                                                        name="debit_taxable[]"
                                                                                        value="1"
                                                                                        @if ($debit->is_taxable == 1) checked @endif>
                                                                                </td>
                                                                                <td>
                                                                                    @if ($key == 0)
                                                                                        <button type="button"
                                                                                            name="add"
                                                                                            class="confirm-text edit add_debit_row">
                                                                                            <i
                                                                                                class="bi bi-plus-square"></i>
                                                                                        </button>
                                                                                    @else
                                                                                        <button
                                                                                            class="confirm-text item_delete row-delete-debit">
                                                                                            <i
                                                                                                class="bi bi-trash3"></i></button>
                                                                                    @endif
                                                                                </td>
                                                                            </tr>
                                                                        @endforeach

                                                                    </tbody>
                                                                </table>
                                                            </td>
                                                            <td colspan="2">
                                                                <table width="100%" id="credit_table">
                                                                    <thead>
                                                                        <tr>
                                                                            <th colspan="2">Credit Account</th>
                                                                            <th>Amount</th>
                                                                            <th class="text-center">Taxable</th>
                                                                            <th></th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody id="credit_body">
                                                                        @foreach ($item->credits as $key => $credit)
                                                                            <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 }}"
                                                                                                {{ $credit->account_id == $account->id ? 'selected' : '' }}>
                                                                                                {{ $account->name }}
                                                                                            </option>
                                                                                        @endforeach
                                                                                    </select>
                                                                                </td>
                                                                                <td class="text-end">
                                                                                    <div class="to_account_child">
                                                                                    </div>
                                                                                </td>
                                                                                <td class="text-end">
                                                                                    <input type="number"
                                                                                        class="form-control credit"
                                                                                        name="credit[]"
                                                                                        value="{{ $credit->amount }}"
                                                                                        step="any">
                                                                                </td>
                                                                                <td>
                                                                                    <input type="checkbox"
                                                                                        name="credit_taxable[]"
                                                                                        value="1"
                                                                                        @if ($credit->is_taxable == 1) checked @endif>
                                                                                </td>
                                                                                <td>
                                                                                    @if ($key == 0)
                                                                                        <button type="button"
                                                                                            name="add"
                                                                                            class="confirm-text edit add_credit_row">
                                                                                            <i
                                                                                                class="bi bi-plus-square"></i>
                                                                                        </button>
                                                                                    @else
                                                                                        <button
                                                                                            class="confirm-text item_delete row-delete-credit">
                                                                                            <i
                                                                                                class="bi bi-trash3"></i></button>
                                                                                    @endif
                                                                                </td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                    <tfoot>
                                                        <tr>
                                                            <td align="right"><b>Total Debit:</b></td>
                                                            <td align="right">
                                                                <span id="total_debit">{{ $item->debit }}</span>
                                                                <input type="hidden" name="total_debit"
                                                                    id="total_debit_input" value="{{ $item->debit }}">
                                                            </td>
                                                            <td align="right"><b>Total Credit:</b></td>
                                                            <td align="right">
                                                                <span id="total_credit">{{ $item->credit }}</span>
                                                                <input type="hidden" name="total_credit"
                                                                    id="total_credit_input" value="{{ $item->credit }}">
                                                            </td>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="justify-content-end d-flex">
                                        <button class="btn-selcet btn btn-primary mr-2" id="submit"
                                            type="submit">@lang('Update')</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                @include('provident::partials.sidebar')
            </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();
                $.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);
                    }
                });
            }

            $(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();
                $.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);
                    }
                });
            }

            $(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