@extends('layouts.app')

@section('title', isset($guide) ? 'Editar Guia' : 'Novo Guia Turístico')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">{{ isset($guide) ? 'Editar Guia' : 'Novo Guia Turístico' }}</h1>
        <p class="page-subtitle">Dados do guia e configuração de comissão</p>
    </div>
    <a href="{{ route('guides.index') }}" class="btn btn-ghost">← Voltar</a>
</div>

<form method="POST" action="{{ isset($guide) ? route('guides.update', $guide) : route('guides.store') }}">
    @csrf
    @if(isset($guide)) @method('PUT') @endif

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;">

        <div class="card">
            <div class="card-header"><h3 class="card-title">Dados Pessoais</h3></div>
            <div class="card-body form-grid">
                <div class="form-group" style="grid-column:span 2;">
                    <label class="form-label">Tipo de Pessoa *</label>
                    <div style="display:flex;gap:1rem;">
                        <label style="display:flex;align-items:center;gap:.4rem;cursor:pointer;">
                            <input type="radio" name="tipo_pessoa" value="fisica" @checked(old('tipo_pessoa', $guide->tipo_pessoa ?? 'fisica') === 'fisica')> Física
                        </label>
                        <label style="display:flex;align-items:center;gap:.4rem;cursor:pointer;">
                            <input type="radio" name="tipo_pessoa" value="juridica" @checked(old('tipo_pessoa', $guide->tipo_pessoa ?? '') === 'juridica')> Jurídica
                        </label>
                    </div>
                </div>
                <div class="form-group" style="grid-column:span 2;">
                    <label class="form-label">Nome *</label>
                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $guide->name ?? '') }}" required>
                    @error('name')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>
                <div class="form-group">
                    <label class="form-label">CPF / CNPJ</label>
                    <input type="text" name="cpf_cnpj" class="form-control" value="{{ old('cpf_cnpj', $guide->cpf_cnpj ?? '') }}" maxlength="18">
                </div>
                <div class="form-group">
                    <label class="form-label">Telefone</label>
                    <input type="text" name="phone" class="form-control" value="{{ old('phone', $guide->phone ?? '') }}" maxlength="20">
                </div>
                <div class="form-group" style="grid-column:span 2;">
                    <label class="form-label">E-mail</label>
                    <input type="email" name="email" class="form-control" value="{{ old('email', $guide->email ?? '') }}">
                </div>
                <div class="form-group" style="grid-column:span 2;">
                    <label class="form-label">Chave Pix</label>
                    <input type="text" name="pix_key" class="form-control" value="{{ old('pix_key', $guide->pix_key ?? '') }}" placeholder="CPF, e-mail, telefone ou chave aleatória">
                </div>
                <div class="form-group" style="grid-column:span 2;">
                    <label class="form-label">Observações</label>
                    <textarea name="observations" class="form-control" rows="3">{{ old('observations', $guide->observations ?? '') }}</textarea>
                </div>
                <div class="form-group">
                    <label class="form-label" style="display:flex;align-items:center;gap:.5rem;">
                        <input type="hidden" name="is_active" value="0">
                        <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $guide->is_active ?? true))>
                        Guia ativo
                    </label>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><h3 class="card-title">Configuração de Comissão</h3></div>
            <div class="card-body form-grid">
                <div class="form-group" style="grid-column:span 2;">
                    <label class="form-label">Tipo de Comissão *</label>
                    <div style="display:flex;gap:1rem;">
                        <label style="display:flex;align-items:center;gap:.4rem;cursor:pointer;">
                            <input type="radio" name="commission_type" value="percent" id="ct_percent" @checked(old('commission_type', $guide->commission_type ?? 'percent') === 'percent') onchange="toggleCommission()"> Percentual
                        </label>
                        <label style="display:flex;align-items:center;gap:.4rem;cursor:pointer;">
                            <input type="radio" name="commission_type" value="fixed" id="ct_fixed" @checked(old('commission_type', $guide->commission_type ?? '') === 'fixed') onchange="toggleCommission()"> Valor Fixo
                        </label>
                    </div>
                </div>

                <div class="form-group" id="field-percent" style="grid-column:span 2;">
                    <label class="form-label">Percentual de Comissão (%)</label>
                    <input type="number" name="commission_percent" class="form-control" step="0.0001" min="0" max="100" value="{{ old('commission_percent', $guide->commission_percent ?? '') }}">
                </div>

                <div class="form-group" id="field-fixed" style="grid-column:span 2;display:none;">
                    <label class="form-label">Valor Fixo de Comissão (R$)</label>
                    <input type="number" name="commission_fixed" class="form-control" step="0.0001" min="0" value="{{ old('commission_fixed', $guide->commission_fixed ?? '') }}">
                </div>

                <div class="form-group" style="grid-column:span 2;">
                    <div style="background:#f0f4ff;border-radius:8px;padding:1rem;">
                        <p style="margin:0;color:var(--text-muted);font-size:.875rem;">
                            A comissão é calculada automaticamente ao finalizar uma venda vinculada a este guia.
                            O pagamento de comissões pode ser gerenciado em <strong>Comissões</strong>.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="margin-top:1.5rem;display:flex;justify-content:flex-end;gap:1rem;">
        <a href="{{ route('guides.index') }}" class="btn btn-ghost">Cancelar</a>
        <button type="submit" class="btn btn-primary">{{ isset($guide) ? 'Salvar Alterações' : 'Cadastrar Guia' }}</button>
    </div>
</form>

<script>
function toggleCommission() {
    const isFixed = document.getElementById('ct_fixed').checked;
    document.getElementById('field-percent').style.display = isFixed ? 'none' : 'block';
    document.getElementById('field-fixed').style.display   = isFixed ? 'block' : 'none';
}
toggleCommission();
</script>
@endsection