@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Thrift Fund</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active">Thrift Fund</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@push('prev-next-head')
    <div class="content-header-right text-end col-md-3 col-12">
        <div class="form-group breadcrumb-right">
            <button class="btn-icon btn btn-primary btn-round btn-sm" type="button"
                data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd">
                <i data-feather="filter"></i>
            </button>
            <a href="{{ url($alias.'/thrift-funds/create') }}" class="btn btn-primary btn-sm"><i data-feather="plus"></i> New Enrollment</a>
        </div>
    </div>
    <div class="col-12 text-end mb-1">
        <a href="{{ url($alias.'/cooperative-loans/configuration') }}" class="btn-icon btn btn-secondary btn-round btn-sm" title="Configuration">
            <i data-feather="settings"></i>
        </a>
        <a href="{{ url($alias.'/thrift-funds/import') }}" class="btn btn-outline-secondary btn-sm">Import</a>
    </div>
@endpush

@section('content')
<section id="column-search-datatable">
    <form method="GET" action="{{ url($alias.'/thrift-funds') }}" id="filter-form">
        <div class="offcanvas-end-example">
            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
                <div class="offcanvas-header">
                    <h5 id="offcanvasEndLabel" class="offcanvas-title">Filter</h5>
                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body my-auto mx-0 flex-grow-0">
                    <div class="row">
                        <div class="col-sm-12 mt-1">
                            <div class="form-label-group">
                                <label class="form-label mt-2">Employee</label>
                                <select class="form-control select2" name="employee_id">
                                    <option value="">All Employees</option>
                                    @foreach($employees as $employee)
                                        <option value="{{ $employee->id }}" {{ (string) request('employee_id') === (string) $employee->id ? 'selected' : '' }}>{{ $employee->name }} ({{ $employee->employee_code }})</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12 mt-1">
                            <div class="form-label-group">
                                <label class="form-label mt-2">Status</label>
                                <select class="form-control" name="status">
                                    <option value="">All Status</option>
                                    @foreach($statuses as $s)
                                        <option value="{{ $s }}" {{ request('status') === $s ? 'selected' : '' }}>{{ $s }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary mt-2 mb-1 d-grid w-100 d-flex justify-content-center" data-bs-dismiss="offcanvas" aria-label="Close"><i data-feather="search" class="me-2"></i> Search</button>
                    <a href="{{ url($alias.'/thrift-funds') }}" class="btn btn-outline-secondary mb-1 d-grid w-100 d-flex justify-content-center">Reset</a>
                </div>
            </div>
        </div>
    </form>

    <div class="row">
        <div class="col-lg-4 col-sm-6">
            <div class="card">
                <div class="card-body d-flex align-items-center justify-content-between">
                    <div>
                        <h5 class="fw-bolder mb-75">{{ $summary['total_funds'] }}</h5>
                        <span>Total Enrollments</span>
                    </div>
                    <div class="avatar bg-light-primary p-50">
                        <span class="avatar-content">
                            <i data-feather="list" class="font-medium-4"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="card">
                <div class="card-body d-flex align-items-center justify-content-between">
                    <div>
                        <h5 class="fw-bolder mb-75">{{ $summary['active_funds'] }}</h5>
                        <span>Active Funds</span>
                    </div>
                    <div class="avatar bg-light-success p-50">
                        <span class="avatar-content">
                            <i data-feather="check-circle" class="font-medium-4"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="card">
                <div class="card-body d-flex align-items-center justify-content-between">
                    <div>
                        <h5 class="fw-bolder mb-75">{{ number_format($summary['total_closing_balance'], 2) }}</h5>
                        <span>Total Closing Balance</span>
                    </div>
                    <div class="avatar bg-light-info p-50">
                        <span class="avatar-content">
                            <i data-feather="dollar-sign" class="font-medium-4"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-datatable">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Employee</th>
                                <th>Opening Balance</th>
                                <th>Closing Balance</th>
                                <th>Status</th>
                                <th>Enrolled Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($funds as $key => $fund)
                            <tr>
                                <td>{{ $funds->firstItem() + $key }}</td>
                                <td>{{ optional($fund->employee)->name ?? '-' }} @if(optional($fund->employee)->employee_code)({{ $fund->employee->employee_code }})@endif</td>
                                <td>{{ $fund->opening_balance }}</td>
                                <td>{{ $fund->closing_balance }}</td>
                                <td>
                                    <span class="fw-bold badge rounded-pill badge-light-{{ $fund->status == 'Active' ? 'success' : 'secondary' }}">{{ $fund->status }}</span>
                                </td>
                                <td>{{ $fund->enrolled_date }}</td>
                                <td>
                                    <a class="btn btn-sm btn-icon" href="{{ url($alias.'/thrift-funds/'.$fund->id.'/view') }}">
                                        <i data-feather="eye" class="font-small-4"></i>
                                    </a>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="7" class="text-center">No Thrift Fund enrollments found</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                    <div class="p-1">
                        {{ $funds->appends($nextQuery)->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('footer-script')
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>
    <script>
        @if(session('status'))
            Swal.fire({
                title: "{{ session('status')['header'] ?? '' }}",
                text: "{{ session('status')['messages'][0] ?? '' }}",
                icon: "{{ session('status')['code'] === 'success' ? 'success' : 'error' }}",
                confirmButtonColor: "#00c292"
            });
        @endif

        $(function () {
            if (typeof feather !== 'undefined') {
                feather.replace({ width: 14, height: 14 });
            }
            $('.select2').select2();
        });
    </script>
@endpush