@extends('layouts.admin')

@push('styles')
    <link rel="stylesheet" href="{{ asset('plugins/fontawesome-free/css/all.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">

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


    <style>
        div.form-group {
            margin-bottom: 3px;
        }

        #unitname {
            position: relative;
            top: 11px;
        }

        #btn_looding {
            display: none;
        }

        #table-scroll table thead th {
          position: sticky;
          top: 0;
          background: #333; /* Repeat the header background to prevent transparency */
          color: #fff;       /* Ensure the text color is preserved */
          z-index: 2;        /* Ensure it stays on top */
        }


    </style>
@endpush

@section('content')
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid mt-4">
            <div class="row">
                <!-- left column -->
                <div class="col-md-12">
                    <!-- jquery validation -->
                    <div class="card card-info">
                        <div class="card-header">
                            <h3 class="card-title">Chart Of Account Update</h3>

                            <a href="{{ route('chartpl.index') }}" style="float: right;padding: 3px 26px;"
                                class="btn btn-outline-dark btn-flat"> List</a>

                        </div>
                        <!-- /.card-header -->
                        <!-- form start -->



                            <div class="card-body">

                                <div class="row">

                                    <div class="col-md-6 offset-3"> 

                                        <div class="row"> 

                                            <h2 class="mb-4">Edit Journal Entry</h2>

                                            @if ($errors->any())
                                                <div class="alert alert-danger">
                                                    <ul>
                                                        @foreach ($errors->all() as $error)
                                                            <li>{{ $error }}</li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endif

                                            <form action="{{ route('journalpl.update', $id) }}" method="POST">
                                                @csrf
                                                @method('PUT')

                                                @include('journal_entries_pl.form', ['entry' => $JournalPl])

                                                <button type="submit" class="btn btn-primary">Update Entry</button>
                                            </form>



                                        </div>

                                    </div>


                                </div>


                            </div>


                    </div>
                    <!-- /.card -->
                </div>
                <!--/.col (left) -->
                <!-- right column -->
                <div class="col-md-6">

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


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

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

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

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

    <script>

        function calTotal(){
            let total_debit = 0;
            let total_credit = 0;
            let sl = 0;
            $(".debit_amount").each(function() {

                total_debit += parseFloat($(this).val()) || 0;
                sl += 1;
               $(this).closest("tr").find("span").html(sl);

            });

            $(".credit_amount").each(function() {
                total_credit += parseFloat($(this).val()) || 0;
            });

            $("#total_debit").html(total_debit.toFixed(2));
            $("#total_credit").html(total_credit.toFixed(2));
        }


        $(function() {

               // $("#account_head").val('');
               // $("#accountId").val('');
               // $("#accountType").val('');

                const accountData = {!! $account_head !!};

                $("#account_head").autocomplete({

                      source: accountData.map(item => ({
                        label: item.account_name,
                        value: item.account_name,
                        id: item.id,
                        account_type: item.account_type
                      })),
                      select: function (event, ui) {

                        $('#account_head_id').val(ui.item.id);
                        $('#account_type').val(ui.item.account_type);

                        $("#amount").select();
                        $("#amount").focus();

                        let crdr_txt = '';

                        let cr_or_dr = $("#cr_or_dr").val();

                        if (cr_or_dr === 'Cr') {

                           crdr_txt = 'Cr. ';
                         
                        } else if (cr_or_dr === 'Dr') {

                           crdr_txt = 'Dr. ';
                          
                        }else{
                            return false;
                        }

                        $("span#crdr_txt").html(crdr_txt);

                    }

                });


            $(document).on('keydown', 'input', function(event) {

              if (event.key === "Enter" || event.keyCode === 13) {

                event.preventDefault();

              }

            });


            $('#cr_or_dr').on('keydown', function(event) {

                if (event.key === "Enter" || event.keyCode === 13) {
                    event.preventDefault();

                    $("#account_head").select();
                    $("#account_head").focus();

                }

            });


            $('#amount').on('keydown', function(event) {
                if (event.key === "Enter" || event.keyCode === 13) {
                    event.preventDefault();

                    let amount = $(this).val().trim();
                    if (!amount) {
                        alert("Please enter an amount.");
                        return false;
                    }

                    let particular = $("#account_head").val().trim();
                    let accountId = $("#accountId").val().trim();
                    let accountType = $("#accountType").val().trim();
                    let cr_or_dr = $("#cr_or_dr").val();

                    if (!particular || !accountId || !accountType) {
                        alert("Please fill all account details.");
                        return false;
                    }

                    let debit = 0.0, credit = 0.0;

                    if (cr_or_dr === 'Cr') {

                        credit = amount;
                     
                    } else if (cr_or_dr === 'Dr') {

                        debit = amount;
                      
                    }else{
                        return false;
                    }
                 
                    let rowCount = $("#acc_entry tr").length + 1; // Auto row number

                    let entryRowHtml = `<tr data-account-id="${accountId}">
                                            <input type="hidden" name="account_head_id[]" value="${accountId}">
                                            <input type="hidden" name="account_type[]" value="${accountType}">
                                            <input type="hidden" name="debit_amount[]" class="debit_amount" value="${debit}">
                                            <input type="hidden" name="credit_amount[]" class="credit_amount" value="${credit}">

                                            <td> <span class="sl"> ${rowCount} </span> </td>
                                            <td>${particular}</td>
                                            <td style="text-align:right;">${debit}</td>
                                            <td style="text-align:right;">${credit}</td>
                                            <td style="text-align:right;"> <button type="button" class="rem_acc btn btn-sm btn-danger"> X </button> </td>
                                        </tr>`;


                    let existingRow = $(`#acc_entry tr[data-account-id='${accountId}']`);

                    if (existingRow.length > 0) {
                        existingRow.replaceWith(entryRowHtml); // Replace if exists
                    } else {
                        $("#acc_entry").append(entryRowHtml);  // Otherwise append
                    }

                    $("#cr_or_dr").select();
                    $("#cr_or_dr").focus();

                    $("#account_head").val('');
                    $("#accountId").val('');
                    $("#accountType").val('');
                    $(this).val('');

                    $("span#crdr_txt").html('');

                    // Scroll to bottom of container
                    const scrollContainer = document.getElementById('table-scroll');
                    scrollContainer.scrollTop = scrollContainer.scrollHeight;

                    calTotal();

                }

            });


            //console.log(account_head);

            $("#account_type").change(function(){

               // $("#parent_id").html('');

                // $("#account_number").val('');

                if($(this).val()){

                    let account_type = $(this).val();

                    let url = "{{ route('chartOfaccountpl.accountslist') }}";

                    $.get( url, { account_type: account_type } )
                    .done(function( data ) {

                        if(data.account_number){
                            $("#parent_id").html(data.row);
                            $("#account_number").val(data.account_number);
                        }

                        
                    });


                }

            });


        $( "#acc_entry" ).on( "click", ".rem_acc", function() {

           $(this).closest("tr").remove();
            calTotal();


        });


        });
    </script>
@endpush