@extends('admin_dashboard')
@section('admin')

<div class="content">
<div class="container-fluid">

    {{-- Header --}}
    <div class="row mb-3">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2"
                 style="background: linear-gradient(135deg, #1a3a5c, #0f2540); border-radius: 12px; padding: 18px 24px;">
                <div class="d-flex align-items-center gap-3">
                    <div style="background: rgba(255,255,255,0.15); border-radius: 10px; width:46px; height:46px; display:flex; align-items:center; justify-content:center;">
                        <i class="fa fa-sitemap" style="color:#fff; font-size:20px;"></i>
                    </div>
                    <div>
                        <h4 class="mb-0 text-white fw-bold">Sub-Ledger Management</h4>
                        <small style="color:rgba(255,255,255,0.65);">Browse member accounts and ledger sub-entries</small>
                    </div>
                </div>
                <a href="{{ route('add.subledger') }}"
                   style="background:#fff; color:#1a3a5c; border-radius:8px; padding:8px 20px; font-weight:600; font-size:14px; text-decoration:none;">
                    <i class="fa fa-plus me-1"></i> Add Sub-Ledger
                </a>
            </div>
        </div>
    </div>


    {{-- Ledger Search --}}
    <div class="row mb-3">
        <div class="col-12">
            <div class="card border-0 shadow-sm" style="border-radius:12px;">
                <div class="card-header bg-white border-bottom py-3">
                    <h6 class="mb-0 fw-semibold" style="color:#1a3a5c;">
                        <i class="fa fa-search me-2"></i>Search Sub-Ledgers by Ledger
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-flex gap-3 flex-wrap align-items-end">
                        <div style="min-width:280px;">
                            <label class="form-label fw-semibold" style="font-size:13px;">Ledger Name</label>
                            <input list="ledger_names" id="ledger_name" name="ledger_name"
                                   class="form-control" placeholder="Type to search ledger..."
                                   style="border-radius:8px;">
                            <datalist id="ledger_names">
                                @foreach($ledgers as $ledger)
                                <option value="{{ $ledger->ledger_name }}">{{ $ledger->ledger_name }}</option>
                                @endforeach
                            </datalist>
                        </div>
                        <button class="btn fw-semibold px-4" id="subledgerSearch"
                                style="background:linear-gradient(135deg,#1a3a5c,#0f2540); color:#fff; border-radius:8px; border:none; height:38px;">
                            <i class="fa fa-search me-2"></i>Search
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Results --}}
    <div id="ledgerContainer" class="row g-3"></div>

</div>
</div>

<style>
.member-link {
    display: inline-flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 8px;
    transition: opacity .15s, transform .15s;
    white-space: nowrap;
}
.member-link:hover {
    opacity: .88;
    transform: translateY(-1px);
    color: #fff;
}
.card { border-radius: 12px !important; }
</style>

<script>
document.getElementById('subledgerSearch').addEventListener('click', function () {
    const ledgerId = document.getElementById('ledger_name').value.trim();
    const container = document.getElementById('ledgerContainer');

    container.innerHTML = `
        <div class="col-12 text-center py-4 text-muted">
            <i class="fa fa-spinner fa-spin me-2"></i>Loading...
        </div>`;

    fetch(`{{ route('filter.ledgers') }}?ledger_id=${encodeURIComponent(ledgerId)}`, {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(r => r.json())
    .then(data => {
        container.innerHTML = '';

        if (!data.ledgers || data.ledgers.length === 0) {
            container.innerHTML = `
                <div class="col-12">
                    <div class="text-center py-5 text-muted">
                        <i class="fa fa-folder-open" style="font-size:36px; opacity:.3;"></i>
                        <div class="mt-2">No ledgers found. Try a different search.</div>
                    </div>
                </div>`;
            return;
        }

        data.ledgers.forEach(ledger => {
            const subs = data.subledgers.filter(s => s.ledger_id === ledger.id);
            const rows = subs.length > 0
                ? subs.map((s, i) => `
                    <tr style="border-bottom:1px solid #f0f0f0;">
                        <td style="padding:10px 14px; font-size:13px; width:40px; color:#999;">${i+1}</td>
                        <td style="padding:10px 14px; font-size:13px; font-weight:500;">${s.subledger_name}</td>
                        <td style="padding:10px 14px; text-align:right;">
                            <a href="#" style="background:#e8f0fe; color:#1a3a5c; border:none; border-radius:6px; padding:4px 10px; font-size:12px; text-decoration:none; margin-right:4px;">
                                <i class="fa fa-pencil"></i>
                            </a>
                            <a href="#" style="background:#fde8e8; color:#c0392b; border:none; border-radius:6px; padding:4px 10px; font-size:12px; text-decoration:none;">
                                <i class="fa fa-trash"></i>
                            </a>
                        </td>
                    </tr>`).join('')
                : `<tr><td colspan="3" style="padding:16px; text-align:center; color:#aaa; font-size:13px;">No sub-ledgers found.</td></tr>`;

            container.innerHTML += `
                <div class="col-lg-4 col-md-6">
                    <div class="card border-0 shadow-sm" style="border-radius:12px; overflow:hidden;">
                        <div style="background:linear-gradient(135deg,#1a3a5c,#0f2540); padding:14px 18px;">
                            <div class="d-flex align-items-center justify-content-between">
                                <div style="color:#fff; font-weight:700; font-size:15px;">
                                    <i class="fa fa-book me-2" style="opacity:.7;"></i>${ledger.ledger_name}
                                </div>
                                <span style="background:rgba(255,255,255,0.18); color:#fff; border-radius:20px; padding:2px 10px; font-size:11px; font-weight:600;">
                                    ${subs.length} sub
                                </span>
                            </div>
                        </div>
                        <div style="padding:0;">
                            <table style="width:100%; border-collapse:collapse;">
                                <thead>
                                    <tr style="background:#f8f9fa; border-bottom:2px solid #e9ecef;">
                                        <th style="padding:9px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#6c757d; width:40px;">#</th>
                                        <th style="padding:9px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#6c757d;">Sub-Ledger Name</th>
                                        <th style="padding:9px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#6c757d; text-align:right;">Action</th>
                                    </tr>
                                </thead>
                                <tbody>${rows}</tbody>
                            </table>
                        </div>
                    </div>
                </div>`;
        });
    })
    .catch(err => {
        container.innerHTML = `
            <div class="col-12">
                <div class="alert alert-danger border-0 shadow-sm" style="border-radius:10px;">
                    <i class="fa fa-exclamation-circle me-2"></i>An error occurred while fetching data.
                </div>
            </div>`;
        console.error('Error:', err);
    });
});
</script>

@endsection