@extends('backend.layout.main')

@section('content')
@if(session()->has('message'))
    <div class="alert alert-success text-center">{{session('message')}}</div>
@endif
@if(session()->has('not_permitted'))
    <div class="alert alert-danger text-center">{{session('not_permitted')}}</div>
@endif
@if($errors->any())
    <div class="alert alert-danger text-center">{{$errors->first()}}</div>
@endif

<?php $mainAccount = $lims_account_all->first(); ?>
<section>
    <div class="container-fluid">
        <div class="d-flex flex-wrap align-items-center justify-content-between mb-3">
            <div>
                <h3 class="mb-1">{{trans('file.Main Cash Account')}}</h3>
                <p class="text-muted mb-0">{{trans('file.All system cash movements use this account')}}</p>
            </div>
            <button class="btn btn-success" data-toggle="modal" data-target="#owner-deposit-modal">
                <i class="dripicons-plus"></i> {{trans('file.Owner Deposit')}}
            </button>
        </div>

        <nav class="account-period-filter mb-3" aria-label="{{trans('file.Time Period')}}">
            @foreach([
                'all' => 'All Time',
                'day' => 'Today',
                'week' => 'This Week',
                'month' => 'This Month',
                'year' => 'This Year',
            ] as $period => $label)
                <a href="{{ route('accounts.index', array_merge(request()->except(['period', 'page', 'start_date', 'end_date']), ['period' => $period])) }}"
                   class="{{ $selectedPeriod === $period ? 'active' : '' }}">
                    {{trans('file.' . $label)}}
                </a>
            @endforeach
        </nav>

        <form method="GET" action="{{route('accounts.index')}}" class="account-filter-panel mb-4">
            <input type="hidden" id="account-period" name="period" value="{{$selectedPeriod}}">
            <div class="row">
                <div class="col-lg-2 col-md-4 form-group">
                    <label>{{trans('file.Start Date')}}</label>
                    <input type="date" id="filter-start-date" name="start_date" class="form-control" value="{{request('start_date')}}">
                </div>
                <div class="col-lg-2 col-md-4 form-group">
                    <label>{{trans('file.End Date')}}</label>
                    <input type="date" id="filter-end-date" name="end_date" class="form-control" value="{{request('end_date')}}">
                </div>
                <div class="col-lg-2 col-md-4 form-group">
                    <label>{{trans('file.Transaction Type')}}</label>
                    <select name="category" class="form-control">
                        <option value="">{{trans('file.All Transaction Types')}}</option>
                        @foreach($transactionCategories as $category)
                            <option value="{{$category}}" {{request('category') === $category ? 'selected' : ''}}>
                                {{trans('file.' . $category)}}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-2 col-md-4 form-group">
                    <label>{{trans('file.Direction')}}</label>
                    <select name="direction" class="form-control">
                        <option value="">{{trans('file.All Directions')}}</option>
                        <option value="in" {{request('direction') === 'in' ? 'selected' : ''}}>{{trans('file.Cash In')}}</option>
                        <option value="out" {{request('direction') === 'out' ? 'selected' : ''}}>{{trans('file.Cash Out')}}</option>
                    </select>
                </div>
                <div class="col-lg-2 col-md-4 form-group">
                    <label>{{trans('file.Reference')}}</label>
                    <input type="search" name="reference" class="form-control" value="{{request('reference')}}" placeholder="{{trans('file.Search Reference')}}">
                </div>
                <div class="col-lg-2 col-md-4 form-group filter-actions">
                    <button type="submit" class="btn btn-success">
                        <i class="dripicons-search"></i> {{trans('file.Apply Filter')}}
                    </button>
                    <a href="{{route('accounts.index', ['period' => 'all'])}}" class="btn btn-outline-secondary" title="{{trans('file.Reset Filters')}}">
                        <i class="dripicons-clockwise"></i>
                    </a>
                </div>
            </div>
        </form>

        <div class="account-summary-grid mb-4">
            <div class="account-summary-card summary-balance">
                <span>{{trans('file.Current Cash Balance')}}</span>
                <strong>{{\App\Support\NumberFormatter::natural((float) optional($mainAccount)->total_balance, config('decimal'))}}</strong>
            </div>
            <div class="account-summary-card summary-in">
                <span>{{trans('file.Filtered Cash In')}}</span>
                <strong>{{\App\Support\NumberFormatter::natural($filteredCashIn, config('decimal'))}}</strong>
            </div>
            <div class="account-summary-card summary-out">
                <span>{{trans('file.Filtered Cash Out')}}</span>
                <strong>{{\App\Support\NumberFormatter::natural($filteredCashOut, config('decimal'))}}</strong>
            </div>
            <div class="account-summary-card {{$netChange >= 0 ? 'summary-net-positive' : 'summary-net-negative'}}">
                <span>{{trans('file.Net Change')}}</span>
                <strong>{{\App\Support\NumberFormatter::natural($netChange, config('decimal'))}}</strong>
            </div>
        </div>

        <div class="account-ledger">
            <div class="ledger-heading">
                <div>
                    <h4>{{trans('file.Recent Transactions')}}</h4>
                    <small>{{$filterLabel}}</small>
                </div>
                <span>{{$recent_transactions->total()}} {{trans('file.Records')}}</span>
            </div>
            <div class="table-responsive">
                <table class="table mb-0">
                    <thead>
                        <tr>
                            <th>{{trans('file.Date')}}</th>
                            <th>{{trans('file.reference')}}</th>
                            <th>{{trans('file.Transaction Type')}}</th>
                            <th>{{trans('file.Cash In')}}</th>
                            <th>{{trans('file.Cash Out')}}</th>
                            <th>{{trans('file.Balance')}}</th>
                            <th>{{trans('file.Note')}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recent_transactions as $transaction)
                            <tr>
                                <td>{{$transaction->transaction_date->format(config('date_format') ?: 'd-m-Y')}}</td>
                                <td>{{$transaction->reference_no ?: '-'}}</td>
                                <td>{{trans('file.' . $transaction->category)}}</td>
                                <td class="text-success">{{$transaction->direction === 'in' ? \App\Support\NumberFormatter::natural($transaction->amount, config('decimal')) : '-'}}</td>
                                <td class="text-danger">{{$transaction->direction === 'out' ? \App\Support\NumberFormatter::natural($transaction->amount, config('decimal')) : '-'}}</td>
                                <td>{{\App\Support\NumberFormatter::natural($transaction->balance_after, config('decimal'))}}</td>
                                <td>{{$transaction->description}}</td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="text-center text-muted">{{trans('file.No transactions recorded')}}</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($recent_transactions->hasPages())
                <div class="ledger-pagination">
                    {{$recent_transactions->links('pagination::bootstrap-4')}}
                </div>
            @endif
        </div>
    </div>
