@extends('dashboard.layouts.app')

@section('content')
    <div class="container mt-5">
        <!-- Success/Error Messages -->
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <!-- User Information -->
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <p><strong>Full Name:</strong> {{ $user->full_name }}</p>
                        <p><strong>Mobile:</strong> {{ $user->mobile ?? ($user->staff->mobile ?? 'N/A') }}</p>
                        <p><strong>Role:</strong> {{ $user->role->name ?? 'N/A' }}</p>
                        <p><strong>Designation:</strong> {{ $user->staff->designation->title ?? 'N/A' }}</p>
                    </div>
                    <div class="col-md-4">
                        <p><strong>Staff No:</strong> {{ $user->staff->staff_no ?? 'N/A' }}</p>
                        <p><strong>Email:</strong> {{ $user->email }}</p>
                        <p><strong>Department:</strong> {{ $user->staff->department->name ?? 'N/A' }}</p>
                        <p><strong>Date of Joining:</strong> {{ $user->staff->date_of_joining ?? 'N/A' }}</p>
                    </div>
                    <div class="col-md-4">
                        <p><strong>Month:</strong> {{ $month }}</p>
                        <p><strong>Year:</strong> {{ $year }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Payroll Form -->
        <form action="{{ $payroll ? route('payrolls.update', $payroll->id) : route('payrolls.store') }}" method="POST">
            @csrf
            @if ($payroll)
                @method('PUT')
            @endif
            <input type="hidden" name="staff_id" value="{{ $user->staff->id }}">
            <input type="hidden" name="payroll_month" value="{{ $month }}">
            <input type="hidden" name="payroll_year" value="{{ $year }}">
            <input type="hidden" name="payroll_status" value="{{ $payroll ? $payroll->payroll_status : 'Progress' }}">
            <input type="hidden" name="payment_mode" value="{{ $payroll ? $payroll->payment_mode : 'Cash' }}">

            <div class="row mt-5">
                <!-- Earnings -->
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <strong>Earnings</strong>
                                <button type="button" class="btn btn-primary btn-sm" id="add-earning">+</button>
                            </div>
                            <div id="earnings-wrapper">
                                @if ($earnings->isNotEmpty())
                                    @foreach ($earnings as $earning)
                                        <div class="row earning-item mb-3">
                                            <div class="col-md-6">
                                                <input type="text" name="earnings_description[]" class="form-control"
                                                    placeholder="Description" value="{{ $earning->type_name }}">
                                            </div>
                                            <div class="col-md-4">
                                                <input type="number" name="earnings_amount[]"
                                                    class="form-control earning-amount" step="0.01"
                                                    value="{{ $earning->amount }}">
                                            </div>
                                            <div class="col-md-2">
                                                <button type="button"
                                                    class="btn btn-danger btn-sm remove-earning">-</button>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="row earning-item mb-3">
                                        <div class="col-md-6">
                                            <input type="text" name="earnings_description[]" class="form-control"
                                                placeholder="Description">
                                        </div>
                                        <div class="col-md-4">
                                            <input type="number" name="earnings_amount[]"
                                                class="form-control earning-amount" step="0.01" value="0">
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-danger btn-sm remove-earning">-</button>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Deductions -->
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <strong>Deductions</strong>
                                <button type="button" class="btn btn-primary btn-sm" id="add-deduction">+</button>
                            </div>
                            <div id="deductions-wrapper">
                                @if ($deductions->isNotEmpty())
                                    @foreach ($deductions as $deduction)
                                        <div class="row deduction-item mb-3">
                                            <div class="col-md-6">
                                                <input type="text" name="deductions_description[]" class="form-control"
                                                    placeholder="Description" value="{{ $deduction->type_name }}">
                                            </div>
                                            <div class="col-md-4">
                                                <input type="number" name="deductions_amount[]"
                                                    class="form-control deduction-amount" step="0.01"
                                                    value="{{ $deduction->amount }}">
                                            </div>
                                            <div class="col-md-2">
                                                <button type="button"
                                                    class="btn btn-danger btn-sm remove-deduction">-</button>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="row deduction-item mb-3">
                                        <div class="col-md-6">
                                            <input type="text" name="deductions_description[]" class="form-control"
                                                placeholder="Description">
                                        </div>
                                        <div class="col-md-4">
                                            <input type="number" name="deductions_amount[]"
                                                class="form-control deduction-amount" step="0.01"
                                                value="0">
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button"
                                                class="btn btn-danger btn-sm remove-deduction">-</button>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Payroll Summary -->
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="mb-3">
                                <strong>Payroll Summary</strong>
                            </div>
                            <div class="mb-3">
                                <label for="basic_salary" class="form-label">Basic Salary ($)</label>
                                <input type="number" name="basic_salary" id="basic_salary" class="form-control"
                                    step="0.01" required readonly
                                    value="{{ $payroll ? $payroll->basic_salary : $user->staff->basic_salary ?? 0 }}">
                                @error('basic_salary')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="total_earning" class="form-label">Total Earning ($)</label>
                                <input type="number" name="total_earning" id="total_earning" class="form-control"
                                    step="0.01" readonly value="{{ $payroll ? $payroll->total_earning : 0 }}">
                                @error('total_earning')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="total_deduction" class="form-label">Total Deduction ($)</label>
                                <input type="number" name="total_deduction" id="total_deduction" class="form-control"
                                    step="0.01" readonly value="{{ $payroll ? $payroll->total_deduction : 0 }}">
                                @error('total_deduction')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="gross_salary" class="form-label">Gross Salary ($)</label>
                                <input type="number" name="gross_salary" id="gross_salary" class="form-control"
                                    step="0.01" readonly value="{{ $payroll ? $payroll->gross_salary : 0 }}">
                                @error('gross_salary')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="tax" class="form-label">Tax ($)</label>
                                <input type="number" name="tax" id="tax" class="form-control" step="0.01"
                                    value="{{ $payroll ? $payroll->tax : 0 }}">
                                @error('tax')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="net_salary" class="form-label">Net Salary ($)</label>
                                <input type="number" name="net_salary" id="net_salary" class="form-control"
                                    step="0.01" readonly value="{{ $payroll ? $payroll->net_salary : 0 }}">
                                @error('net_salary')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mt-3">
                                <button type="submit" class="btn btn-primary">
                                    {{ $payroll ? 'Update Payroll' : 'Generate Payroll' }}
                                </button>
                                <a href="{{ route('payrolls.index') }}" class="btn btn-secondary">Cancel</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            function calculatePayroll() {
                const basicSalary = parseFloat($('#basic_salary').val()) || 0;
                const tax = parseFloat($('#tax').val()) || 0;

                let totalEarnings = 0;
                $('.earning-amount').each(function() {
                    totalEarnings += parseFloat($(this).val()) || 0;
                });

                let totalDeductions = 0;
                $('.deduction-amount').each(function() {
                    totalDeductions += parseFloat($(this).val()) || 0;
                });

                const totalEarning = basicSalary + totalEarnings;
                const grossSalary = totalEarning;
                const netSalary = grossSalary - totalDeductions - tax;

                $('#total_earning').val(totalEarning.toFixed(2));
                $('#total_deduction').val(totalDeductions.toFixed(2));
                $('#gross_salary').val(grossSalary.toFixed(2));
                $('#net_salary').val(netSalary.toFixed(2));
            }

            $('#add-earning').on('click', function() {
                $('#earnings-wrapper').append(`
                    <div class="row earning-item mb-3">
                        <div class="col-md-6">
                            <input type="text" name="earnings_description[]" class="form-control" placeholder="Description" required>
                        </div>
                        <div class="col-md-4">
                            <input type="number" name="earnings_amount[]" class="form-control earning-amount" step="0.01" required value="0">
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-danger btn-sm remove-earning">-</button>
                        </div>
                    </div>
                `);
                calculatePayroll();
            });

            $('#add-deduction').on('click', function() {
                $('#deductions-wrapper').append(`
                    <div class="row deduction-item mb-3">
                        <div class="col-md-6">
                            <input type="text" name="deductions_description[]" class="form-control" placeholder="Description" required>
                        </div>
                        <div class="col-md-4">
                            <input type="number" name="deductions_amount[]" class="form-control deduction-amount" step="0.01" required value="0">
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-danger btn-sm remove-deduction">-</button>
                        </div>
                    </div>
                `);
                calculatePayroll();
            });

            $(document).on('click', '.remove-earning, .remove-deduction', function() {
                $(this).closest('.earning-item, .deduction-item').remove();
                calculatePayroll();
            });

            $(document).on('input', '.earning-amount, .deduction-amount, #tax', calculatePayroll);

            calculatePayroll();
        });
    </script>
@endpush