@extends('layouts.app', ['title' => 'Clientes'])
@section('content')
<div class="mt-3">
    <div class="row">
        <div class="card">
            <div class="card-body">

                {{-- BOTÕES TOPO --}}
                <div class="col-md-12 mb-3">
                    @can('clientes_create')
                    <a href="{{ route('clientes.create') }}" class="btn btn-success">
                        <i class="ri-add-circle-fill"></i> Novo Cliente
                    </a>
                    <a href="{{ route('clientes.import') }}" class="btn btn-info">
                        <i class="ri-file-upload-line"></i> Upload
                    </a>
                    @endcan
                    <button type="button" class="btn btn-warning ms-1" data-bs-toggle="modal" data-bs-target="#modalScoreConfig">
                        <i class="ri-medal-line"></i> Score
                    </button>
                </div>

                {{-- MODAL SCORE --}}
                <div class="modal fade" id="modalScoreConfig" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header bg-warning">
                                <h5 class="modal-title text-dark"><i class="ri-medal-line"></i> Configuração de Score</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <form action="{{ route('config-score.store') }}" method="POST">
                                @csrf
                                <input type="hidden" name="empresa_id" value="{{ request()->empresa_id }}">
                                <div class="modal-body">
                                    <div class="alert alert-light border" style="font-size:12px;">
                                        🥇 Ouro = 800+ pts &nbsp;|&nbsp;
                                        🥈 Prata = 600–799 pts &nbsp;|&nbsp;
                                        🥉 Bronze = 400–599 pts &nbsp;|&nbsp;
                                        🔴 Mau pagador = abaixo do limite
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Limite mínimo de score (0–1000)</label>
                                        <input type="number" class="form-control" name="score_limite_bloqueio" min="0" max="1000"
                                            value="{{ optional(\App\Models\ConfigGeral::where('empresa_id', request()->empresa_id)->first())->score_limite_bloqueio ?? 400 }}">
                                        <small class="text-muted">Clientes abaixo deste valor recebem 🔴</small>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Bloquear venda fiado com score baixo?</label>
                                        <select class="form-select" name="score_bloquear_fiado">
                                            @php $cfg = \App\Models\ConfigGeral::where('empresa_id', request()->empresa_id)->first(); @endphp
                                            <option value="0" {{ (!$cfg || $cfg->score_bloquear_fiado == 0) ? 'selected' : '' }}>Não bloquear</option>
                                            <option value="1" {{ ($cfg && $cfg->score_bloquear_fiado == 1) ? 'selected' : '' }}>Bloquear venda fiado</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                                    <button type="submit" class="btn btn-warning">Salvar</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <hr class="mt-1">

                {{-- FILTROS --}}
                <div class="col-lg-12">
                    {!!Form::open()->fill(request()->all())->get()!!}
                    <div class="row g-2">
                        <div class="col-md-3">
                            {!!Form::text('razao_social', 'Pesquisar por nome')!!}
                        </div>
                        <div class="col-md-2">
                            {!!Form::text('cpf_cnpj', 'Pesquisar por CPF/CNPJ')->attrs(['class' => 'cpf_cnpj'])->type('tel')!!}
                        </div>
                        <div class="col-md-2">
                            {!!Form::date('start_date', 'Data inicial cadastro')!!}
                        </div>
                        <div class="col-md-2">
                            {!!Form::date('end_date', 'Data final cadastro')!!}
                        </div>
                        <div class="col-md-2">
                            {!!Form::select('ordem', 'Ordenar por', ['razao_social' => 'Razão social', 'numero_sequencial' => 'Código', 'created_at' => 'Data de cadastro'])->attrs(['class' => 'form-select'])!!}
                        </div>
                        <div class="col-md-3 d-flex align-items-end gap-2">
                            <button class="btn btn-primary" type="submit"><i class="ri-search-line"></i> Pesquisar</button>
                            <a class="btn btn-danger" href="{{ route('clientes.index') }}"><i class="ri-eraser-fill"></i> Limpar</a>
                        </div>
                    </div>
                    {!!Form::close()!!}
                </div>

                <div class="mt-3 mb-2 d-flex align-items-center gap-3">
                    <h5 class="mb-0">Total de registros: <strong>{{ $data->total() }}</strong></h5>
                    @can('clientes_delete')
                    <div class="form-check mb-0">
                        <input class="form-check-input" type="checkbox" id="select-all-checkbox">
                        <label class="form-check-label" for="select-all-checkbox">Selecionar todos</label>
                    </div>
                    @endcan
                </div>

                {{-- CARDS --}}
                <div class="row g-3">
                    @forelse($data as $item)
                    @php $scoreData = $item->getScoreMedalha(); @endphp
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
                        <div class="card h-100 shadow-sm border-0 cliente-card" style="border-radius:16px;overflow:hidden;">

                            {{-- AVATAR --}}
                            <div class="text-center pt-3 pb-1 position-relative">
                                @can('clientes_delete')
                                <div class="position-absolute top-0 start-0 p-2">
                                    <input class="form-check-input check-delete" type="checkbox" name="item_delete[]" value="{{ $item->id }}">
                                </div>
                                @endcan
                                <div class="position-absolute top-0 end-0 p-2">
                                    <span title="{{ $scoreData['label'] }} — {{ $scoreData['score'] }} pts" style="font-size:20px;cursor:default;">{{ $scoreData['icon'] }}</span>
                                </div>
                                <div style="width:72px;height:72px;border-radius:50%;margin:0 auto;overflow:hidden;position:relative;">
                                    @if($item->foto)
                                    <img src="/uploads/clientes/{{ $item->foto }}"
                                        style="width:72px;height:72px;object-fit:cover;border-radius:50%;border:2px solid #7b5cff;"
                                        onerror="this.replaceWith(document.getElementById('avatar-fallback-{{ $item->id }}').content.cloneNode(true))">
                                    <template id="avatar-fallback-{{ $item->id }}">
                                        <div style="width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#4776e6,#8e54e9);display:flex;align-items:center;justify-content:center;">
                                            <i class="ri-user-3-fill" style="font-size:32px;color:#fff;"></i>
                                        </div>
                                    </template>
                                    @else
                                    <div style="width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#4776e6,#8e54e9);display:flex;align-items:center;justify-content:center;">
                                        <i class="ri-user-3-fill" style="font-size:32px;color:#fff;"></i>
                                    </div>
                                    @endif
                                </div>
                            </div>

                            {{-- CORPO --}}
                            <div class="card-body px-2 py-2 text-center">
                                <p class="fw-bold mb-1 text-truncate" style="font-size:13px;" title="{{ $item->razao_social }}">
                                    {{ $item->razao_social }}
                                </p>
                                <p class="text-muted mb-1" style="font-size:11px;">
                                    <i class="ri-id-card-line"></i> {{ $item->cpf_cnpj ?: '—' }}
                                </p>
                                <p class="text-muted mb-1" style="font-size:11px;">
                                    <i class="ri-coin-line" style="color:#f5a623;"></i>
                                    Saldo: R$ {{ __moeda($item->valor_credito ?? 0) }}
                                </p>
                                @if($item->limite_credito > 0)
                                <p class="text-muted mb-1" style="font-size:11px;">
                                    <i class="ri-bank-card-line" style="color:#4776e6;"></i>
                                    Limite: R$ {{ __moeda($item->limite_credito ?? 0) }}
                                </p>
                                @endif
                                @if($item->telefone)
                                <p class="text-muted mb-1" style="font-size:11px;">
                                    <i class="ri-phone-line"></i> {{ $item->telefone }}
                                </p>
                                @endif

                                {{-- STATUS + SCORE --}}
                                <div class="d-flex justify-content-center align-items-center gap-2 mb-2">
                                    @if($item->status)
                                    <span class="badge bg-success" style="font-size:10px;">Ativo</span>
                                    @else
                                    <span class="badge bg-danger" style="font-size:10px;">Inativo</span>
                                    @endif
                                    <span style="font-size:11px;font-weight:bold;color:{{ $scoreData['color'] }};">
                                        <i class="ri-shield-star-line"></i> Score: {{ $scoreData['score'] }}
                                    </span>
                                </div>
                            </div>

                            {{-- AÇÕES --}}
                            <div class="card-footer px-2 py-2 d-flex justify-content-center gap-1" style="background:rgba(0,0,0,.04);">
                                <form action="{{ route('clientes.destroy', $item->id) }}" method="post" id="form-{{$item->id}}">
                                    @method('delete')
                                    @csrf
                                    @can('clientes_edit')
                                    <a class="btn btn-warning btn-sm" href="{{ route('clientes.edit', [$item->id]) }}" title="Editar">
                                        <i class="ri-pencil-fill"></i>
                                    </a>
                                    @endcan
                                    @can('clientes_delete')
                                    <button type="button" class="btn btn-danger btn-sm btn-delete" title="Excluir">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                    @endcan
                                    <a class="btn btn-dark btn-sm" href="{{ route('clientes.cash-back', [$item->id]) }}" title="CashBack">
                                        <i class="ri-coins-fill"></i>
                                    </a>
                                    <a class="btn btn-primary btn-sm" href="{{ route('clientes.historico', [$item->id]) }}" title="Histórico">
                                        <i class="ri-file-list-3-fill"></i>
                                    </a>
                                </form>
                            </div>

                        </div>
                    </div>
                    @empty
                    <div class="col-12 text-center py-5">
                        <i class="ri-user-search-line" style="font-size:48px;color:#ccc;"></i>
                        <p class="text-muted mt-2">Nenhum cliente encontrado</p>
                    </div>
                    @endforelse
                </div>

                {{-- DELETE EM MASSA --}}
                @can('clientes_delete')
                <form action="{{ route('clientes.destroy-select') }}" method="post" id="form-delete-select" class="mt-3">
                    @method('delete')
                    @csrf
                    <div></div>
                    <button type="button" class="btn btn-danger btn-sm btn-delete-all" disabled>
                        <i class="ri-close-circle-line"></i> Remover selecionados
                    </button>
                </form>
                @endcan

                <br>
                {!! $data->appends(request()->all())->links() !!}

            </div>
        </div>
    </div>
</div>

@include('modals._crm')
@endsection
@section('js')
<script src="/js/delete_selecionados.js"></script>
<script>
    function modalCrm(cliente_id){
        $('#cliente_id').val(cliente_id)
        $('#modal_crm').modal('show')
        montaSelect2()
    }
    // select-all para cards
    document.getElementById('select-all-checkbox')?.addEventListener('change', function(){
        document.querySelectorAll('.check-delete').forEach(c => c.checked = this.checked);
    });

    // delete individual nos cards
    $(document).on('click', '.btn-delete', function(){
        var form = $(this).closest('form');
        swal({
            title: "Excluir cliente?",
            text: "Esta ação não pode ser desfeita!",
            icon: "warning",
            buttons: ["Cancelar", "Excluir"],
            dangerMode: true,
        }).then((confirm) => {
            if(confirm) form.submit();
        });
    });
</script>
<script src="/js/modal_crm.js"></script>
@endsection