@extends('layouts.master')
@section('title', 'Create Salary 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-edit"></i> Create Salary Slip</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item">Salary</li>
            <li class="breadcrumb-item"><a href="#">Create</a></li>
        </ul>
    </div>

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

            <!-- Toggle Button -->
            <div class="mb-3">
                <button type="button" class="btn btn-success" id="show-salary-form">
                    <i class="fa fa-plus"></i> New Salary Slip
                </button>
            </div>

            <!-- Salary Form -->
            <div class="tile" id="salary-form" style="display: none;">
                <h3 class="tile-title">Salary Entry Form</h3>
                <div class="tile-body">
                    @if(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif

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

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

                            <div class="form-group col-md-4">
                                <label>Designation</label>
                                <input type="text" id="designation" class="form-control border" readonly>
                            </div>

                            <div class="form-group col-md-4">
                                <label for="salary_account_id">Salary Payment Account</label>
                                <select name="salary_account_id" id="salary_account_id" class="form-control select2 border" required>
                                    <option value="">-- Select Payment Account --</option>
                                    @foreach($salaryAccounts as $acc)
                                        <option value="{{ $acc->Account_ID }}">{{ $acc->Account_Title }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <input type="hidden" name="advance_acc" id="advance_acc">
                        <input type="hidden" name="loan_acc" id="loan_acc">
                        <input type="hidden" name="Account_ID" id="Account_ID">

                        <div class="row">
                            <div class="form-group col-md-4">
                                <label>Employee Type</label>
                                <input type="text" id="emp_type_display" class="form-control border" readonly>
                                <input type="hidden" id="type" name="type">
                            </div>
                            <div class="form-group col-md-4">
                                <label>Pay (Per Day)</label>
                                <input type="text" id="pay" class="form-control border" readonly>
                            </div>
                            <div class="form-group col-md-2">
                                <label for="month">Month</label>
                                <select name="month" class="form-control border" required>
                                    @foreach($months as $key => $value)
                                        <option value="{{ $key }}">{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-2">
                                <label for="year">Year</label>
                                <input type="text" name="year" class="form-control border" required value="{{ date('Y') }}">
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-3">
                                <label>Days Worked</label>
                                <input type="number" name="days" class="form-control border" required>
                            </div>
                            <div class="form-group col-md-3">
                                <label>Overtime Hours</label>
                                <input type="number" name="ot_hours" class="form-control border">
                            </div>
                            <div class="form-group col-md-3">
                                <label>Conveyance</label>
                                <input type="number" name="conveyance" class="form-control border">
                            </div>
                            <div class="form-group col-md-3">
                                <label>Advance</label>
                                <input type="number" name="advance" class="form-control border">
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-3">
                                <label>Loan Deduction</label>
                                <input type="number" name="loan_ded" class="form-control border">
                            </div>
                            <div class="form-group col-md-3">
                                <label>Gross Salary</label>
                                <input type="text" id="gross_salary" name="gross_salary" class="form-control border" readonly>
                            </div>
                            <div class="form-group col-md-3">
                                <label>Net Salary</label>
                                <input type="text" id="net_salary" name="net_salary" class="form-control border" readonly>
                            </div>
                        </div>

                        <!-- Labour Grid -->
                        <div class="form-group mt-3">
                            <button type="button" id="show-labour-grid" class="btn btn-info" style="display: none;">Add Labour Detail</button>
                        </div>

                        <div id="labour-grid-section" style="display: none;">
                            <h5>Labour Details</h5>
                            <table class="table table-bordered" id="labour-grid">
                                <thead>
                                    <tr>
                                        <th>Site</th>
                                        <th>Days</th>
                                        <th>O.T.</th>
                                        <th>Gross</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="grid-body"></tbody>
                            </table>
                            <button type="button" class="btn btn-success addRow"><i class="fa fa-plus"></i> Add Row</button>
                        </div>

                        <div class="form-group mt-4">
                            <button type="submit" class="btn btn-primary">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>
    const customers = @json($customers);

    $(document).ready(function () {
        $('.select2').select2({ width: '100%' });

        $('#show-salary-form').click(function () {
            $('#salary-form').slideDown();
            $(this).hide();
        });

        $('#emp_id').change(function () {
            const empId = $(this).val();
            if (empId) {
                fetch(`{{ url('/salaryslip/getemployee') }}/${empId}`)
                    .then(res => res.json())
                    .then(data => {
                        $('#designation').val(data.desig ?? '');
                        $('#pay').val(data.pay ?? '');
                        $('#type').val(data.type ?? '');
                        $('#emp_type_display').val(data.type ?? '');
                        $('#advance_acc').val(data.advance_acc ?? '');
                        $('#loan_acc').val(data.loan_acc ?? '');
                        $('#Account_ID').val(data.Account_ID ?? '');
                        $('input[name="loan_ded"]').val(data.loan_ded ?? 0);
                        $('input[name="advance"]').val(data.advance ?? 0);

                        if (data.type && data.type.toLowerCase() === 'labour') {
                            $('#labour-grid-section').show();
                            $('#show-labour-grid').show();
                        } else {
                            $('#labour-grid-section').hide();
                            $('#show-labour-grid').hide();
                        }

                        calculateGrossSalary();
                    })
                    .catch(err => {
                        console.error(err);
                        alert("Unable to fetch employee info.");
                    });
            }
        });

        ['days', 'ot_hours', 'conveyance', 'advance', 'loan_ded'].forEach(field => {
            $(`input[name="${field}"]`).on('input', calculateGrossSalary);
        });

        function calculateGrossSalary() {
            const type = $('#type').val().trim().toLowerCase();
            const pay = parseFloat($('#pay').val()) || 0;
            const days = parseFloat($('input[name="days"]').val()) || 0;
            const ot = parseFloat($('input[name="ot_hours"]').val()) || 0;
            const conveyance = parseFloat($('input[name="conveyance"]').val()) || 0;
            const advance = parseFloat($('input[name="advance"]').val()) || 0;
            const loan = parseFloat($('input[name="loan_ded"]').val()) || 0;

            let gross = (type === 'staff') ? (pay / 30 * days) : (pay * days + (pay / 8 * ot));
            let net = gross + conveyance - advance - loan;

            $('#gross_salary').val(Math.round(gross));
            $('#net_salary').val(Math.round(net));
        }

        function updateTotals() {
            let totalDays = 0;
            let totalOT = 0;

            $('.row-days').each(function () {
                totalDays += parseFloat($(this).val()) || 0;
            });

            $('.row-ot').each(function () {
                totalOT += parseFloat($(this).val()) || 0;
            });

            $('input[name="days"]').val(totalDays);
            $('input[name="ot_hours"]').val(totalOT);
            calculateGrossSalary();
        }

        let detailIndex = 0;
        $('.addRow').click(function () {
            let options = '';
            for (const [id, name] of Object.entries(customers)) {
                options += `<option value="${id}" data-name="${name}">${name}</option>`;
            }

            const row = `
                <tr>
                    <td>
                        <select name="details[${detailIndex}][site_id]" class="form-control site-select">${options}</select>
                        <input type="hidden" name="details[${detailIndex}][site_name]" class="site-name">
                    </td>
                    <td><input type="number" name="details[${detailIndex}][days]" class="form-control row-days" required></td>
                    <td><input type="number" name="details[${detailIndex}][ot]" class="form-control row-ot" required></td>
                    <td><input type="number" name="details[${detailIndex}][gross]" class="form-control row-gross" readonly></td>
                    <td><button type="button" class="btn btn-danger btn-sm" onclick="$(this).closest('tr').remove(); updateTotals();">X</button></td>
                </tr>
            `;

            $('#grid-body').append(row);

            setTimeout(() => {
                const lastRow = $('#grid-body tr:last');
                const dayInput = lastRow.find('.row-days');
                const otInput = lastRow.find('.row-ot');
                const grossInput = lastRow.find('.row-gross');
                const siteSelect = lastRow.find('.site-select');
                const siteNameInput = lastRow.find('.site-name');
                const pay = parseFloat($('#pay').val()) || 0;

                function recalc() {
                    const d = parseFloat(dayInput.val()) || 0;
                    const o = parseFloat(otInput.val()) || 0;
                    const g = (pay * d) + ((pay / 8) * o);
                    grossInput.val(Math.round(g));
                    updateTotals();
                }

                function updateSiteName() {
                    siteNameInput.val(siteSelect.find(':selected').data('name') || '');
                }

                dayInput.on('input', recalc);
                otInput.on('input', recalc);
                siteSelect.on('change', updateSiteName);
                updateSiteName();
            }, 100);

            detailIndex++;
        });
    });
</script>
@endpush
@endsection