</section>

<div id="owner-deposit-modal" class="modal fade text-left" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            {!! Form::open(['route' => 'accounts.ownerDeposit', 'method' => 'post']) !!}
            <div class="modal-header">
                <h5 class="modal-title">{{trans('file.Owner Deposit')}}</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>{{trans('file.Date')}}</label>
                    <input type="date" name="transaction_date" class="form-control" value="{{date('Y-m-d')}}">
                </div>
                <div class="form-group">
                    <label>{{trans('file.Amount')}} *</label>
                    <input type="number" name="amount" min="0.01" step="0.01" class="form-control" required>
                </div>
                <div class="form-group">
                    <label>{{trans('file.Note')}}</label>
                    <textarea name="note" rows="3" class="form-control"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{trans('file.Close')}}</button>
                <button type="submit" class="btn btn-success">{{trans('file.Save')}}</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
@endsection

@push('css')
<style>
    .account-period-filter { display: inline-flex; border: 1px solid #dfe3e8; background: #fff; }
    .account-period-filter a { min-width: 88px; padding: 10px 13px; border-inline-end: 1px solid #e7e9ed; color: #666a7d; font-size: 12px; font-weight: 600; text-align: center; }
    .account-period-filter a:last-child { border-inline-end: 0; }
    .account-period-filter a:hover { color: #26951f; text-decoration: none; }
    .account-period-filter a.active { background: #26951f; color: #fff; }
    .account-filter-panel { padding: 16px 16px 0; border: 1px solid #e5e8ed; background: #fff; box-shadow: 0 5px 18px rgba(33, 38, 49, .04); }
    .account-filter-panel label { color: #686c7e; font-size: 11px; font-weight: 600; }
    .filter-actions { display: flex; align-items: flex-end; gap: 7px; }
    .filter-actions .btn { min-height: 42px; }
    .account-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .account-summary-card { min-height: 96px; padding: 17px; border: 1px solid #e5e8ed; border-top: 3px solid #777b8d; background: #fff; box-shadow: 0 5px 18px rgba(33, 38, 49, .04); }
    .account-summary-card span { display: block; margin-bottom: 7px; color: #777b8d; font-size: 11px; font-weight: 600; }
    .account-summary-card strong { color: #36394b; font-size: 22px; }
    .summary-balance { border-top-color: #276cbd; }
    .summary-in, .summary-net-positive { border-top-color: #16844b; }
    .summary-out, .summary-net-negative { border-top-color: #bd453c; }
    .account-ledger { border: 1px solid #e5e8ed; background: #fff; box-shadow: 0 5px 18px rgba(33, 38, 49, .04); }
    .ledger-heading { display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: 13px 18px; border-bottom: 1px solid #eceef2; }
    .ledger-heading h4 { margin: 0 0 3px; font-size: 15px; }
    .ledger-heading small, .ledger-heading > span { color: #848899; font-size: 11px; }
    .account-ledger th { padding: 11px 14px; border-top: 0; background: #f7f8fa; color: #717587; font-size: 11px; white-space: nowrap; }
    .account-ledger td { padding: 12px 14px; border-top-color: #edf0f3; color: #565a6d; font-size: 12px; vertical-align: middle; }
    .ledger-pagination { display: flex; justify-content: flex-end; padding: 14px 16px 4px; border-top: 1px solid #eceef2; }
    @media (max-width: 991px) {
        .account-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 575px) {
        .account-period-filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
        .account-period-filter a { min-width: 0; padding: 9px 5px; }
        .account-summary-grid { grid-template-columns: 1fr; }
        .filter-actions .btn-success { flex: 1; }
    }
</style>
@endpush

@push('scripts')
<script>
    $("ul#account").siblings('a').attr('aria-expanded', 'true');
    $("ul#account").addClass('show');
    $("ul#account #account-list-menu").addClass('active');

    $('#filter-start-date, #filter-end-date').on('change', function () {
        $('#account-period').val('custom');
    });
</script>
@endpush
