@extends('app-new')

@push('head-script')
    <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 - New Enrollment</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url($alias.'/thrift-funds') }}">Thrift Fund</a></li>
                    <li class="breadcrumb-item active">New</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
<section id="basic-form-layouts">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Thrift Fund Enrollment Form</h4>
                </div>
                <div class="card-body">
                    <p class="text-muted">
                        This form enrolls a brand-new employee with an opening balance of <code>0</code> — their
                        first deposit/interest transaction will be created next month (via payroll or a manual
                        credit).
                        <br>
                        For an employee <strong>migrating from another system</strong> with existing balance
                        history, use <a href="{{ url($alias.'/thrift-funds/import') }}">Import</a> instead — it
                        creates the enrollment AND the corresponding ledger transaction(s) in one step, so the
                        migrated balance shows up immediately rather than only from next month onward.
                    </p>
                    <form id="thrift-fund-form">
                        {{ csrf_field() }}
                        <div class="row">
                            <div class="col-md-6 mb-1">
                                <label class="form-label" for="employee_id">Employee <span class="text-danger">*</span></label>
                                <select class="form-control select2" id="employee_id" name="employee_id">
                                    <option value="">Select Employee</option>
                                    @foreach($employees as $employee)
                                        <option value="{{ $employee->id }}">{{ $employee->name }} ({{ $employee->employee_code }})</option>
                                    @endforeach
                                </select>
                                <span class="text-danger" id="err-employee_id"></span>
                            </div>

                            <input type="hidden" id="opening_balance" name="opening_balance" value="0">

                            <div class="col-md-6 mb-1">
                                <label class="form-label" for="enrolled_date">Enrolled Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" id="enrolled_date" name="enrolled_date">
                                <span class="text-danger" id="err-enrolled_date"></span>
                            </div>

                            <div class="col-md-6 mb-1">
                                <label class="form-label" for="remarks">Remarks</label>
                                <input type="text" class="form-control" id="remarks" name="remarks" placeholder="Remarks">
                                <span class="text-danger" id="err-remarks"></span>
                            </div>
                        </div>

                        <div class="form-actions mt-2">
                            <button type="button" id="submit-thrift-fund" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('footer-script')
<script>
var storeUrl = "{!! route('thriftfund.store', ['alias' => $alias]) !!}";

$(function () {
    $('#submit-thrift-fund').on('click', function () {
        $('.text-danger').text('');

        $.ajax({
            url: storeUrl,
            type: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                employee_id: $('#employee_id').val(),
                opening_balance: $('#opening_balance').val(),
                enrolled_date: $('#enrolled_date').val(),
                remarks: $('#remarks').val()
            },
            success: function (res) {
                if (res.status === 'fail') {
                    Swal.fire({ title: 'Error', text: res.message || 'Unable to create Thrift Fund enrollment', icon: 'error', confirmButtonColor: '#DD6B55' }).then(function () {
                        window.location.href = "{{ url($alias.'/thrift-funds') }}";
                    });
                    return;
                }

                Swal.fire({ title: 'Success', text: res.message || 'Thrift Fund enrollment created successfully', icon: 'success', confirmButtonColor: '#00c292' }).then(function () {
                    window.location.href = "{{ url($alias.'/thrift-funds') }}";
                });
            },
            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 create Thrift Fund enrollment', icon: 'error', confirmButtonColor: '#DD6B55' });
                }
            }
        });
    });
});
</script>
@endpush