@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/pages/page-profile.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">Skipped Months</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url($alias.'/cooperative-loans') }}">Cooperative Loan</a></li>
                    <li class="breadcrumb-item"><a href="{{ url($alias.'/cooperative-loans/'.$loan->id.'/view') }}">Loan #{{ $loan->id }}</a></li>
                    <li class="breadcrumb-item active">Skipped Months</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">
            <a href="{{ url($alias.'/cooperative-loans/'.$loan->id.'/view') }}" class="btn btn-secondary btn-sm"><i data-feather="arrow-left-circle"></i> Back</a>
        </div>
    </div>
@endpush

@section('content')
<section id="dashboard-ecommerce">
    <div class="row match-height">
        <div class="col-lg-12 col-md-12 col-12">
            <div class="card invoice-preview-card mb-0">
                <div class="card-body invoice-padding pb-0">
                    <div class="d-flex flex-md-row flex-column invoice-spacing mt-1 mb-1 justify-content-between">
                        <div class="logo-wrapper d-flex align-items-center">
                            <h3 class="text-primary invoice-logo mb-0">Skipped Months — Loan #{{ $loan->id }}</h3>
                        </div>
                        <span class="align-self-center">{{ optional($loan->employee)->name }} {{ optional($loan->employee)->employee_code ? '(' . $loan->employee->employee_code . ')' : '' }}</span>
                    </div>
                    <hr class="invoice-spacing" />
                </div>

                <div class="card-body invoice-padding pt-0">
                    @if($loan->status == 'Active')
                    <div class="row invoice-spacing mb-3">
                        <div class="col-12">
                            <button type="button" class="btn btn-outline-warning" data-bs-toggle="modal" data-bs-target="#skip-month-popup">Skip a Month</button>
                        </div>
                    </div>
                    @endif

                    <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Month/Year</th>
                                <th>Remarks</th>
                                <th>Skipped On</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($loan->monthlySkips as $skip)
                            <tr>
                                <td>{{ date('M', mktime(0,0,0,$skip->month,1)) . ' ' . $skip->year }}</td>
                                <td>{{ $skip->remarks ?? '-' }}</td>
                                <td>{{ $skip->created_at }}</td>
                            </tr>
                            @empty
                            <tr><td colspan="3" class="text-center">No months skipped for this loan yet</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if($loan->status == 'Active')
    <div class="modal fade" id="skip-month-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">Skip a Month</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">EMI will not be deducted for the selected month. Interest is still charged as usual.</div>
                    <form id="skip-month-form">
                        {{ csrf_field() }}
                        <input type="hidden" name="id" value="{{ $loan->id }}">
                        <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="skip-month" name="month">
                                    @foreach(['January','February','March','April','May','June','July','August','September','October','November','December'] as $i => $monthName)
                                        <option value="{{ $i + 1 }}" {{ (int) date('n') === $i + 1 ? 'selected' : '' }}>{{ $monthName }}</option>
                                    @endforeach
                                </select>
                                <span class="text-danger" id="err-skip-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="skip-year" name="year" value="{{ date('Y') }}">
                                <span class="text-danger" id="err-skip-year"></span>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Remarks</label>
                                <input type="text" class="form-control" id="skip-remarks" name="remarks">
                                <span class="text-danger" id="err-skip-remarks"></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="skip-month-btn" class="btn btn-warning">Skip This Month</button>
                </div>
            </div>
        </div>
    </div>
    @endif
</section>
@endsection

@push('footer-script')
<script>
$(function () {
    function showSuccessAndReload(message) {
        Swal.fire({
            title: 'Success',
            text: message,
            icon: 'success',
            confirmButtonColor: '#00c292',
            confirmButtonText: 'Ok'
        }).then(function () {
            window.location.reload();
        });
    }

    function showError(message) {
        Swal.fire({
            title: 'Error!',
            text: message,
            icon: 'warning',
            confirmButtonColor: '#DD6B55',
            confirmButtonText: 'Ok'
        });
    }

    $('#skip-month-btn').on('click', function () {
        $('#err-skip-month').text('');
        $('#err-skip-year').text('');
        $('#err-skip-remarks').text('');

        var monthName = $('#skip-month option:selected').text();
        var year = $('#skip-year').val();

        Swal.fire({
            title: "@lang('messages.sweetAlertTitle')",
            text: 'Skip EMI for ' + monthName + ' ' + year + '? Interest will still be charged for this month.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#f8b100',
            confirmButtonText: 'Yes, skip it',
            cancelButtonText: 'Cancel'
        }).then(function (result) {
            if (!result.isConfirmed) {
                return;
            }

            $.ajax({
                url: "{!! route('cooperativeloan.skip-month', ['alias' => $alias]) !!}",
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    id: {{ $loan->id }},
                    month: $('#skip-month').val(),
                    year: $('#skip-year').val(),
                    remarks: $('#skip-remarks').val()
                },
                success: function (res) {
                    if (res.status === 'fail') {
                        showError(res.message || 'Unable to skip this month');
                        return;
                    }

                    $('#skip-month-popup').modal('hide');
                    showSuccessAndReload(res.message || 'Month skipped successfully');
                },
                error: function (xhr) {
                    if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function (field, messages) {
                            $('#err-skip-' + field).text(messages[0]);
                        });
                    } else {
                        showError((xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Unable to skip this month');
                    }
                }
            });
        });
    });
});
</script>
@endpush