@extends('layouts.app')

@section('title', 'Novo Escamador')

@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 Escamador
            </h4>
            <a href="{{ route('mercado.escamadores.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.escamadores.store') }}" method="POST">
                @csrf

                <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="email" class="form-label">
                                Email <span class="required">*</span>
                            </label>
                            <input type="email"
                                   class="form-control @error('email') is-invalid @enderror"
                                   id="email"
                                   name="email"
                                   value="{{ old('email') }}"
                                   placeholder="escamador@email.com"
                                   required>
                            @error('email')
                                <div class="form-error">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="password" class="form-label">
                                Senha <span class="required">*</span>
                            </label>
                            <input type="password"
                                   class="form-control @error('password') is-invalid @enderror"
                                   id="password"
                                   name="password"
                                   placeholder="••••••••"
                                   required>
                            @error('password')
                                <div class="form-error">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="password_confirmation" class="form-label">
                                Confirmar Senha <span class="required">*</span>
                            </label>
                            <input type="password"
                                   class="form-control"
                                   id="password_confirmation"
                                   name="password_confirmation"
                                   placeholder="••••••••"
                                   required>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="badge_number" class="form-label">
                                Nº de Badge <span class="required">*</span>
                            </label>
                            <input type="text"
                                   class="form-control @error('badge_number') is-invalid @enderror"
                                   id="badge_number"
                                   name="badge_number"
                                   value="{{ old('badge_number') }}"
                                   placeholder="Número de identificação"
                                   required>
                            @error('badge_number')
                                <div class="form-error">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <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-12">
                        <div class="form-group">
                            <label for="markets" class="form-label">Mercados de Atuação</label>
                            <select class="form-control @error('markets') is-invalid @enderror"
                                    id="markets"
                                    name="markets[]"
                                    multiple
                                    size="5">
                                @foreach($markets ?? [] as $market)
                                    <option value="{{ $market->id }}" {{ old('markets') && in_array($market->id, old('markets')) ? 'selected' : '' }}>
                                        {{ $market->name }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="form-hint">Segure Ctrl (ou Cmd no Mac) para selecionar múltiplos mercados</small>
                            @error('markets')
                                <div class="form-error">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="form-group">
                            <label for="address" class="form-label">Endereço</label>
                            <textarea class="form-control @error('address') is-invalid @enderror"
                                      id="address"
                                      name="address"
                                      rows="2"
                                      placeholder="Endereço completo">{{ old('address') }}</textarea>
                            @error('address')
                                <div class="form-error">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="form-actions d-flex justify-content-end gap-2 mt-4">
                    <a href="{{ route('mercado.escamadores.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 Escamador
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .required {
        color: var(--sinagem-red, #e03030);
    }

    .form-error {
        font-size: 0.75rem;
        color: var(--sinagem-red, #e03030);
        margin-top: 0.25rem;
    }

    .form-hint {
        font-size: 0.7rem;
        color: var(--text-muted, #9ca3af);
        margin-top: 0.25rem;
        display: block;
    }

    .form-actions {
        border-top: 1px solid var(--border-color, #e5e7eb);
        padding-top: 1.5rem;
    }

    select[multiple] {
        padding: 0.5rem;
    }

    select[multiple] option {
        padding: 0.5rem;
        margin: 0.125rem 0;
        border-radius: var(--radius-sm, 4px);
    }

    select[multiple] option:checked {
        background: var(--sinagem-red, #e03030) linear-gradient(0deg, var(--sinagem-red, #e03030) 0%, var(--sinagem-red, #e03030) 100%);
        color: white;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const phoneInput = document.getElementById('phone');
    if (phoneInput) {
        phoneInput.addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');
            if (value.length === 9) {
                e.target.value = value;
            } else if (value.length === 12) {
                e.target.value = value.replace(/(\d{3})(\d{3})(\d{3})/, '+244 $1 $2 $3');
            }
        });
    }

    const password = document.getElementById('password');
    const passwordConfirm = document.getElementById('password_confirmation');

    function validatePassword() {
        if (password.value !== passwordConfirm.value) {
            passwordConfirm.setCustomValidity('As senhas não coincidem');
        } else {
            passwordConfirm.setCustomValidity('');
        }
    }

    password.addEventListener('change', validatePassword);
    passwordConfirm.addEventListener('keyup', validatePassword);
});
</script>
@endpush
