@extends('layouts.app')

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

@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 Comerciante
            </h4>
            <a href="{{ route('mercado.comerciantes.index') }}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-arrow-left"></i>
                Voltar
            </a>
        </div>

        <div class="s-card-body">
            @include('admin.mercado.comerciantes.partials.form', [
                'formAction' => route('mercado.comerciantes.store'),
                'submitText' => 'Criar Comerciante',
                'comerciante' => null
            ])
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .s-card-body {
        padding: 24px !important;
    }
    
    .form-section {
        background: var(--bg-card, #ffffff);
        border-radius: var(--radius-md, 10px);
        margin-bottom: 1.5rem;
    }
    
    .form-section-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary, #1a1a2e);
        margin-bottom: 0.5rem;
    }
    
    .form-section-title i {
        color: var(--sinagem-red, #e03030);
        margin-right: 0.5rem;
    }
    
    .form-group {
        margin-bottom: 1rem;
    }
    
    .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 {
        padding-top: 1rem;
        border-top: 1px solid var(--border-color, #e5e7eb);
        margin-top: 1rem;
    }
    
    @media (max-width: 768px) {
        .s-card-body {
            padding: 16px !important;
        }
        
        .form-actions {
            flex-direction: column;
        }
        
        .form-actions .btn {
            width: 100%;
        }
    }
</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');
            }
        });
    }
});
</script>
@endpush