@extends('layouts.master')
@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-end mb-3">
        <a href="{{ route('ledger.create') }}" class="btn-back">
            <i class="fas fa-arrow-left me-2"></i> Back
        </a>
    </div>

    <div class="row">
        <!-- FORM SECTION -->
        <div class="col-lg-5">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white py-3">
                    <h5 id="formHeader" class="mb-0"><i class="fas fa-layer-group me-2"></i> Add Sub Accounts</h5>
                </div>
                <div class="card-body">
                    <form id="subAccountForm" action="{{ route('subacc.store') }}" method="POST">
                        @csrf
                        <input type="hidden" id="subAccountId" name="id">
                        <input type="hidden" id="subTableHidden" name="sub_table" value="sub_accounts">

                        <div id="timeout">
                            @if(Session::has('success'))
                                <div class="alert alert-success">{{ Session('success') }}</div>
                            @endif
                            @if(Session::has('error'))
                                <div class="alert alert-danger">{{ Session('error') }}</div>
                            @endif
                        </div>
                        <div class="mb-3">
                            <label class="form-label"><strong>Parent Account (GL)</strong></label>
                            <select name="parent_id" id="parentId" class="form-select" required>
                                <option value="">— Select Main Account —</option>
                                @foreach($mainAccounts as $acc)
                                    <option value="{{ $acc->id }}" {{ old('parent_id', $records->id ?? '') == $acc->id ? 'selected' : '' }}>
                                        [{{ $acc->account_code }}] {{ $acc->account_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label"><strong>Sub Account Table</strong></label>
                            <select name="sub_table" id="subTable" class="form-select" required>
                                <option value="">— Select Table —</option>
                                <option value="sub_accounts">Sub Accounts</option>
                                <option value="sub_accounts_2">Sub Accounts 2</option>
                                <option value="sub_accounts_3">Sub Accounts 3</option>
                                <option value="sub_accounts_4">Sub Accounts 4</option>
                                <option value="sub_accounts_5">Sub Accounts 5</option>
                            </select>
                        </div>
                         <div class="mb-3">
                            <label class="form-label"><strong>Main Account Code:</strong></label>
                            <input class="form-control" type="text" id="code" name="code" value="{{ $records->code ?? '' }}" />
                        </div>
                          <div class="mb-3">
                            <label class="form-label"><strong>Main Account Name:</strong></label>
                            <input class="form-control" type="text" id="subCode" name="sub_code" value="{{ $records->account_name ?? '' }}" />
                        </div>
                        <div class="mb-3">
                            <label class="form-label"><strong>Sub Account Code:</strong></label>
                            <input class="form-control"
                                   type="text"
                                   id="accountCode"
                                   name="account_code"
                                   value=""
                                   required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label"><strong>Sub Account Name:</strong></label>
                            <input class="form-control"
                                   type="text"
                                   id="subName"
                                   name="sub_name"
                                   required />
                        </div>

                        <div class="d-flex justify-content-end mt-4">
                            <input id="submitButton" type="submit" class="btn btn-primary me-2" value="SUBMIT">
                            <input type="reset" class="btn btn-outline-secondary" value="REFRESH" onclick="resetSubForm()">
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- TABLE SECTION -->
        <div class="col-lg-7 mt-4 mt-lg-0">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white py-3">
                    <h5 class="mb-0"><i class="fas fa-list me-2"></i> General Ledger Accounts</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Sub Account Code</th>
                                    <th>Sub Account Name</th>
                                    <th>Main Account Name</th>
                                    <th>Sub Table</th>
                                    <th style="width:100px">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($recordss as $subAccount)
                                <tr>
                                    <td>{{ $subAccount->account_code }}</td>
                                    <td>{{ $subAccount->sub_name }}</td>
                                    <td>{{ $subAccount->mainAccount->account_name ?? 'N/A' }}</td>
                                    <td><span class="badge bg-secondary">{{ $subAccount->sub_table ?? $subAccount->getTable() }}</span></td>
                                    <td class="text-center">
                                        <a href="#" class="btn btn-sm btn-primary" onclick="editSubAccount(
                                            event,
                                            '{{ $subAccount->id }}',
                                            '{{ $subAccount->code }}',
                                            '{{ $subAccount->sub_name }}',
                                            '{{ $subAccount->account_code }}',
                                            '{{ $subAccount->mainAccount->account_name ?? '' }}',
                                            '{{ $subAccount->parent_id }}',
                                            '{{ $subAccount->sub_table ?? $subAccount->getTable() }}'
                                        )">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <a href="{{ route('subaccount.delete', ['table' => $subAccount->sub_table ?? $subAccount->getTable(), 'id' => $subAccount->id]) }}"
                                           class="btn btn-sm btn-danger deleteSubBtn">
                                            <i class="fas fa-trash-alt"></i>
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- DELETE MODAL -->
<div class="modal fade" id="deleteSubConfirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">Confirm Deletion</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete this sub account?
            </div>
            <div class="modal-footer">
                <button id="cancelSubDeleteBtn" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button id="confirmSubDeleteBtn" type="button" class="btn btn-danger">Delete</button>
            </div>
        </div>
    </div>
</div>

<script>
function editSubAccount(event, id, code, name, account_code, account_name, parent_id, sub_table) {
    event.preventDefault();

    document.getElementById('subAccountId').value = id;
    document.getElementById('code').value = code;
    document.getElementById('subName').value = name;
    document.getElementById('accountCode').value = account_code;
    document.querySelector('input[name="sub_code"]').value = account_name;
    document.getElementById('parentId').value = parent_id;
    document.getElementById('subTable').value = sub_table;
    document.getElementById('subTableHidden').value = sub_table;

    document.getElementById('formHeader').innerHTML = '<i class="fas fa-layer-group me-2"></i> Edit Sub Account';
    document.getElementById('submitButton').value = 'UPDATE';
    document.getElementById('subAccountForm').action = '{{ route("editSubAccount") }}';
}

function resetSubForm() {
    document.getElementById('subAccountId').value = '';
    document.getElementById('code').value = '{{ $records->code }}';
    document.getElementById('subName').value = '';
    document.getElementById('accountCode').value = '{{ $records->account_code }}';
    document.querySelector('input[name="sub_code"]').value = '{{ $records->account_name }}';
    document.getElementById('subTable').value = 'sub_accounts';
    document.getElementById('subTableHidden').value = 'sub_accounts';
    document.getElementById('formHeader').innerHTML = '<i class="fas fa-layer-group me-2"></i> Add Sub Accounts';
    document.getElementById('submitButton').value = 'SUBMIT';
    document.getElementById('subAccountForm').action = '{{ route("subacc.store") }}';
    document.getElementById('timeout').innerHTML = '';
}

document.addEventListener('DOMContentLoaded', function(){
    let deleteUrl = null;
    const modalEl = document.getElementById('deleteSubConfirmModal');
    const bsModal = new bootstrap.Modal(modalEl);

    document.querySelectorAll('.deleteSubBtn').forEach(btn => {
        btn.addEventListener('click', function(e){
            e.preventDefault();
            deleteUrl = this.getAttribute('href');
            bsModal.show();
        });
    });

    document.getElementById('confirmSubDeleteBtn').addEventListener('click', function(){
        bsModal.hide();
        window.location.href = deleteUrl;
    });

    document.getElementById('cancelSubDeleteBtn').addEventListener('click', function(){
        bsModal.hide();
    });
});
</script>

<style>
.btn-back {
    text-decoration: none;
    color: #1AB9D9;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    padding: 5px 15px;
    border-radius: 4px;
    transition: all 0.3s;
}
.btn-back:hover {
    background-color: rgba(26, 185, 217, 0.1);
    text-decoration: none;
}
.card {
    border-radius: 8px;
    overflow: hidden;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.card-header {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 12px 20px;
}
.table th {
    background-color: #f8f9fa;
}
</style>
@endsection