@extends('layouts.app')

@section('title', 'Novo Funcionário')

@section('content')
<div class="sinagem-main">
    <div class="s-card">
        <div class="s-card-header">
            <h4 class="s-card-title">
                <i class="fas fa-user-plus"></i>
                Novo Funcionário
            </h4>
            <a href="{{ route('mercado.funcionarios.index') }}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-arrow-left"></i>
                Voltar
            </a>
        </div>

        <div class="s-card-body">
            <form action="{{ route('mercado.funcionarios.store') }}" method="POST">
                @csrf

                <!-- Informações Pessoais -->
                <div class="form-section mb-4">
                    <h5 class="form-section-title">
                        <i class="fas fa-user-circle"></i>
                        Informações Pessoais
                    </h5>
                    <hr class="mb-3">

                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="full_name" class="form-label">
                                    Nome Completo <span class="required">*</span>
                                </label>
                                <input type="text"
                                       class="form-control @error('full_name') is-invalid @enderror"
                                       id="full_name"
                                       name="full_name"
                                       value="{{ old('full_name') }}"
                                       placeholder="Digite o nome completo"
                                       required>
                                @error('full_name')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="establishment_id" class="form-label">
                                    Estabelecimento <span class="required">*</span>
                                </label>
                                <select class="form-control @error('establishment_id') is-invalid @enderror"
                                        id="establishment_id"
                                        name="establishment_id"
                                        required>
                                    <option value="">Selecione o estabelecimento...</option>
                                    @foreach($establishments ?? [] as $establishment)
                                        <option value="{{ $establishment->id }}" {{ old('establishment_id', $selectedEstablishment ?? '') == $establishment->id ? 'selected' : '' }}>
                                            {{ $establishment->name }} ({{ $establishment->code }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('establishment_id')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row g-3 mt-2">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="identity_type" class="form-label">
                                    Tipo de Identidade <span class="required">*</span>
                                </label>
                                <select class="form-control @error('identity_type') is-invalid @enderror"
                                        id="identity_type"
                                        name="identity_type"
                                        required>
                                    <option value="BI" {{ old('identity_type') == 'BI' ? 'selected' : '' }}>Bilhete de Identidade</option>
                                    <option value="Passaporte" {{ old('identity_type') == 'Passaporte' ? 'selected' : '' }}>Passaporte</option>
                                    <option value="Outro" {{ old('identity_type') == 'Outro' ? 'selected' : '' }}>Outro</option>
                                </select>
                                @error('identity_type')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="identity_number" class="form-label">
                                    Número de Identidade <span class="required">*</span>
                                </label>
                                <input type="text"
                                       class="form-control @error('identity_number') is-invalid @enderror"
                                       id="identity_number"
                                       name="identity_number"
                                       value="{{ old('identity_number') }}"
                                       placeholder="Digite o número do documento"
                                       required>
                                @error('identity_number')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="birth_date" class="form-label">Data de Nascimento</label>
                                <input type="date"
                                       class="form-control @error('birth_date') is-invalid @enderror"
                                       id="birth_date"
                                       name="birth_date"
                                       value="{{ old('birth_date') }}">
                                @error('birth_date')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Contato -->
                <div class="form-section mb-4">
                    <h5 class="form-section-title">
                        <i class="fas fa-address-card"></i>
                        Contato
                    </h5>
                    <hr class="mb-3">

                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="phone" class="form-label">
                                    Telefone <span class="required">*</span>
                                </label>
                                <input type="text"
                                       class="form-control @error('phone') is-invalid @enderror"
                                       id="phone"
                                       name="phone"
                                       value="{{ old('phone') }}"
                                       placeholder="+244 923 456 789"
                                       required>
                                @error('phone')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="alternate_phone" class="form-label">Telefone Alternativo</label>
                                <input type="text"
                                       class="form-control @error('alternate_phone') is-invalid @enderror"
                                       id="alternate_phone"
                                       name="alternate_phone"
                                       value="{{ old('alternate_phone') }}"
                                       placeholder="+244 923 456 789">
                                @error('alternate_phone')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row g-3 mt-2">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="email" class="form-label">Email</label>
                                <input type="email"
                                       class="form-control @error('email') is-invalid @enderror"
                                       id="email"
                                       name="email"
                                       value="{{ old('email') }}"
                                       placeholder="funcionario@email.com">
                                @error('email')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="address" class="form-label">Endereço</label>
                                <input type="text"
                                       class="form-control @error('address') is-invalid @enderror"
                                       id="address"
                                       name="address"
                                       value="{{ old('address') }}"
                                       placeholder="Rua, número, bairro...">
                                @error('address')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Dados Profissionais -->
                <div class="form-section mb-4">
                    <h5 class="form-section-title">
                        <i class="fas fa-briefcase"></i>
                        Dados Profissionais
                    </h5>
                    <hr class="mb-3">

                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="position" class="form-label">
                                    Cargo <span class="required">*</span>
                                </label>
                                <input type="text"
                                       class="form-control @error('position') is-invalid @enderror"
                                       id="position"
                                       name="position"
                                       value="{{ old('position') }}"
                                       placeholder="Ex: Vendedor, Gerente..."
                                       required>
                                @error('position')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="employee_type" class="form-label">
                                    Tipo de Funcionário <span class="required">*</span>
                                </label>
                                <select class="form-control @error('employee_type') is-invalid @enderror"
                                        id="employee_type"
                                        name="employee_type"
                                        required>
                                    <option value="">Selecione...</option>
                                    @foreach($employeeTypes ?? [] as $key => $label)
                                        <option value="{{ $key }}" {{ old('employee_type') == $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('employee_type')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="salary" class="form-label">Salário Base</label>
                                <div class="input-group">
                                    <span class="input-group-text">KZ</span>
                                    <input type="number"
                                           class="form-control @error('salary') is-invalid @enderror"
                                           id="salary"
                                           name="salary"
                                           value="{{ old('salary') }}"
                                           step="0.01"
                                           min="0"
                                           placeholder="0.00">
                                </div>
                                @error('salary')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row g-3 mt-2">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="hire_date" class="form-label">
                                    Data de Contratação <span class="required">*</span>
                                </label>
                                <input type="date"
                                       class="form-control @error('hire_date') is-invalid @enderror"
                                       id="hire_date"
                                       name="hire_date"
                                       value="{{ old('hire_date') }}"
                                       required>
                                @error('hire_date')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-control @error('status') is-invalid @enderror"
                                        id="status"
                                        name="status">
                                    <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Ativo</option>
                                    <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inativo</option>
                                    <option value="suspended" {{ old('status') == 'suspended' ? 'selected' : '' }}>Suspenso</option>
                                </select>
                                <small class="form-hint">Para desligamento, use a opção "Desligar" nos detalhes do funcionário</small>
                                @error('status')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="user_id" class="form-label">Usuário (Acesso ao Sistema)</label>
                                <select class="form-control @error('user_id') is-invalid @enderror"
                                        id="user_id"
                                        name="user_id">
                                    <option value="">Nenhum usuário</option>
                                    @foreach($users ?? [] as $user)
                                        <option value="{{ $user->id }}" {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }} ({{ $user->email }})
                                        </option>
                                    @endforeach
                                </select>
                                <small class="form-hint">Associe a um usuário existente para acesso ao sistema</small>
                                @error('user_id')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Benefícios -->
                <div class="form-section mb-4">
                    <h5 class="form-section-title">
                        <i class="fas fa-gift"></i>
                        Benefícios
                    </h5>
                    <hr class="mb-3">

                    <div class="row g-3">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="benefits_inss" class="form-label">INSS (%)</label>
                                <input type="number"
                                       class="form-control"
                                       id="benefits_inss"
                                       name="benefits[inss]"
                                       value="{{ old('benefits.inss') }}"
                                       step="0.01"
                                       min="0"
                                       max="100"
                                       placeholder="0.00">
                                <small class="form-hint">Percentual do INSS</small>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="benefits_irt" class="form-label">IRT (%)</label>
                                <input type="number"
                                       class="form-control"
                                       id="benefits_irt"
                                       name="benefits[irt]"
                                       value="{{ old('benefits.irt') }}"
                                       step="0.01"
                                       min="0"
                                       max="100"
                                       placeholder="0.00">
                                <small class="form-hint">Percentual do IRT</small>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="benefits_bonus" class="form-label">Bônus (KZ)</label>
                                <input type="number"
                                       class="form-control"
                                       id="benefits_bonus"
                                       name="benefits[bonus]"
                                       value="{{ old('benefits.bonus') }}"
                                       step="0.01"
                                       min="0"
                                       placeholder="0.00">
                                <small class="form-hint">Valor do bônus mensal</small>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label">Benefícios Adicionais</label>
                                <div class="d-flex flex-wrap gap-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               id="benefits_health_insurance" 
                                               name="benefits[health_insurance]" 
                                               value="1"
                                               {{ old('benefits.health_insurance') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="benefits_health_insurance">
                                            Seguro Saúde
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               id="benefits_meal_voucher" 
                                               name="benefits[meal_voucher]" 
                                               value="1"
                                               {{ old('benefits.meal_voucher') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="benefits_meal_voucher">
                                            Vale Refeição
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               id="benefits_transport_voucher" 
                                               name="benefits[transport_voucher]" 
                                               value="1"
                                               {{ old('benefits.transport_voucher') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="benefits_transport_voucher">
                                            Vale Transporte
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Emergência -->
                <div class="form-section mb-4">
                    <h5 class="form-section-title">
                        <i class="fas fa-phone-alt"></i>
                        Contato de Emergência
                    </h5>
                    <hr class="mb-3">

                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="emergency_contact_name" class="form-label">Nome do Contato</label>
                                <input type="text"
                                       class="form-control @error('emergency_contact_name') is-invalid @enderror"
                                       id="emergency_contact_name"
                                       name="emergency_contact_name"
                                       value="{{ old('emergency_contact_name') }}"
                                       placeholder="Nome da pessoa para contato de emergência">
                                @error('emergency_contact_name')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="emergency_contact_phone" class="form-label">Telefone de Emergência</label>
                                <input type="text"
                                       class="form-control @error('emergency_contact_phone') is-invalid @enderror"
                                       id="emergency_contact_phone"
                                       name="emergency_contact_phone"
                                       value="{{ old('emergency_contact_phone') }}"
                                       placeholder="+244 923 456 789">
                                @error('emergency_contact_phone')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Foto -->
                <div class="form-section mb-4">
                    <h5 class="form-section-title">
                        <i class="fas fa-camera"></i>
                        Foto
                    </h5>
                    <hr class="mb-3">

                    <div class="row g-3">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="photo_url" class="form-label">URL da Foto</label>
                                <input type="url"
                                       class="form-control @error('photo_url') is-invalid @enderror"
                                       id="photo_url"
                                       name="photo_url"
                                       value="{{ old('photo_url') }}"
                                       placeholder="https://exemplo.com/foto.jpg">
                                <small class="form-hint">URL da foto do funcionário</small>
                                @error('photo_url')
                                    <div class="form-error">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Botões -->
                <div class="form-actions d-flex justify-content-end gap-2 mt-4">
                    <a href="{{ route('mercado.funcionarios.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-times"></i>
                        Cancelar
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i>
                        Criar Funcionário
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .form-section {
        margin-bottom: 1.5rem;
        padding: 0.5rem 0;
    }

    .form-section-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: #1a1a2e;
        margin-bottom: 0.5rem;
    }

    .form-section-title i {
        color: #e03030;
        margin-right: 0.5rem;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .required {
        color: #e03030;
        margin-left: 0.125rem;
    }

    .form-error {
        font-size: 0.75rem;
        color: #e03030;
        margin-top: 0.25rem;
    }

    .form-hint {
        font-size: 0.7rem;
        color: #9ca3af;
        margin-top: 0.25rem;
        display: block;
    }

    .form-check {
        margin-bottom: 0.5rem;
    }

    .form-check-input:checked {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

    .form-actions {
        border-top: 1px solid #e5e7eb;
        padding-top: 1.5rem;
        margin-top: 0.5rem;
    }

    .input-group-text {
        background-color: #f0f2f5;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        font-size: 0.8125rem;
        color: #6b7280;
    }

    .input-group .form-control {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .form-control:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
    }

    @media (max-width: 768px) {
        .form-actions {
            flex-direction: column;
        }
        .form-actions .btn {
            width: 100%;
        }
        .form-section-title {
            font-size: 0.85rem;
        }
        .d-flex.flex-wrap.gap-3 {
            gap: 0.5rem !important;
        }
    }
</style>
@endpush