@extends('layouts.master')

@section('title')
    {{ $data ? 'كشف حساب: ' . $data['account']->name : 'كشف حساب' }}
@endsection

@section('css')
<style>
    .ast-wrap { max-width: 1500px; margin: 24px auto; }
    .ast-hero { background: linear-gradient(120deg,#0c9fa2,#08b7b2); color: #fff; border-radius: 14px 14px 0 0; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
    .ast-hero h3 { margin: 0; font-weight: 800; font-size: 20px; color: #fff; }
    .ast-hero .ast-sub { font-size: 12.5px; color: #cbd5e1; margin-top: 4px; }
    .ast-hero .ast-links a { color: #fff; font-size: 13px; font-weight: 700; margin-inline-start: 18px; text-decoration: none; }
    .ast-hero .ast-links a:hover { color: #93c5fd; }
    .ast-icon { width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.12); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; margin-inline-end: 12px; }
    .ast-card { background: #fff; border-radius: 0 0 14px 14px; border: 1px solid #d8edf0; padding: 16px 18px; margin-top: 0; box-shadow: 0 8px 24px rgba(15,55,80,.06); }
    .ast-card label { font-size: 12.5px; font-weight: 700; color: #374151; margin-bottom: 4px; }
    .ast-tag { font-size: 10.5px; background: #eef2ff; color: #4338ca; padding: 1px 8px; border-radius: 6px; margin-inline-start: 6px; }
    .ast-acc { position: relative; }
    .ast-acc .ast-results { position: absolute; z-index: 50; top: 100%; inset-inline: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; max-height: 300px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.08); display: none; }
    .ast-acc .ast-results div { padding: 7px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #f3f4f6; }
    .ast-acc .ast-results div:hover, .ast-acc .ast-results div.active { background: #eff6ff; }
    .ast-acc .ast-results small { color: #9ca3af; }
    .ast-num { display: inline-block; background: #eef2ff; color: #4338ca; border-radius: 5px; padding: 0 6px; font-size: 11.5px; margin-inline-end: 6px; }
    .ast-btns .btn { border-radius: 8px; font-weight: 700; margin-inline-start: 6px; margin-top: 6px; }
    .ast-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; }
    @media (max-width: 991px) { .ast-stats { grid-template-columns: repeat(2, 1fr); } }
    .ast-stat { background: #fff; border-radius: 12px; border: 1px solid #eef0f4; padding: 14px 18px; }
    .ast-stat .lbl { font-size: 12px; color: #6b7280; }
    .ast-stat .val { font-size: 22px; font-weight: 800; margin-top: 6px; direction: ltr; text-align: end; }
    .ast-table { background: #fff; border-radius: 12px; border: 1px solid #eef0f4; margin-top: 18px; overflow: hidden; }
    .ast-table table { margin: 0; }
    .ast-table th { background: #f8fafc; color: #6b7280; font-size: 12.5px; font-weight: 700; border-top: 0 !important; white-space: nowrap; }
    .ast-table td { vertical-align: middle; font-size: 13.5px; }
    .ast-table td.num { direction: ltr; text-align: end; white-space: nowrap; }
    .ast-table .ast-open td { background: #f9fafb; color: #6b7280; }
    .ast-table tfoot td { font-weight: 800; background: #f8fafc; }
    .ast-entry { font-family: monospace; font-weight: 700; color: #1d4ed8; }
    .ast-badge { font-size: 11px; padding: 3px 9px; border-radius: 6px; }
    .ast-modes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
    .ast-mode { border:1px solid #cfe5f0; background:#f1f8fc; color:#153b78; border-radius:12px; padding:12px 14px; text-align:right; font-weight:800; transition:.15s; }
    .ast-mode small { display:block; color:#64748b; font-weight:600; margin-top:3px; }
    .ast-mode.active,.ast-mode:hover { color:#fff; background:#079fa2; border-color:#079fa2; }
    .ast-mode.active small,.ast-mode:hover small { color:#e2ffff; }
    .ast-filter-wrap { background:#f5f9fc; border:1px solid #e3edf4; border-radius:14px; padding:15px; }
    .ast-table th { background:#079fa2; color:#fff; text-align:center; }
    .ast-table tbody tr:nth-child(even) td { background:#f4f9fc; }
    .ast-table tfoot td { background:#dff4f8; }
    .ast-party { font-weight:700; color:#163b78; }
    .ast-party-box { background:#e9f6fb; border:1px solid #bfe3ee; border-radius:14px; padding:12px 12px 8px; box-shadow:0 0 0 3px rgba(7,159,162,.08); }
    .ast-party-box label { color:#163b78; }
    @media(max-width:767px){.ast-modes{grid-template-columns:repeat(2,minmax(0,1fr));}.ast-wrap{margin:10px auto}.ast-card{padding:12px}}
</style>
@endsection

@section('content')
@php
    $f = $filters;
    $fmt = fn ($v) => number_format((float) $v, 2);
    $qs = http_build_query(array_filter($f, fn ($v) => $v !== null && $v !== ''));
@endphp
<div class="ast-wrap">

    <div class="ast-hero">
        <div class="d-flex align-items-center">
            <span class="ast-icon"><i class="fa fa-file-text-o"></i></span>
            <div>
                <h3>{{ $data ? 'كشف حساب: ' . $data['account']->name : 'كشف حساب' }}</h3>
                @if ($data)
                    <div class="ast-sub">
                        رقم الحساب: {{ $data['account']->account_number }}
                        @if ($data['account']->parent_name) &nbsp;|&nbsp; الحساب الأب: {{ $data['account']->parent_name }} @endif
                        @if ($data['is_parent']) &nbsp;|&nbsp; حساب تجميعي (يشمل الحسابات الفرعية) @endif
                        &nbsp;|&nbsp; طبيعته: {{ $data['debit_nature'] ? 'مدين' : 'دائن' }}
                    </div>
                @else
                    <div class="ast-sub">اختر الحساب والفترة ثم اضغط فلترة</div>
                @endif
            </div>
        </div>
        <div class="ast-links">
            <a href="{{ url('/financial_accounts') }}"><i class="fa fa-sitemap"></i> شجرة الحسابات</a>
            <a href="{{ url('account_statement') }}"><i class="fa fa-list"></i> كشف الحساب القديم</a>
        </div>
    </div>

    <form method="GET" action="{{ route('account_statement_v2.index') }}" class="ast-card" id="astForm">
        <input type="hidden" name="account_scope" id="astScope" value="{{ $f['account_scope'] }}">
        <div class="ast-modes" role="group" aria-label="نوع كشف الحساب">
            <button type="button" class="ast-mode {{ $f['account_scope'] === 'general' ? 'active' : '' }}" data-scope="general"><i class="fa fa-file-text-o"></i> كشف حساب عام<small>جميع الحسابات</small></button>
            <button type="button" class="ast-mode {{ $f['account_scope'] === 'customer' ? 'active' : '' }}" data-scope="customer"><i class="fa fa-user"></i> كشف حساب عميل<small>حركات العملاء</small></button>
            <button type="button" class="ast-mode {{ $f['account_scope'] === 'supplier' ? 'active' : '' }}" data-scope="supplier"><i class="fa fa-truck"></i> كشف حساب مورد<small>حركات الموردين</small></button>
            <button type="button" class="ast-mode {{ $f['account_scope'] === 'merged' ? 'active' : '' }}" data-scope="merged"><i class="fa fa-users"></i> كشف موحد<small>اختيار عميل أو مورد</small></button>
        </div>
        <div class="ast-filter-wrap">
          <div class="row align-items-end">
            <div class="col-lg-4 col-md-6 form-group ast-acc" id="astAccountWrap">
                <label><i class="fa fa-search"></i> الطرف / الحساب <span class="ast-tag" id="astScopeTag">أي حساب في الشجرة</span></label>
                <input type="hidden" name="account_id" id="astAccountId" value="{{ $f['account_id'] }}">
                <input type="text" id="astAccountText" class="form-control" autocomplete="off" placeholder="ابحث عن حساب أو عميل أو مورد..."
                       value="{{ $data ? $data['account']->account_number . ' — ' . $data['account']->name : '' }}">
                <div class="ast-results" id="astResults"></div>
            </div>
            @php
                $mergedNames = \Illuminate\Support\Facades\DB::table('financial_accounts')
                    ->whereIn('id', array_filter([(int) ($f['customer_account_id'] ?? 0), (int) ($f['supplier_account_id'] ?? 0)]))
                    ->get(['id', 'name', 'account_number'])->keyBy('id');
                $mName = fn ($id) => ($id && isset($mergedNames[(int) $id])) ? $mergedNames[(int) $id]->account_number . ' — ' . $mergedNames[(int) $id]->name : '';
            @endphp
            <div class="col-lg-4 col-md-6 form-group" id="astMergedPartyFilters" style="{{ $f['account_scope'] === 'merged' ? '' : 'display:none' }}">
                <div class="ast-party-box">
                <div class="row">
                    <div class="col-sm-6 form-group mb-sm-0">
                        <label><i class="fa fa-user text-primary"></i> الطرف عميل (اختياري)</label>
                        <div class="ast-acc">
                            <input type="text" id="astCustomerText" class="form-control" autocomplete="off" placeholder="اختر عميل..." value="{{ $mName($f['customer_account_id'] ?? null) }}">
                            <div class="ast-results" id="astCustomerResults"></div>
                        </div>
                        <input type="hidden" name="customer_account_id" id="astCustomerId" value="{{ $f['customer_account_id'] ?? '' }}">
                    </div>
                    <div class="col-sm-6 form-group mb-0">
                        <label><i class="fa fa-truck text-info"></i> الطرف مورد (اختياري)</label>
                        <div class="ast-acc">
                            <input type="text" id="astSupplierText" class="form-control" autocomplete="off" placeholder="اختر مورد..." value="{{ $mName($f['supplier_account_id'] ?? null) }}">
                            <div class="ast-results" id="astSupplierResults"></div>
                        </div>
                        <input type="hidden" name="supplier_account_id" id="astSupplierId" value="{{ $f['supplier_account_id'] ?? '' }}">
                    </div>
                </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-3 form-group">
                <label>من تاريخ</label>
                <input type="date" name="date_from" value="{{ $f['date_from'] }}" class="form-control">
            </div>
            <div class="col-lg-2 col-md-3 form-group">
                <label>إلى تاريخ</label>
                <input type="date" name="date_to" value="{{ $f['date_to'] }}" class="form-control">
            </div>
            <div class="col-lg-2 col-md-4 form-group">
                <label>نوع العملية</label>
                <select name="operation_type" class="form-control">
                    <option value="">كل الأنواع</option>
                    @foreach ($types as $k => $label)
                        <option value="{{ $k }}" {{ ($f['operation_type'] === $k) ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-lg-2 col-md-4 form-group">
                <label>الفرع</label>
                <select name="branch" class="form-control">
                    <option value="all">كل الفروع</option>
                    @foreach ($branches as $id => $name)
                        <option value="{{ $id }}" {{ ((string) $f['branch'] === (string) $id) ? 'selected' : '' }}>{{ $name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-12 form-group d-flex align-items-end justify-content-center ast-btns flex-wrap">
                <button type="submit" class="btn btn-primary"><i class="fa fa-filter"></i> فلترة</button>
                <a href="{{ route('account_statement_v2.index') }}" class="btn btn-light">إلغاء</a>
                @if ($data)
                    <a href="{{ route('account_statement_v2.pdf') }}?{{ $qs }}" class="btn btn-danger"><i class="fa fa-file-pdf-o"></i> تحميل PDF</a>
                    <a href="{{ route('account_statement_v2.print') }}?{{ $qs }}" target="_blank" class="btn btn-light"><i class="fa fa-print"></i> طباعة</a>
                    <a href="{{ route('account_statement_v2.excel') }}?{{ $qs }}" class="btn btn-outline-success"><i class="fa fa-file-excel-o"></i> تصدير إكسيل</a>
                @endif
            </div>
          </div>
        </div>
    </form>

    @if ($data)
        <div class="ast-stats">
            <div class="ast-stat"><div class="lbl">رصيد افتتاحي (بداية الفترة)</div><div class="val">{{ $fmt($data['opening']) }}</div></div>
            <div class="ast-stat"><div class="lbl">إجمالي المدين</div><div class="val text-primary">{{ $fmt($data['total_debit']) }}</div></div>
            <div class="ast-stat"><div class="lbl">إجمالي الدائن</div><div class="val text-warning">{{ $fmt($data['total_credit']) }}</div></div>
            <div class="ast-stat"><div class="lbl">الرصيد الختامي</div><div class="val text-success">{{ $fmt($data['closing']) }}</div></div>
        </div>

        <div class="ast-table">
            @include('account_statement._table', ['data' => $data, 'badges' => $badges])
        </div>
    @endif
</div>
@endsection

@section('js')
<script>
(function () {
    var scope = document.getElementById('astScope'),
        tag = document.getElementById('astScopeTag'),
        accWrap = document.getElementById('astAccountWrap'),
        mergedBox = document.getElementById('astMergedPartyFilters');
    var tags = { general: 'أي حساب في الشجرة', customer: 'حسابات العملاء', supplier: 'حسابات الموردين' };
    function esc(s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }

    // اختيار حساب بالبحث (يُستخدم لحقل الحساب ولحقلي العميل والمورد في الكشف الموحد)
    function picker(textId, hidId, boxId, scopeFn) {
        var text = document.getElementById(textId), hid = document.getElementById(hidId), box = document.getElementById(boxId),
            timer = null, items = [], active = -1;
        function render() {
            if (!items.length) { box.innerHTML = '<div class="text-muted">لا توجد نتائج</div>'; box.style.display = 'block'; return; }
            box.innerHTML = items.map(function (a, i) {
                return '<div data-i="' + i + '" class="' + (i === active ? 'active' : '') + '"><span class="ast-num">' + esc(a.account_number) + '</span>' + esc(a.name) +
                    (a.parent_name ? ' <small>— ' + esc(a.parent_name) + '</small>' : '') + '</div>';
            }).join('');
            box.style.display = 'block';
        }
        function search() {
            fetch("{{ route('account_statement_v2.accounts') }}?scope=" + encodeURIComponent(scopeFn()) + "&q=" + encodeURIComponent(text.value.trim()), { headers: { 'Accept': 'application/json' } })
                .then(function (r) { return r.json(); }).then(function (d) { items = d || []; active = -1; render(); }).catch(function () {});
        }
        function pick(i) { var a = items[i]; if (!a) return; hid.value = a.id; text.value = a.account_number + ' — ' + a.name; box.style.display = 'none'; }
        text.addEventListener('input', function () { hid.value = ''; clearTimeout(timer); timer = setTimeout(search, 250); });
        text.addEventListener('focus', function () { if (!hid.value) search(); });
        text.addEventListener('keydown', function (e) {
            if (box.style.display !== 'block') return;
            if (e.key === 'ArrowDown') { active = Math.min(items.length - 1, active + 1); render(); e.preventDefault(); }
            else if (e.key === 'ArrowUp') { active = Math.max(0, active - 1); render(); e.preventDefault(); }
            else if (e.key === 'Enter' && active >= 0) { pick(active); e.preventDefault(); }
        });
        box.addEventListener('mousedown', function (e) { var el = e.target.closest('[data-i]'); if (el) { pick(+el.dataset.i); e.preventDefault(); } });
        document.addEventListener('click', function (e) { if (e.target !== text && !box.contains(e.target)) box.style.display = 'none'; });
        return { clear: function () { hid.value = ''; text.value = ''; box.style.display = 'none'; }, text: text, hid: hid };
    }

    var acc = picker('astAccountText', 'astAccountId', 'astResults', function () { return scope.value; });
    var cust = picker('astCustomerText', 'astCustomerId', 'astCustomerResults', function () { return 'customer'; });
    var supp = picker('astSupplierText', 'astSupplierId', 'astSupplierResults', function () { return 'supplier'; });

    function applyMode() {
        var merged = scope.value === 'merged';
        accWrap.style.display = merged ? 'none' : '';
        mergedBox.style.display = merged ? '' : 'none';
        tag.textContent = tags[scope.value] || tags.general;
        acc.text.placeholder = scope.value === 'general' ? 'ابحث باسم الحساب أو رقمه...' : 'ابحث عن الطرف بالاسم أو رقم الحساب...';
    }
    document.querySelectorAll('.ast-mode').forEach(function (button) {
        button.addEventListener('click', function () {
            scope.value = button.dataset.scope;
            document.querySelectorAll('.ast-mode').forEach(function (b) { b.classList.toggle('active', b === button); });
            acc.clear(); cust.clear(); supp.clear();
            applyMode();
        });
    });
    document.getElementById('astForm').addEventListener('submit', function (e) {
        if (scope.value === 'merged') {
            if (!cust.hid.value && !supp.hid.value) { e.preventDefault(); alert('اختر العميل أو المورد (أو الاتنين) من القائمة.'); cust.text.focus(); }
            acc.hid.value = '';
        } else if (!acc.hid.value) {
            e.preventDefault(); alert('اختر الحساب من القائمة أولاً.'); acc.text.focus();
        }
    });
    applyMode();
})();
</script>
@endsection