@extends('layouts.app')

@push('css')
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card card-primary card-outline">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-user-plus mr-2"></i>Employee Information</h3>
                <div class="card-tools">
                    <a href="{{ route('employees.index') }}" class="btn btn-tool">
                        <i class="fas fa-arrow-left"></i> Back to List
                    </a>
                </div>
            </div>
            <div class="card-body">
                <form action="{{ route('employees.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    
                    <!-- Personal Information -->
                    <h5 class="text-primary border-bottom pb-2 mb-3">Personal Information</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">Full Name <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control" value="{{ old('name') }}" required placeholder="e.g. John Doe">
                                @error('name') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">Email Address <span class="text-danger">*</span></label>
                                <input type="email" name="email" class="form-control" value="{{ old('email') }}" required placeholder="e.g. john@example.com">
                                @error('email') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">Login Password</label>
                                <input type="password" name="password" class="form-control" placeholder="Minimum 8 characters">
                                <small class="text-muted" style="display: block; margin-top: 5px;">Default: password123</small>
                                @error('password') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">Phone Number</label>
                                <input type="text" name="phone" class="form-control" value="{{ old('phone') }}" placeholder="+1 234 567 890">
                            </div>
                        </div>
                    </div>

                    <div style="margin: 30px 0;"></div>

                    <!-- Job Details -->
                    <h5 class="text-primary border-bottom pb-2 mb-3">Job Details</h5>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">Designation</label>
                                <input type="text" name="designation" class="form-control" value="{{ old('designation') }}" placeholder="e.g. Software Engineer">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">Date of Joining</label>
                                <input type="date" name="joined_date" class="form-control" value="{{ old('joined_date', date('Y-m-d')) }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">Role <span class="text-danger">*</span></label>
                                <select name="role_id" class="form-control select2" data-placeholder="Select a role" required>
                                    @foreach($roles as $role)
                                        <option value="{{ $role->id }}" {{ old('role_id') == $role->id ? 'selected' : '' }}>{{ $role->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">Reports To (Manager)</label>
                                <select name="manager_id" id="manager_id" class="form-control select2-ajax" data-placeholder="Search for an employee...">
                                    <option value="">None</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">Base Salary</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-light font-weight-bold">{{ \App\Models\BusinessSetting::firstOrNewDefault()->currency_symbol }}</span>
                                    </div>
                                    <input type="number" name="base_salary" class="form-control text-right" step="0.01" value="{{ old('base_salary') }}" placeholder="0.00">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">On Probation?</label>
                                <select name="is_on_probation" class="form-control">
                                    <option value="0" {{ old('is_on_probation') == '0' ? 'selected' : '' }}>No</option>
                                    <option value="1" {{ old('is_on_probation') == '1' ? 'selected' : '' }}>Yes</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">Probation End Date</label>
                                <input type="date" name="probation_end_date" class="form-control" value="{{ old('probation_end_date') }}">
                            </div>
                        </div>
                    </div>

                    <div style="margin: 30px 0;"></div>

                    <!-- Attendance & Leave Limit -->
                    <h4 class="text-primary fw-bold" style="padding-bottom: 10px; border-bottom: 1px solid #eee; margin-bottom: 20px;">Leave & Profile Settings</h4>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">Sick Leave Limit (Yearly)</label>
                                <input type="number" name="sick_leave_limit" class="form-control" value="{{ old('sick_leave_limit', 12) }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">Casual Leave Limit (Yearly)</label>
                                <input type="number" name="casual_leave_limit" class="form-control" value="{{ old('casual_leave_limit', 12) }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">Profile Photo</label>
                                <div style="display: flex; align-items: center;">
                                    <img id="photo-preview" src="{{ asset('img/default-avatar.png') }}" class="img-circle border" width="60" height="60" style="object-fit: cover; margin-right: 15px;">
                                    <input type="file" name="photo" id="photo-input" class="form-control" style="flex: 1;">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div style="margin: 30px 0;"></div>

                    <!-- Payroll Deductions -->
                    <div style="padding-bottom: 10px; border-bottom: 1px solid #eee; margin-bottom: 20px;">
                        <button type="button" class="btn btn-info btn-xs pull-right" id="add-deduction-btn">
                            <i class="fas fa-plus"></i> Add Deduction
                        </button>
                        <h4 class="text-primary fw-bold" style="margin: 0;">Monthly Payroll Deductions (%)</h4>
                        <div class="clearfix"></div>
                    </div>
                    
                    <div id="deductions-container" style="margin-bottom: 15px;">
                        <!-- Dynamic rows here -->
                    </div>
                    <div class="alert alert-light border-dashed text-center p-4 text-muted" id="no-deductions-text">
                        <i class="fas fa-percent me-2 opacity-50"></i>No automatic deductions configured yet.
                    </div>

                    <div style="margin: 30px 0;"></div>

                    <!-- Payroll Additions -->
                    <div style="padding-bottom: 10px; border-bottom: 1px solid #eee; margin-bottom: 20px;">
                        <button type="button" class="btn btn-success btn-xs pull-right" id="add-addition-btn">
                            <i class="fas fa-plus"></i> Add Addition
                        </button>
                        <h4 class="text-primary fw-bold" style="margin: 0;">Monthly Payroll Additions (Flat/%)</h4>
                        <div class="clearfix"></div>
                    </div>
                    
                    <div id="additions-container" style="margin-bottom: 15px;">
                        <!-- Dynamic rows here -->
                    </div>
                    <div class="alert alert-light border-dashed text-center p-4 text-muted" id="no-additions-text">
                        <i class="fas fa-plus-circle me-2 opacity-50"></i>No automatic additions configured yet.
                    </div>

                    <div class="col-md-12 mt-4 text-right">
                        <hr>
                        <a href="{{ route('employees.index') }}" class="btn btn-secondary px-4">Cancel</a>
                        <button type="submit" class="btn btn-primary px-5">Create Employee Account</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function() {
    // Remove redundant individual initializers

    let deductionIndex = 0;
    $('#add-deduction-btn').click(function() {
        $('#no-deductions-text').hide();
        const html = `
            <div class="row deduction-row" style="margin-bottom: 15px;">
                <div class="col-md-7">
                    <select name="deductions[${deductionIndex}][deduction_type_id]" class="form-control select2" required>
                        <option value="">Select Deduction Type</option>
                        @foreach($deductionTypes as $type)
                            <option value="{{ $type->id }}">{{ $type->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <select name="deductions[${deductionIndex}][value_type]" class="form-select deduction-type-select" required>
                        <option value="percentage">Percentage</option>
                        <option value="fixed">Fixed</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <div class="input-group">
                        <div class="input-group-prepend deduction-prefix" style="display:none;">
                            <span class="input-group-text">{{ \App\Models\BusinessSetting::firstOrNewDefault()->currency_symbol }}</span>
                        </div>
                        <input type="number" step="0.01" name="deductions[${deductionIndex}][value]" class="form-control" placeholder="Value" required>
                        <div class="input-group-append deduction-suffix">
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-danger btn-sm remove-deduction-btn w-100">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        `;
        $('#deductions-container').append(html);
        initGlobalSelect2('#deductions-container');
        deductionIndex++;
    });

    $(document).on('change', '.deduction-type-select', function() {
        const row = $(this).closest('.deduction-row');
        if ($(this).val() === 'fixed') {
            row.find('.deduction-prefix').show();
            row.find('.deduction-suffix').hide();
        } else {
            row.find('.deduction-prefix').hide();
            row.find('.deduction-suffix').show();
        }
    });

    let additionIndex = 0;
    $('#add-addition-btn').click(function() {
        $('#no-additions-text').hide();
        const html = `
            <div class="row addition-row" style="margin-bottom: 15px;">
                <div class="col-md-7">
                    <select name="additions[${additionIndex}][addition_type_id]" class="form-control select2" required>
                        <option value="">Select Addition Type</option>
                        @foreach($additionTypes as $type)
                            <option value="{{ $type->id }}">{{ $type->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <select name="additions[${additionIndex}][value_type]" class="form-select addition-type-select" required>
                        <option value="fixed">Fixed</option>
                        <option value="percentage">Percentage</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <div class="input-group">
                        <div class="input-group-prepend addition-prefix">
                            <span class="input-group-text">{{ \App\Models\BusinessSetting::firstOrNewDefault()->currency_symbol }}</span>
                        </div>
                        <input type="number" step="0.01" name="additions[${additionIndex}][value]" class="form-control" placeholder="Value" required>
                        <div class="input-group-append addition-suffix" style="display:none;">
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-danger btn-sm remove-addition-btn w-100">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        `;
        $('#additions-container').append(html);
        initGlobalSelect2('#additions-container');
        additionIndex++;
    });

    $(document).on('change', '.addition-type-select', function() {
        const row = $(this).closest('.addition-row');
        if ($(this).val() === 'fixed') {
            row.find('.addition-prefix').show();
            row.find('.addition-suffix').hide();
        } else {
            row.find('.addition-prefix').hide();
            row.find('.addition-suffix').show();
        }
    });

    $(document).on('click', '.remove-addition-btn', function() {
        $(this).closest('.addition-row').remove();
        if ($('.addition-row').length === 0) {
            $('#no-additions-text').show();
        }
    });

    // Photo Preview
    $('#photo-input').on('change', function() {
        const file = this.files[0];
        if (file) {
            let reader = new FileReader();
            reader.onload = function(event) {
                $('#photo-preview').attr('src', event.target.result);
            }
            reader.readAsDataURL(file);
        }
    });
});
</script>
@endpush