@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="">
                        <h4>Opening Balance</h4>
                        <p class="f-m-light mt-1">Page for Opening Balance</p>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <div class="alert alert-primary" role="alert">
                        Opening balance is used to set the initial balances for your accounts when you first start using the
                        accounting system. It helps ensure that your financial records are accurate from the beginning.
                    </div>
                </div>
                <form action="{{ route('accounting.opening-balance.store') }}" method="POST">
                    @csrf
                    <div class="table-responsive theme-scrollbar">
                        <table class="table table-hover table-bordered table-striped" id="basic-1">
                            <thead>
                                <tr class="bg-light-primary text-dark">
                                    <th>Code</th>
                                    <th>Name</th>
                                    <th>Debit</th>
                                    <th>Credit</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($chartOfAccounts as $chartOfAccount)
                                    <tr>
                                        <td>{{ $chartOfAccount->code }}</td>
                                        <td>{{ $chartOfAccount->name }}</td>
                                        <td>
                                            <input type="number" class="form-control" value="0"
                                                name="value[{{ $chartOfAccount->id }}][debit]">
                                        </td>
                                        <td>
                                            <input type="number" class="form-control" value="0"
                                                name="value[{{ $chartOfAccount->id }}][credit]">
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <hr>
                    <div class="text-end">
                        <button type="submit" class="btn btn-success"
                            onclick="return confirm('Are you sure you want to save the opening balance? After saving, you will not be able to edit it anymore!')">
                            Save Opening Balance
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $("#basic-1").DataTable({
            //display all rows
            lengthMenu: [
                [10, 25, 50, -1],
                [10, 25, 50, "All"],
            ],
            // default is All
            pageLength: -1,
        });
    </script>
@endsection