@extends('layouts.master')
@section('title', 'Novo Cliente')
@section('main-content')
    <div class="container-fluid">
        <!-- Breadcrumb start -->
        <div class="row m-1">
            <div class="col-12">
                <h5><i class="ph-duotone ph-buildings f-s-16 me-2"></i>Novo Cliente</h5>
                <ul class="app-line-breadcrumbs mb-3">
                    <li class="">
                        <a href="{{ route('clientes.index') }}" class="f-s-14 f-w-500">
                            <span>Meus Clientes</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="#" class="f-s-14 f-w-500">Novo Cliente</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- Breadcrumb end -->

        <div class="row">
            <div class="col-xl-8">
                <div class="card">
                    <div class="card-header">
                        <h5>Cadastrar Novo Cliente</h5>
                        <p class="text-muted small mb-0">
                            <i class="ph ph-info me-1"></i>
                            @if($franquias->count() > 1)
                                Você pode escolher a franquia abaixo
                            @else
                                Este cliente será vinculado à franquia: <strong>{{ $franquias->first()->name }}</strong>
                            @endif
                        </p>
                    </div>
                    <div class="card-body">
                        {{-- OWASP A02:2021 - CSRF Protection --}}
                        {{-- OWASP A03:2021 - Validação no backend (ClienteController) --}}
                        <form action="{{ route('clientes.store') }}"
                              method="POST"
                              enctype="multipart/form-data"
                              id="formCliente">
                            @csrf

                            <!-- Seleção de Franquia (se tiver múltiplas) -->
                            @if($franquias->count() > 1)
                            <div class="mb-4">
                                <label for="empresa_pai_id" class="form-label">
                                    Franquia <span class="text-danger">*</span>
                                </label>
                                <select class="form-select @error('empresa_pai_id') is-invalid @enderror"
                                        id="empresa_pai_id"
                                        name="empresa_pai_id"
                                        required>
                                    <option value="">Selecione a franquia...</option>
                                    @foreach($franquias as $franquia)
                                        <option value="{{ $franquia->id }}"
                                                {{ old('empresa_pai_id') == $franquia->id ? 'selected' : '' }}>
                                            {{ $franquia->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('empresa_pai_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">
                                    <i class="ph ph-info me-1"></i>
                                    Você tem acesso a {{ $franquias->count() }} franquias
                                </small>
                            </div>
                            @else
                            <!-- Campo hidden se tiver apenas 1 franquia -->
                            <input type="hidden" name="empresa_pai_id" value="{{ $franquias->first()->id }}">
                            @endif

                            <hr class="mb-4">

                            <!-- Nome -->
                            <div class="mb-3">
                                <label for="name" class="form-label">
                                    Nome do Cliente <span class="text-danger">*</span>
                                </label>
                                <input type="text"
                                       class="form-control @error('name') is-invalid @enderror"
                                       id="name"
                                       name="name"
                                       value="{{ old('name') }}"
                                       required
                                       minlength="3"
                                       maxlength="255"
                                       placeholder="Ex: Restaurante Sabor da Casa"
                                       autofocus>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Mínimo 3 caracteres, apenas letras, espaços e hífens</small>
                            </div>

                            <!-- Email -->
                            <div class="mb-3">
                                <label for="email" class="form-label">E-mail</label>
                                <input type="email"
                                       class="form-control @error('email') is-invalid @enderror"
                                       id="email"
                                       name="email"
                                       value="{{ old('email') }}"
                                       maxlength="255"
                                       placeholder="contato@cliente.com.br">
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Email deve ser válido (verificação RFC + DNS)</small>
                            </div>

                            <!-- Telefone -->
                            <div class="mb-3">
                                <label for="phone" class="form-label">Telefone</label>
                                <input type="text"
                                       class="form-control @error('phone') is-invalid @enderror"
                                       id="phone"
                                       name="phone"
                                       value="{{ old('phone') }}"
                                       maxlength="20"
                                       placeholder="(00) 0000-0000">
                                @error('phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Apenas números, espaços, parênteses, hífens e +</small>
                            </div>

                            <!-- Endereço -->
                            <div class="mb-3">
                                <label for="address" class="form-label">Endereço</label>
                                <textarea class="form-control @error('address') is-invalid @enderror"
                                          id="address"
                                          name="address"
                                          rows="3"
                                          maxlength="500"
                                          placeholder="Rua, número, bairro, cidade - UF">{{ old('address') }}</textarea>
                                @error('address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Máximo 500 caracteres</small>
                            </div>

                            <!-- Logomarca -->
                            {{-- OWASP A05:2021 - Upload seguro com validações --}}
                            <div class="mb-3">
                                <label for="logomarca" class="form-label">Logomarca</label>
                                <input type="file"
                                       class="form-control @error('logomarca') is-invalid @enderror"
                                       id="logomarca"
                                       name="logomarca"
                                       accept="image/jpeg,image/png,image/jpg,image/gif,image/webp">
                                @error('logomarca')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">
                                    <i class="ph ph-info me-1"></i>
                                    Formatos: JPG, PNG, GIF, WEBP | Tamanho máx: 2MB | Dimensões máx: 4000x4000px
                                </small>

                                <!-- Preview da imagem -->
                                <div id="imagePreview" class="mt-3" style="display: none;">
                                    <img id="preview" src="#" alt="Preview" class="rounded" style="max-width: 200px; max-height: 200px;">
                                </div>
                            </div>

                            <hr class="my-4">

                            <!-- Botões -->
                            <div class="d-flex justify-content-between">
                                <a href="{{ route('clientes.index') }}" class="btn btn-secondary">
                                    <i class="ph ph-arrow-left me-1"></i>Voltar
                                </a>
                                <button type="submit" class="btn btn-primary" id="btnSubmit">
                                    <i class="ph ph-check me-1"></i>Cadastrar Cliente
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Card de Informações -->
            <div class="col-xl-4">
                <div class="card bg-light-info">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0"><i class="ph ph-info me-2"></i>Informações</h5>
                    </div>
                    <div class="card-body">
                        <h6>Franquia Responsável</h6>
                        <p class="mb-3">
                            @if($franquias->count() > 1)
                                <strong>{{ $franquias->count() }} franquias disponíveis</strong>
                                <br><small class="text-muted">Escolha a franquia no formulário</small>
                            @else
                                <strong>{{ $franquias->first()->name }}</strong>
                            @endif
                        </p>

                        <h6>Validações de Segurança</h6>
                        <ul class="small mb-0">
                            <li>Nome: apenas letras e hífens</li>
                            <li>Email: validação RFC + DNS</li>
                            <li>Telefone: apenas números e símbolos</li>
                            <li>Imagem: máx 2MB, 4000x4000px</li>
                            <li>Todos dados são sanitizados</li>
                        </ul>

                        <hr>

                        <h6>Após o Cadastro</h6>
                        <p class="small mb-0">
                            O cliente será criado com status <strong class="text-success">Ativo</strong> e você poderá:
                        </p>
                        <ul class="small mb-0">
                            <li>Configurar hotspots</li>
                            <li>Criar publicações</li>
                            <li>Visualizar relatórios</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- OWASP A03:2021 - Client-side validation (complementar, não substitui server-side) --}}
    {{-- OWASP A05:2021 - CSP-safe inline scripts com nonce (se implementado) --}}
    @push('scripts')
    <script>
        // Preview de imagem
        document.getElementById('logomarca').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                // Validação client-side básica (não confiável, apenas UX)
                if (file.size > 2048000) { // 2MB
                    alert('Arquivo muito grande! Máximo 2MB.');
                    this.value = '';
                    return;
                }

                const reader = new FileReader();
                reader.onload = function(event) {
                    document.getElementById('preview').src = event.target.result;
                    document.getElementById('imagePreview').style.display = 'block';
                };
                reader.readAsDataURL(file);
            }
        });

        // Prevenir duplo submit (OWASP A04:2021 - Insecure Design)
        document.getElementById('formCliente').addEventListener('submit', function() {
            const btn = document.getElementById('btnSubmit');
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Cadastrando...';
        });

        // Máscara de telefone (opcional, melhora UX)
        const phoneInput = document.getElementById('phone');
        if (phoneInput) {
            phoneInput.addEventListener('input', function(e) {
                let value = e.target.value.replace(/\D/g, '');
                if (value.length > 11) value = value.substring(0, 11);

                if (value.length > 6) {
                    value = value.replace(/^(\d{2})(\d{4,5})(\d{4})$/, '($1) $2-$3');
                } else if (value.length > 2) {
                    value = value.replace(/^(\d{2})(\d{0,5})/, '($1) $2');
                } else if (value.length > 0) {
                    value = value.replace(/^(\d*)/, '($1');
                }

                e.target.value = value;
            });
        }
    </script>
    @endpush
@endsection