@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">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Cooperative Loan</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active">Cooperative Loan</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.'/cooperative-loans/create') }}" class="btn btn-primary btn-sm"><i data-feather="plus"></i> New Loan</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>
        <button type="button" class="btn btn-outline-warning btn-sm" data-bs-toggle="modal" data-bs-target="#reconcile-missed-months-popup" title="Flag a past month's missed EMI/interest for loans whose payslip never got generated">Reconcile Missed Months</button>
        <a href="{{ url($alias.'/cooperative-loans/month-status-report') }}" class="btn btn-outline-info btn-sm">Month Status Report</a>
        <a href="{{ url($alias.'/cooperative-loans/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.'/cooperative-loans') }}" 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.'/cooperative-loans') }}" 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-3 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_loans'] }}</h5>
                        <span>Total Loans</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-3 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_loans'] }}</h5>
                        <span>Active Loans</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-3 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_disbursed_amount'], 2) }}</h5>
                        <span>Disbursed Amount</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 class="col-lg-3 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_outstanding_balance'], 2) }}</h5>
                        <span>Outstanding Balance</span>
                    </div>
                    <div class="avatar bg-light-warning p-50">
                        <span class="avatar-content">
                            <i data-feather="alert-circle" 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">
                    <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Employee</th>
                                <th>Requested Amount</th>
                                <th>EMI Amount</th>
                                <th>Outstanding Balance</th>
                                <th>Status</th>
                                <th>Created Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($loans as $key => $loan)
                            <tr>
                                <td>{{ $loans->firstItem() + $key }}</td>
                                <td>{{ optional($loan->employee)->name ?? '-' }}</td>
                                <td>{{ $loan->requested_amount }}</td>
                                <td>{{ $loan->emi_amount }}</td>
                                <td>{{ $loan->outstanding_balance }}</td>
                                <td>
                                    <span class="fw-bold badge rounded-pill badge-light-{{ $loan->status == 'Active' ? 'success' : ($loan->status == 'ForceClosed' ? 'warning' : 'secondary') }}">{{ $loan->status }}</span>
                                </td>
                                <td>{{ $loan->created_at }}</td>
                                <td>
                                    <a class="btn btn-sm btn-icon" href="{{ url($alias.'/cooperative-loans/'.$loan->id.'/view') }}">
                                        <i data-feather="eye" class="font-small-4"></i>
                                    </a>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="8" class="text-center">No cooperative loans found</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                    </div>
                    <div class="p-1">
                        {{ $loans->appends($nextQuery)->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="reconcile-missed-months-popup" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <h5 class="modal-title">Reconcile Missed Months</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-2">
                    <div class="alert alert-warning py-1 px-2">Checks the selected month for any active loan whose employee never had a payslip generated, and flags the missed interest as backlog. Only a past (completed) month can be selected.</div>
                    <form id="reconcile-missed-months-form">
                        {{ csrf_field() }}
                        <div class="row">
                            <div class="col-6 mb-1">
                                <label class="form-label">Month <span class="text-danger">*</span></label>
                                <select class="form-control" id="reconcile-month" name="month">
                                    @foreach(['January','February','March','April','May','June','July','August','September','October','November','December'] as $i => $monthName)
                                        <option value="{{ $i + 1 }}">{{ $monthName }}</option>
                                    @endforeach
                                </select>
                                <span class="text-danger" id="err-month"></span>
                            </div>
                            <div class="col-6 mb-1">
                                <label class="form-label">Year <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="reconcile-year" name="year">
                                <span class="text-danger" id="err-year"></span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" id="reconcile-missed-months-btn" class="btn btn-warning">Run Reconciliation</button>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('footer-script')
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>
<script>
$(function () {
    if (typeof feather !== 'undefined') {
        feather.replace({ width: 14, height: 14 });
    }

    // width: '100%' (instead of select2's default 'auto') because this select lives inside
    // a Bootstrap offcanvas that's hidden at page load — select2 can't measure a hidden
    // container's width, which otherwise leaves the search box collapsed/broken until the
    // panel has been opened once.
    $('.select2').select2({ width: '100%' });

    // Default the popup to last calendar month — the most common case (this month's payroll
    // likely isn't finished yet, so it can't be reconciled anyway per the backend validation).
    var lastMonthDate = new Date();
    lastMonthDate.setDate(1);
    lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
    $('#reconcile-month').val(lastMonthDate.getMonth() + 1);
    $('#reconcile-year').val(lastMonthDate.getFullYear());

    $('#reconcile-missed-months-btn').on('click', function () {
        $('#err-month').text('');
        $('#err-year').text('');

        Swal.fire({
            title: "@lang('messages.sweetAlertTitle')",
            text: 'This checks the selected month for any active loan whose employee never had a payslip generated, and flags the missed interest as backlog. Continue?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#f8b100',
            confirmButtonText: 'Yes, run it',
            cancelButtonText: 'Cancel'
        }).then(function (result) {
            if (!result.isConfirmed) {
                return;
            }

            $.ajax({
                url: "{!! route('cooperativeloan.reconcile-missed-months', ['alias' => $alias]) !!}",
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    month: $('#reconcile-month').val(),
                    year: $('#reconcile-year').val()
                },
                success: function (res) {
                    if (res.status === 'fail') {
                        Swal.fire({ title: 'Error!', text: res.message || 'Unable to reconcile', icon: 'warning', confirmButtonColor: '#DD6B55' });
                        return;
                    }

                    Swal.fire({
                        title: 'Success',
                        text: res.message || 'Missed months reconciled successfully',
                        icon: 'success',
                        confirmButtonColor: '#00c292',
                        confirmButtonText: 'Ok'
                    }).then(function () {
                        window.location.reload();
                    });
                },
                error: function (xhr) {
                    if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function (field, messages) {
                            $('#err-' + field).text(messages[0]);
                        });
                    } else {
                        Swal.fire({
                            title: 'Error!',
                            text: (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Unable to reconcile',
                            icon: 'warning',
                            confirmButtonColor: '#DD6B55'
                        });
                    }
                }
            });
        });
    });
});
</script>
@endpush