@extends('layouts.app')

@section('title', 'Add Contract')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-file-earmark-text me-2"></i>Add New Contract</h5>
                <a href="{{ route('contracts.index') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left me-1"></i> Back
                </a>
            </div>
            <form action="{{ route('contracts.store') }}" method="POST">
                @csrf
                <div class="card-body">
                    <div class="row">
                        <!-- Contract Info -->
                        <div class="col-md-6">
                            <h6 class="mb-3 text-primary">Contract Information</h6>

                            <div class="mb-3">
                                <label for="employee_id" class="form-label">Employee <span class="text-danger">*</span></label>
                                <select class="form-select @error('employee_id') is-invalid @enderror" id="employee_id" name="employee_id" required>
                                    <option value="">Select Employee</option>
                                    @foreach($employees as $employee)
                                        <option value="{{ $employee->id }}" {{ old('employee_id') == $employee->id ? 'selected' : '' }}>
                                            {{ $employee->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('employee_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="contract_number" class="form-label">Contract Number <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('contract_number') is-invalid @enderror" id="contract_number" name="contract_number" value="{{ old('contract_number') }}" maxlength="50" required>
                                @error('contract_number')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="contract_type" class="form-label">Contract Type <span class="text-danger">*</span></label>
                                <select class="form-select @error('contract_type') is-invalid @enderror" id="contract_type" name="contract_type" required>
                                    <option value="">Select Type</option>
                                    <option value="permanent" {{ old('contract_type') == 'permanent' ? 'selected' : '' }}>Permanent</option>
                                    <option value="fixed_term" {{ old('contract_type') == 'fixed_term' ? 'selected' : '' }}>Fixed Term</option>
                                    <option value="probation" {{ old('contract_type') == 'probation' ? 'selected' : '' }}>Probation</option>
                                    <option value="internship" {{ old('contract_type') == 'internship' ? 'selected' : '' }}>Internship</option>
                                </select>
                                @error('contract_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="start_date" class="form-label">Start Date <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control @error('start_date') is-invalid @enderror" id="start_date" name="start_date" value="{{ old('start_date') }}" required>
                                    @error('start_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="end_date" class="form-label">End Date</label>
                                    <input type="date" class="form-control @error('end_date') is-invalid @enderror" id="end_date" name="end_date" value="{{ old('end_date') }}">
                                    @error('end_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Leave empty for permanent contract</small>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                                <select class="form-select @error('status') is-invalid @enderror" id="status" name="status" required>
                                    <option value="1" {{ old('status', '1') == '1' ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>Inactive</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Position & Salary -->
                        <div class="col-md-6">
                            <h6 class="mb-3 text-primary">Position & Compensation</h6>

                            <div class="mb-3">
                                <label for="department_id" class="form-label">Department</label>
                                <select class="form-select" id="department_id">
                                    <option value="">Select Department</option>
                                    @foreach($departments as $department)
                                        <option value="{{ $department->id }}">{{ $department->department_name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="position_id" class="form-label">Position</label>
                                <select class="form-select @error('position_id') is-invalid @enderror" id="position_id" name="position_id">
                                    <option value="">Select Position</option>
                                </select>
                                @error('position_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="salary" class="form-label">Salary</label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp</span>
                                    <input type="number" class="form-control @error('salary') is-invalid @enderror" id="salary" name="salary" value="{{ old('salary') }}" min="0" step="1000">
                                </div>
                                @error('salary')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="signed_at" class="form-label">Signed Date</label>
                                <input type="date" class="form-control @error('signed_at') is-invalid @enderror" id="signed_at" name="signed_at" value="{{ old('signed_at') }}">
                                @error('signed_at')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Benefits</label>
                                <div id="benefits-container">
                                    <div class="benefit-row mb-2">
                                        <div class="row g-2">
                                            <div class="col-md-5">
                                                <select class="form-select" name="contract_benefits[0][benefit_id]">
                                                    <option value="">Select Benefit</option>
                                                    @foreach($benefits as $benefit)
                                                        <option value="{{ $benefit->id }}">{{ $benefit->benefit_name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <input type="number" class="form-control" name="contract_benefits[0][value]" placeholder="Value" min="0" step="1000">
                                            </div>
                                            <div class="col-md-3">
                                                <input type="text" class="form-control" name="contract_benefits[0][notes]" placeholder="Notes">
                                            </div>
                                            <div class="col-md-1">
                                                <button type="button" class="btn btn-outline-success w-100 add-benefit">
                                                    <i class="bi bi-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-end">
                    <a href="{{ route('contracts.index') }}" class="btn btn-outline-secondary me-2">Cancel</a>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-1"></i> Save Contract
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Department-Position dynamic loading
    const departments = @json($departments);
    const departmentSelect = document.getElementById('department_id');
    const positionSelect = document.getElementById('position_id');

    departmentSelect.addEventListener('change', function() {
        const departmentId = this.value;
        positionSelect.innerHTML = '<option value="">Select Position</option>';

        if (departmentId) {
            const department = departments.find(d => d.id == departmentId);
            if (department && department.positions) {
                department.positions.forEach(position => {
                    const option = document.createElement('option');
                    option.value = position.id;
                    option.textContent = position.position_name;
                    positionSelect.appendChild(option);
                });
            }
        }
    });

    // Benefits dynamic fields
    let benefitIndex = 1;
    const benefitsData = @json($benefits);

    document.addEventListener('click', function(e) {
        if (e.target.closest('.add-benefit')) {
            const container = document.getElementById('benefits-container');
            const newField = document.createElement('div');
            newField.className = 'benefit-row mb-2';

            let optionsHtml = '<option value="">Select Benefit</option>';
            benefitsData.forEach(benefit => {
                optionsHtml += `<option value="${benefit.id}">${benefit.benefit_name}</option>`;
            });

            newField.innerHTML = `
                <div class="row g-2">
                    <div class="col-md-5">
                        <select class="form-select" name="contract_benefits[${benefitIndex}][benefit_id]">
                            ${optionsHtml}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <input type="number" class="form-control" name="contract_benefits[${benefitIndex}][value]" placeholder="Value" min="0" step="1000">
                    </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control" name="contract_benefits[${benefitIndex}][notes]" placeholder="Notes">
                    </div>
                    <div class="col-md-1">
                        <button type="button" class="btn btn-outline-danger w-100 remove-benefit">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                </div>
            `;
            container.appendChild(newField);
            benefitIndex++;
        }

        if (e.target.closest('.remove-benefit')) {
            e.target.closest('.benefit-row').remove();
        }
    });
</script>
@endpush