@extends('layouts.master')
@section('title', 'Create Salary Entry')

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

<div class="container mt-5">
    <h2>Create Salary Slip</h2>

    @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-6">
                <label for="emp_id">Select Employee</label>
                <select name="emp_id" id="emp_id" class="form-control" required>
                    <option value="">-- Select Employee --</option>
                    @foreach($employees as $employee)
                        <option value="{{ $employee->id }}">{{ $employee->name }}</option>
                    @endforeach
                </select>
            </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="form-group col-md-4">
                <label>Designation</label>
                <input type="text" id="designation" class="form-control" 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" required>
                    <option value="">-- Select Payment Account --</option>
                    @foreach($salaryAccounts as $acc)
                        <option value="{{ $acc->Account_ID }}">{{ $acc->Account_Title }}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-md-6">
                <label>Employee Type</label>
                <input type="text" id="emp_type_display" class="form-control" readonly>
                <input type="hidden" id="type" name="type">
            </div>
        </div>

        <div class="form-group col-md-6">
            <button type="button" id="show-labour-grid" class="btn btn-info" style="margin-top: 32px; 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" onclick="addRow()">Add</button>
        </div>

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

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

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

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

@push('js')
<script>
    const customers = @json($customers);

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

                    if (data.type && data.type.toLowerCase() === 'labour') {
                        document.getElementById('labour-grid-section').style.display = 'block';
                        document.getElementById('show-labour-grid').style.display = 'block';
                    } else {
                        document.getElementById('labour-grid-section').style.display = 'none';
                        document.getElementById('show-labour-grid').style.display = 'none';
                    }

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

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

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

        let gross = 0;
        if (type === 'staff') {
            gross = (pay / 30) * days;
        } else {
            gross = (pay * days) + ((pay / 8) * ot);
        }

        const net = gross + conveyance - advance - loan;
        document.getElementById('gross_salary').value = Math.round(gross);
        document.getElementById('net_salary').value = Math.round(net);
    }

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

        document.querySelectorAll('.row-days').forEach(input => {
            totalDays += parseFloat(input.value) || 0;
        });

        document.querySelectorAll('.row-ot').forEach(input => {
            totalOT += parseFloat(input.value) || 0;
        });

        document.querySelector('input[name="days"]').value = totalDays;
        document.querySelector('input[name="ot_hours"]').value = totalOT;

        calculateGrossSalary();
    }

let detailIndex = 0;
function addRow() {
    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>
    `;

    document.getElementById('grid-body').insertAdjacentHTML('beforeend', row);

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

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

        function updateSiteName() {
            const selectedOption = siteSelect.options[siteSelect.selectedIndex];
            siteNameInput.value = selectedOption.dataset.name || '';
        }

        dayInput.addEventListener('input', recalc);
        otInput.addEventListener('input', recalc);
        siteSelect.addEventListener('change', updateSiteName);

        updateSiteName(); // Set initial name
    }, 100);

    detailIndex++;
}
</script>
@endpush