@extends('layouts.master')

@section('title', 'Advance Against Salary')

@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> Advance Against Salary</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item">Advance</li>
            <li class="breadcrumb-item active">Create</li>
        </ul>
    </div>

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

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

            <!-- Advance Form -->
            <div class="tile">
                <h3 class="tile-title">Advance Entry Form</h3>
                <div class="tile-body">
                    <form method="POST" action="{{ route('advance.store') }}">
                        @csrf

                        <div class="row">
                            <div class="form-group col-md-4">
                                <label for="advance_date">Advance Date</label>
                                <input type="date" name="advance_date" class="form-control border" required value="{{ date('Y-m-d') }}">
                            </div>

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

                            <div class="form-group col-md-4">
                                <label for="advance_acc_display">Advance Account</label>
                                <input type="text" id="advance_acc_display" class="form-control border" readonly placeholder="Will auto-fill after selecting employee">
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-6">
                                <label for="cash_bank_account">Paid From (Cash/Bank)</label>
                                <select name="cash_bank_account" class="form-control select2-cashbank border" required>
                                    <option value="">-- Select Cash/Bank --</option>
                                    @foreach($accounts as $acc)
                                        <option value="{{ $acc->Account_ID }}">{{ strtoupper($acc->Account_Title) }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group col-md-6">
                                <label for="amount">Advance Amount</label>
                                <input type="number" name="amount" class="form-control border" required min="1" placeholder="Enter Amount">
                            </div>
                        </div>

                        <div class="form-group mt-3">
                            <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Save</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-employee').select2({
        width: '100%',
        placeholder: "Select Employee"
    });

    $('.select2-cashbank').select2({
        width: '100%',
        placeholder: "Select Cash/Bank Account"
    });

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