@extends('layouts.app')

@section('content')

<style>
.page-wrap {
    max-width: 1400px;
}

.header-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    gap:10px;
    flex-wrap:wrap;
}

.btn {
    padding:10px 14px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
    text-decoration:none;
}

.btn-primary {
    background:#1E4FA8;
    color:#fff;
}

.btn-orange {
    background:#E84C0D;
    color:#fff;
}

.card {
    background:#fff;
    border-radius:14px;
    padding:20px;
    margin-bottom:20px;
    box-shadow:0 4px 14px rgba(0,0,0,0.06);
}

.search-box {
    padding:10px;
    width:250px;
    border:1px solid #ddd;
    border-radius:8px;
}

table {
    width:100%;
    border-collapse:collapse;
}

th, td {
    padding:10px;
    border-bottom:1px solid #eee;
    text-align:left;
}

th {
    background:#f5f7fb;
}

.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.form-group {
    display:flex;
    flex-direction:column;
}

label {
    font-weight:600;
    margin-bottom:6px;
}

input, select {
    padding:10px;
    border:1px solid #ddd;
    border-radius:8px;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display:none;
    position:absolute;
    right:0;
    background:#fff;
    min-width:160px;
    box-shadow:0 4px 14px rgba(0,0,0,0.14);
    border-radius:10px;
    overflow:hidden;
    z-index:100;
}

.dropdown-content a,
.dropdown-content button {
    display:block;
    width:100%;
    padding:10px 12px;
    border:none;
    background:#fff;
    text-align:left;
    cursor:pointer;
    text-decoration:none;
    color:#111;
    font-size:14px;
    font-family:inherit;
    box-sizing:border-box;
}

.dropdown-content a:hover,
.dropdown-content button:hover {
    background:#f5f7fb;
}

.dropdown:hover .dropdown-content {
    display:block;
}

.form-popup {
    display:none;
}

.success-box {
    background:#dff6e9;
    color:#146c43;
    padding:12px;
    border-radius:8px;
    margin-bottom:15px;
}
</style>

<div class="page-wrap">

    <div class="header-row">
        <h2>Chart of Accounts</h2>

        <button class="btn btn-primary" data-permission="accounts.create" onclick="toggleForm()">
            + Add Account
        </button>
    </div>

    @if(session('success'))
        <div class="success-box">
            {{ session('success') }}
        </div>
    @endif

    <div class="card">

        <form method="GET" class="auto-filter-form">

            <input
                type="text"
                name="search"
                value="{{ $search }}"
                placeholder="Search accounts..."
                class="search-box"
            >

            <button class="btn btn-primary">
                Search
            </button>

        </form>

    </div>

    <div class="card">

        <table>
            <thead>
                <tr>
                    <th>GL Code</th>
                    <th>Account Name</th>
                    <th>Sub Account Type</th>
                    <th>Opening Date</th>
                    <th>Sub Account</th>
                    <th>Account Type</th>
                    <th>Currency</th>
                    <th>Status</th>
                    <th width="90">More</th>
                </tr>
            </thead>

            <tbody>

            @forelse($accounts as $account)

                <tr>

                    <td>{{ $account->gl_code }}</td>

                    <td>{{ $account->account_name }}</td>

                    <td>{{ $account->sub_account_type }}</td>

                    <td>{{ $account->opening_date }}</td>

                    <td>
                        {{ optional($account->parentAccount)->account_name }}
                    </td>

                    <td>{{ $account->account_type }}</td>

                    <td>{{ $account->currency }}</td>

                    <td>
                        {{ $account->is_active ? 'Active' : 'Inactive' }}
                    </td>

                    <td>

                        <div class="dropdown">

                            <button class="btn btn-orange">
                                More
                            </button>

                            <div class="dropdown-content">

    <a href="{{ url('/accounts/'.$account->id.'/edit') }}">
        Update
    </a>

    <form
        method="POST"
        action="{{ url('/accounts/'.$account->id) }}"
    >
        @csrf
        @method('DELETE')

        <button type="submit">
            Delete
        </button>

    </form>

</div>

                        </div>

                    </td>

                </tr>

            @empty

                <tr>
                    <td colspan="9">
                        No accounts found.
                    </td>
                </tr>

            @endforelse

            </tbody>

        </table>

        <div style="margin-top:15px;">
            {{ $accounts->links('vendor.pagination.jevapos') }}
        </div>

    </div>

    <div id="accountForm" class="card form-popup">

        <h3>Add Account</h3>

        <form method="POST" action="{{ url('/accounts') }}">
            @csrf

            <div class="form-grid">

                <div class="form-group">
                    <label>GL Code *</label>
                    <input type="text" name="gl_code" required>
                </div>

                <div class="form-group">
                    <label>Account Name *</label>
                    <input type="text" name="account_name" required>
                </div>

                <div class="form-group">
                    <label>Account Type *</label>

                    <select name="account_type" required>
                        <option value="">Select</option>
                        <option>Asset</option>
                        <option>Liability</option>
                        <option>Equity</option>
                        <option>Income</option>
                        <option>Expense</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Sub Account Type</label>
                    <input type="text" name="sub_account_type">
                </div>

                <div class="form-group">
    <label>Parent Account</label>
    <select name="parent_account_id">
        <option value="">None</option>
        @foreach($parentAccounts as $parent)
            <option value="{{ $parent->id }}">
                {{ $parent->account_name }}
            </option>
        @endforeach
    </select>
</div>

                <div class="form-group">
                    <label>Currency</label>
                    <input type="text" name="currency" value="KES">
                </div>

                <div class="form-group">
                    <label>Opening Date</label>
                    <input type="datetime-local" name="opening_date">
                </div>

            </div>

            <br>

            <label>
                <input type="checkbox" name="is_active" checked>
                Active
            </label>

            <br><br>

            <button class="btn btn-primary">
                Save Account
            </button>

        </form>

    </div>

</div>

<script>
function toggleForm()
{
    let form = document.getElementById('accountForm');

    if(form.style.display === 'block'){
        form.style.display = 'none';
    }else{
        form.style.display = 'block';
    }
}
</script>

@endsection