@extends('layouts.master')
@section('css')
<link href="{{ URL::asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">
<style>
    .as-page { --as-navy:#172b4d; --as-blue:#2563eb; --as-teal:#0f9f9a; --as-muted:#64748b; --as-line:#e2e8f0; --as-soft:#f8fafc; color:#1e293b; }
    .as-card { background:#fff; border:1px solid var(--as-line); border-radius:16px; box-shadow:0 12px 32px rgba(15,23,42,.07); overflow:hidden; }
    .as-card__head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 28px; background:linear-gradient(135deg, var(--as-navy) 0%, #1e3a8a 55%, var(--as-blue) 100%); color:#fff; }
    .as-card__title { display:flex; align-items:center; gap:14px; }
    .as-card__icon { width:46px; height:46px; border-radius:12px; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:20px; }
    .as-card__title h4 { margin:0; font-size:20px; font-weight:800; color:#fff; }
    .as-card__title p { margin:4px 0 0; font-size:12px; color:rgba(255,255,255,.75); }
    .as-card__body { padding:26px 28px 8px; }

    .as-section { margin-bottom:22px; }
    .as-section__label { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--as-navy); margin-bottom:12px; }
    .as-section__label .num { width:22px; height:22px; border-radius:50%; background:#eaf2ff; color:var(--as-blue); font-size:11px; display:flex; align-items:center; justify-content:center; }
    .as-panel { background:var(--as-soft); border:1px solid #e8eef6; border-radius:12px; padding:16px; }

    .as-field label { display:block; font-size:12px; font-weight:700; color:var(--as-muted); margin-bottom:6px; }
    .as-field .req { color:#dc2626; }
    .as-input-wrap { position:relative; }
    .as-input-wrap i { position:absolute; top:50%; transform:translateY(-50%); inset-inline-start:12px; color:#94a3b8; pointer-events:none; }
    .as-page .form-control { height:44px; border-radius:10px; border:1px solid #d6dee9; background:#fff; font-size:14px; box-shadow:none; }
    .as-page .form-control:focus { border-color:var(--as-blue); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
    .as-input-wrap .form-control { padding-inline-start:36px; }
    .as-page .select2-container .select2-selection--single { height:44px; border-radius:10px; border:1px solid #d6dee9; }
    .as-page .select2-container .select2-selection--single .select2-selection__rendered { line-height:42px; padding-inline:14px; }
    .as-page .select2-container .select2-selection--single .select2-selection__arrow { height:42px; }

    .as-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
    .as-chip { border:1px solid #d6dee9; background:#fff; color:var(--as-navy); font-size:12px; font-weight:700; padding:6px 12px; border-radius:20px; cursor:pointer; transition:.15s; }
    .as-chip:hover, .as-chip.is-active { background:var(--as-blue); border-color:var(--as-blue); color:#fff; }

    .as-hint { display:flex; gap:8px; align-items:flex-start; margin-top:12px; padding:10px 12px; border-radius:10px; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; font-size:12px; line-height:1.7; }
    .as-hint[hidden] { display:none; }

    .as-actions { display:flex; justify-content:center; gap:12px; padding:18px 28px 26px; border-top:1px solid var(--as-line); background:#fcfdff; }
    .as-btn { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 26px; border-radius:10px; font-weight:800; font-size:14px; border:0; cursor:pointer; transition:.15s; }
    .as-btn--primary { background:var(--as-blue); color:#fff; box-shadow:0 8px 18px rgba(37,99,235,.25); }
    .as-btn--primary:hover { background:#1d4ed8; }
    .as-btn--ghost { background:#fff; color:var(--as-muted); border:1px solid #d6dee9; }
    .as-btn--ghost:hover { color:var(--as-navy); border-color:#94a3b8; }

    @media (max-width: 767px) {
        .as-card__head, .as-card__body, .as-actions { padding-inline:16px; }
        .as-actions { flex-direction:column; }
        .as-btn { justify-content:center; width:100%; }
    }
</style>
@section('title')
{{ __('home.account_statement') }}@stop
@endsection

    @section('content')

    @if (count($errors) > 0)
    <div class="alert alert-danger">
        <button aria-label="Close" class="close" data-dismiss="alert" type="button"><span aria-hidden="true">&times;</span></button>
        <strong>خطا</strong>
        <ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
    </div>
    @endif

    @php
        $user = auth()->user();
        $isAdminOrManager = !empty(array_intersect(['Admin', 'Manger'], (array) $user->roles_name));
        $accountsQuery = App\Models\financial_accounts::with('customer');
        if (!$isAdminOrManager) {
            $accountsQuery->whereIn('orginal_type', [1, 2, 5, 6, 7, 8]);
        }
        $accounts = $accountsQuery->get();
    @endphp

    <div class="row as-page">
        <div class="col-xl-12">
            <form action="{{ url(Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocale() . '/' . ($page = 'account_statement')) }}" method="POST" role="search" autocomplete="off" id="as-form">
                {{ csrf_field() }}

                <div class="as-card mg-b-20">
                    <div class="as-card__head">
                        <div class="as-card__title">
                            <div class="as-card__icon"><i class="fas fa-file-invoice-dollar"></i></div>
                            <div>
                                <h4>{{ __('home.account_statement') }}</h4>
                                <p>اختر الفترة والحساب، ويمكنك التصفية حسب الفرع أو مركز التكلفة</p>
                            </div>
                        </div>
                    </div>

                    <div class="as-card__body">
                        {{-- 1. الفترة --}}
                        <div class="as-section">
                            <div class="as-section__label"><span class="num">1</span> الفترة</div>
                            <div class="as-panel">
                                <div class="row">
                                    <div class="col-md-6 as-field mb-3 mb-md-0">
                                        <label>{{ __('report.fromdate') }} <span class="req">*</span></label>
                                        <div class="as-input-wrap">
                                            <i class="fas fa-calendar-alt"></i>
                                            <input class="form-control fc-datepicker" id="as-start" name="start_at" value="{{ $start_at ?? date('Y-m-01') }}" placeholder="YYYY-MM-DD" type="text" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6 as-field">
                                        <label>{{ __('report.todate') }} <span class="req">*</span></label>
                                        <div class="as-input-wrap">
                                            <i class="fas fa-calendar-alt"></i>
                                            <input class="form-control fc-datepicker" id="as-end" name="end_at" value="{{ $end_at ?? date('Y-m-d') }}" placeholder="YYYY-MM-DD" type="text" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="as-chips">
                                    <button type="button" class="as-chip" data-range="today">اليوم</button>
                                    <button type="button" class="as-chip is-active" data-range="month">هذا الشهر</button>
                                    <button type="button" class="as-chip" data-range="last-month">الشهر الماضي</button>
                                    <button type="button" class="as-chip" data-range="quarter">آخر 3 شهور</button>
                                    <button type="button" class="as-chip" data-range="year">هذه السنة</button>
                                </div>
                            </div>
                        </div>

                        {{-- 2. الحساب --}}
                        <div class="as-section">
                            <div class="as-section__label"><span class="num">2</span> الحساب</div>
                            <div class="as-panel">
                                <div class="as-field">
                                    <label>{{ __('home.saerch_by_numberaccount_or_name') }}</label>
                                    <select class="form-control select2" name="supplierId" required>
                                        <option value="-">{{ __('home.acount_name') }}</option>
                                        @foreach ($accounts as $section)
                                            <option value="{{ $section->id }}">
                                                {{ $section->name }} - {{ $section->customer->phone ?? 'بدون رقم' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        {{-- 3. التصفية --}}
                        <div class="as-section">
                            <div class="as-section__label"><span class="num">3</span> التصفية <small class="text-muted font-weight-normal">(اختياري)</small></div>
                            <div class="as-panel">
                                <div class="row">
                                    <div class="col-md-6 as-field mb-3 mb-md-0">
                                        <label>{{ __('users.branch') }}</label>
                                        <select class="form-control" name="branch">
                                            <option value="-" selected>{{ __('users.allbranchs') }}</option>
                                            @foreach (App\Models\branchs::get() as $branch)
                                                <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6 as-field">
                                        <label>{{ __('home.cost_center') }}</label>
                                        <select class="form-control" name="cost_center" id="as-cost-center">
                                            <option value="-" selected>{{ __('home.all') }}</option>
                                            @foreach (App\Models\Cost_centers::orderBy('id')->get() as $cc)
                                                <option value="{{ $cc->id }}">{{ App::getLocale() == 'ar' ? $cc->cost_center_ar : $cc->cost_center_en }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="as-hint" id="as-cc-hint" hidden>
                                    <i class="fas fa-info-circle mt-1"></i>
                                    <span>عند اختيار مركز تكلفة، يعرض الكشف حركات هذا المركز فقط، والرصيد الافتتاحي والرصيد الجاري يُحسبان على حركاته فقط وليس رصيد الحساب بالكامل.</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="as-actions">
                        <button type="submit" class="as-btn as-btn--primary"><i class="las la-search"></i> {{ __('home.search') }}</button>
                        <button type="button" class="as-btn as-btn--ghost" id="as-reset"><i class="las la-redo-alt"></i> مسح الاختيارات</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</div>
</div>
@endsection

@section('js')
<script src="{{ URL::asset('assets/plugins/jquery-ui/ui/widgets/datepicker.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/select2/js/select2.min.js') }}"></script>

@if(session('error'))
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        Swal.fire({ icon: 'error', title: 'خطأ...', text: "{{ session('error') }}", confirmButtonText: 'حسناً' });
    </script>
@endif

<script>
    $(function () {
        $('.fc-datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
        $('.as-page .select2').select2({ width: '100%', dir: '{{ App::getLocale() == "ar" ? "rtl" : "ltr" }}' });

        function fmt(d) {
            var m = ('0' + (d.getMonth() + 1)).slice(-2), day = ('0' + d.getDate()).slice(-2);
            return d.getFullYear() + '-' + m + '-' + day;
        }

        // اختصارات الفترة
        $('.as-chip').on('click', function () {
            var now = new Date(), start = new Date(now), end = new Date(now);
            switch ($(this).data('range')) {
                case 'today': break;
                case 'month': start = new Date(now.getFullYear(), now.getMonth(), 1); break;
                case 'last-month':
                    start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
                    end = new Date(now.getFullYear(), now.getMonth(), 0); break;
                case 'quarter': start = new Date(now.getFullYear(), now.getMonth() - 2, 1); break;
                case 'year': start = new Date(now.getFullYear(), 0, 1); break;
            }
            $('#as-start').val(fmt(start));
            $('#as-end').val(fmt(end));
            $('.as-chip').removeClass('is-active');
            $(this).addClass('is-active');
        });

        $('#as-start, #as-end').on('change', function () { $('.as-chip').removeClass('is-active'); });

        // تنبيه الأرصدة عند اختيار مركز تكلفة
        $('#as-cost-center').on('change', function () {
            $('#as-cc-hint').prop('hidden', $(this).val() === '-');
        });

        // مسح الاختيارات
        $('#as-reset').on('click', function () {
            $('.as-chip[data-range="month"]').trigger('click');
            $('select[name="supplierId"]').val('-').trigger('change');
            $('select[name="branch"]').val('-');
            $('#as-cost-center').val('-').trigger('change');
        });

        setTimeout(function () { $('.alert').fadeOut(500); }, 4000);
    });
</script>
@endsection