@extends('layouts.app')
@push('style')
    <style>
        /* Page polish */
        .page-header-mini {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .card-compact {
            border: 1px solid #e9ecef;
            border-radius: 14px;
            box-shadow: 0 2px 10px rgba(16, 24, 40, .04);
        }

        .card-compact .card-header {
            border-bottom: 1px solid #eef2f7;
            padding: 1rem 1.25rem;
            background: #fff;
            border-top-left-radius: 14px;
            border-top-right-radius: 14px;
        }

        .card-compact .card-body {
            padding: 1.25rem;
        }

        .form-label {
            font-weight: 600;
        }

        .hint {
            font-size: .85rem;
            color: #64748b;
        }

        .pill {
            display: inline-block;
            font-size: .78rem;
            font-weight: 600;
            padding: .3rem .55rem;
            border-radius: 999px;
            background: #eef2ff;
            color: #3730a3;
        }

        .divider {
            height: 1px;
            background: #eef2f7;
            margin: .75rem 0 1.25rem;
        }

        .summary-box {
            border: 1px dashed #cbd5e1;
            border-radius: 10px;
            padding: .9rem;
            background: #fcfcfd;
        }

        .summary-box .row>div {
            margin-bottom: .4rem;
        }

        .btn-wide {
            min-width: 170px;
        }
    </style>
@endpush

@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="row tablerow">


                <div class="col-12">
                    <div class="page-header-mini">
                        <div>
                            <h5 class="mb-0">Create Salary Advance</h5>
                            <div class="hint">Record an advance for any active employee. This will be stored as a <span
                                    class="pill">type: advance</span> in <code>salary payments</code>.</div>
                        </div>
                        <div>
                            <a href="{{ route('payrolls') }}" class="btn btn-outline-secondary">Back to Payroll</a>
                        </div>
                    </div>

                    <div class="card-compact">
                        <div class="card-header">
                            <strong>Advance Details</strong>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('salary_advance.store') }}" method="POST" id="ajax_form_advance"
                                novalidate>
                                @csrf

                                <div class="row g-4">
                                    {{-- Left column --}}
                                    <div class="col-lg-7">
                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <label class="form-label">Employee <span
                                                        class="text-danger">*</span></label>
                                                <select name="employee_id" id="employee_id"
                                                    class="form-control selectpicker" data-live-search="true" required>
                                                    <option value="">— Select employee —</option>
                                                    @foreach ($employees as $emp)
                                                        <option value="{{ $emp->id }}"
                                                            data-empcode="{{ $emp->employee_id }}"
                                                            data-empname="{{ $emp->name }}">
                                                            {{ $emp->employee_id }} — {{ $emp->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <div class="hint mt-1">Type to search by ID or name.</div>
                                            </div>

                                            <div class="col-md-6">
                                                <label class="form-label">Month <span class="text-danger">*</span></label>
                                                <input type="month" class="form-control" name="month" id="month"
                                                    value="{{ date('Y-m') }}" required>
                                                <div class="hint mt-1">This is the month the advance will be associated
                                                    with.</div>
                                            </div>

                                            <div class="col-md-6">
                                                <label class="form-label">Date <span class="text-danger">*</span></label>
                                                <input type="date" class="form-control" name="date" id="date"
                                                    value="{{ date('Y-m-d') }}" required>
                                            </div>

                                            <div class="col-md-6">
                                                <label class="form-label">Payment Account <span
                                                        class="text-danger">*</span></label>
                                                <select name="account_id" id="account_id" class="form-control" required>
                                                    <option value="">— Select account —</option>
                                                    @foreach ($accounts as $acc)
                                                        <option value="{{ $acc->id }}">{{ $acc->account_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-6">
                                                <label class="form-label">Advance Amount <span
                                                        class="text-danger">*</span></label>
                                                <div class="input-group">
                                                    <span class="input-group-text">৳</span>
                                                    <input type="number" step="0.01" min="0.01" class="form-control"
                                                        name="amount" id="amount" placeholder="0.00" required>
                                                </div>
                                                <div class="hint mt-1">This amount will be debited from the selected
                                                    account.</div>
                                            </div>

                                            <div class="col-md-6">
                                                <label class="form-label">TrxID</label>
                                                <input type="text" class="form-control" name="transection_no"
                                                    id="transection_no" placeholder="Optional transaction reference">
                                            </div>

                                            <div class="col-12">
                                                <label class="form-label">Note</label>
                                                <input type="text" class="form-control" name="note" id="note"
                                                    placeholder="Optional note (e.g. approved by, reason)">
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Right column: Visual summary --}}
                                    <div class="col-lg-5">
                                        <div class="summary-box">
                                            <div class="d-flex align-items-center justify-content-between mb-2">
                                                <div class="fw-bold">Preview</div>
                                                <span class="pill">Advance</span>
                                            </div>
                                            <div class="divider"></div>
                                            <div class="row">
                                                <div class="col-5 text-muted">Employee</div>
                                                <div class="col-7" id="pv-employee">—</div>

                                                <div class="col-5 text-muted">Month</div>
                                                <div class="col-7" id="pv-month">{{ date('Y-m') }}</div>

                                                <div class="col-5 text-muted">Date</div>
                                                <div class="col-7" id="pv-date">{{ date('Y-m-d') }}</div>

                                                <div class="col-5 text-muted">Account</div>
                                                <div class="col-7" id="pv-account">—</div>

                                                <div class="col-5 text-muted">Amount</div>
                                                <div class="col-7 fw-semibold" id="pv-amount">0.00</div>

                                                <div class="col-5 text-muted">TrxID</div>
                                                <div class="col-7" id="pv-trx">—</div>
                                            </div>
                                        </div>

                                        <div class="hint mt-2">
                                            This will create an entry in <code>Salary Payments</code> with <b>type =
                                                advance</b> and a matching ledger transaction (debit).
                                        </div>
                                    </div>
                                </div>

                                <div class="divider"></div>

                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('payrolls') }}" class="btn btn-light">Cancel</a>
                                    <button type="submit" class="btn btn-primary btn-wide" id="btn-submit">
                                        Save Advance
                                    </button>
                                </div>

                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(function() {
            // bootstrap-select (if present)
            $('.selectpicker').selectpicker?.();

            // Live preview helpers
            function fmt(n) {
                if (!n || isNaN(n)) return '0.00';
                return (Math.round((parseFloat(n) + Number.EPSILON) * 100) / 100).toFixed(2);
            }

            function monthPretty(yyMm) {
                if (!yyMm) return '—';
                const parts = yyMm.split('-'); // [YYYY, MM]
                if (parts.length !== 2) return yyMm;
                const m = parseInt(parts[1], 10);
                const names = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                return `${names[m-1] ?? yyMm} ${parts[0]}`;
            }

            function refreshPreview() {
                const $opt = $('#employee_id option:selected');
                const name = $opt.data('empname') ? `${$opt.data('empcode')} — ${$opt.data('empname')}` : '—';
                const month = $('#month').val();
                const date = $('#date').val();
                const accTxt = $('#account_id option:selected').text() || '—';
                const amt = fmt($('#amount').val());
                const trx = $('#transection_no').val() || '—';

                $('#pv-employee').text(name || '—');
                $('#pv-month').text(monthPretty(month));
                $('#pv-date').text(date || '—');
                $('#pv-account').text(accTxt);
                $('#pv-amount').text(amt);
                $('#pv-trx').text(trx);
            }

            // Bind preview updates
            $('#employee_id, #month, #date, #account_id').on('change', refreshPreview);
            $('#amount, #transection_no').on('input', refreshPreview);
            refreshPreview();

            // Submit AJAX
            $('#ajax_form_advance').on('submit', function(e) {
                e.preventDefault();
                const $form = $(this);
                const fd = new FormData(this);
                const $btn = $('#btn-submit');

                $btn.prop('disabled', true).text('Saving...');

                $.ajax({
                    url: $form.attr('action'),
                    method: 'POST',
                    data: fd,
                    contentType: false,
                    processData: false,
                    dataType: 'json', // <-- important
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(res) {
                        if (res && res.status) {
                            toastr?.success(res.msg || 'Advance recorded successfully.');
                            if (res.url) {
                                window.location = res.url;
                            }
                        } else {
                            toastr?.error(res?.msg || 'Failed to save advance.');
                        }
                    },
                    error: function(xhr) {
                        // show server error message if available
                        const msg = xhr.responseJSON?.msg || xhr.responseJSON?.message ||
                            'Server error.';
                        toastr?.error(msg);
                        console.error(xhr.responseText || xhr);
                    },
                    complete: function() {
                        $btn.prop('disabled', false).text('Save Advance');
                    }
                });
            });

        });
    </script>
@endpush