@extends('layouts.master')
@section('title', 'Add Loan Entry')

@push('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@section('content')
@include('partials.header')
@include('partials.sidebar')

<main class="app-content">
    <div class="app-title">
        <div>
            <h1><i class="fa fa-money"></i> Add Loan Entry</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item">Loans</li>
            <li class="breadcrumb-item"><a href="#">Create</a></li>
        </ul>
    </div>

    <div class="row">
        <div class="col-md-12">

            <div class="tile">
                <h3 class="tile-title">Loan Entry Form</h3>
                <div class="tile-body">

                    @if(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif

                    <form method="POST" action="{{ route('loan.store') }}">
                        @csrf

                        <div class="row">
                            <div class="form-group col-md-4">
                                <label>Select Employee</label>
                                <select name="employee_id" id="employee_id" class="form-control select2 border" required>
                                    <option value="">-- Select Employee --</option>
                                    @foreach($employees as $emp)
                                        <option value="{{ $emp->id }}" data-loanacc="{{ $emp->loan_acc }}">{{ strtoupper($emp->name) }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group col-md-4">
                                <label>Loan Account</label>
                                <input type="text" id="loan_acc" name="loan_acc" class="form-control border" readonly>
                            </div>

                            <div class="form-group col-md-4">
                                <label>Paid From (Cash/Bank)</label>
                                <select name="petty_cash_account" class="form-control select2 border" required>
                                    <option value="">-- Select Account --</option>
                                    @foreach($pettyCashAccounts as $account)
                                        <option value="{{ $account->Account_ID }}">{{ strtoupper($account->Account_Title) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-4">
                                <label>Loan Date</label>
                                <input type="date" name="loan_date" class="form-control border" required>
                            </div>

                            <div class="form-group col-md-4">
                                <label>Loan Amount</label>
                                <input type="number" name="amount" class="form-control border" min="1" required>
                            </div>

                            <div class="form-group col-md-4">
                                <label>Monthly Deduction</label>
                                <input type="number" name="deduction" class="form-control border">
                            </div>
                        </div>

                        <div class="form-group mt-3">
                            <button type="submit" class="btn btn-primary">Save Loan</button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</main>

@push('js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function () {
        $('.select2').select2({ width: '100%' });

        $('#employee_id').change(function () {
            const selected = $(this).find(':selected');
            $('#loan_acc').val(selected.data('loanacc') || '');
        });
    });
</script>
@endpush
@endsection