@extends('layouts.app')

@section('title', 'Painel do Vendedor')

@section('content')
<div class="container py-6">
    <div class="title-screen" style="text-align:center; margin-bottom: 30px; margin-top: -20px;">
        <h2>Meus Clientes</h2>
    </div>

    <div class="mb-4 d-flex justify-content-between align-items-center flex-nowrap ms-7 me-7 pdx-10">
        <div>
            </div>
        <div class="text-end">
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createClientModal">
                <i class="fas fa-user-plus color-bg"></i> <span class="color-bg">Novo Cliente</span>
            </button>
        </div>
    </div>

    <div id="alertContainer" class="position-fixed top-0 end-0 m-3" style="z-index: 1050;"></div>

    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show position-fixed top-0 end-0 m-3" role="alert" style="z-index: 1050;">
            <strong>Sucesso!</strong> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="container-fluid">
        <div class="table-responsive" style="border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1);">
            <table class="table table-striped mb-0 text-white" id="clientsTable">
                <thead style="background-color: var(--bg-color-secondary);">
                    <tr>
                        <th class="text-muted border-0 pb-3 pt-3">Nome / Contato</th>
                        <th class="text-muted border-0 pb-3 pt-3">Token (Tela)</th>
                        <th class="text-muted border-0 pb-3 pt-3 text-center">Data Cadastro</th>
                        <th class="text-muted border-0 pb-3 pt-3 text-center">Vencimento</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($clients as $client)
                        <tr>
                            <td class="border-0 align-middle" data-label="Nome / Contato">
                                <div class="text-end text-md-start">
                                    <strong>{{ $client->name }}</strong><br>
                                    <small class="text-muted">{{ $client->email }} <br class="d-md-none"> {{ $client->phone ?? 'Sem telefone' }}</small>
                                </div>
                            </td>
                            <td class="border-0 align-middle color-primary font-monospace text-end text-md-start" data-label="Token (Tela)">
                                {{ $client->screens->first()->playback_token ?? 'N/A' }}
                            </td>
                            <td class="border-0 align-middle text-center text-md-center text-end" data-label="Data Cadastro">
                                {{ $client->created_at->format('d/m/Y') }}
                            </td>
                            <td class="border-0 align-middle text-center text-md-center text-end" data-label="Vencimento">
                                @php
                                    $plan = $client->plans->where('expires_at', '>', now())->first();
                                @endphp
                                @if($plan)
                                    <span class="badge bg-success">{{ $plan->expires_at->format('d/m/Y') }}</span>
                                @else
                                    <span class="badge bg-danger">Expirado/Sem Plano</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr id="noClientsRow">
                            <td colspan="4" class="text-center text-muted py-4 border-0">
                                Você ainda não cadastrou nenhum cliente.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="createClientModal" tabindex="-1" aria-labelledby="createClientModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createClientModalLabel">Cadastrar Novo Cliente</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="createClientForm">
                @csrf
                <div class="modal-body">
                    <div id="formErrors" class="alert alert-danger d-none">
                        <ul class="mb-0" id="errorList"></ul>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Nome Completo <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control" required placeholder="João da Silva" autocomplete="off">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">E-mail <span class="text-danger">*</span></label>
                            <input type="email" name="email" class="form-control" required placeholder="joao@email.com" autocomplete="off">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Telefone (WhatsApp) <span class="text-danger">*</span></label>
                            <input type="text" name="phone" class="form-control" required placeholder="(11) 99999-9999" autocomplete="off">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Senha de Acesso <span class="text-danger">*</span></label>
                            <input type="text" name="password" class="form-control" required minlength="8" placeholder="Senha inicial">
                            <small class="text-muted" style="font-size: 0.75rem;">Mínimo 8 caracteres</small>
                        </div>
                    </div>
                    
                    <hr style="border-color: rgba(255, 255, 255, 0.1);">

                    <div class="row mt-3">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Plano <span class="text-danger">*</span></label>
                            <select name="plan_id" class="form-select" required>
                                <option value="" disabled selected>Selecione um plano...</option>
                                @foreach($plans as $plan)
                                    <option value="{{ $plan->id }}">{{ $plan->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Período <span class="text-danger">*</span></label>
                            <select name="period" class="form-select" required>
                                <option value="" disabled selected>Selecione o período...</option>
                                <optgroup label="Testes (Gratuitos)">
                                    <option value="teste_3">Teste 3 Dias</option>
                                    <option value="teste_7">Teste 7 Dias</option>
                                    <option value="teste_14">Teste 14 Dias</option>
                                </optgroup>
                                <optgroup label="Assinaturas (Pagas externamente)">
                                    <option value="mensal">Mensal</option>
                                    <option value="semestral">Semestral</option>
                                    <option value="anual">Anual</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary" id="btnSubmitClient">
                        <span class="color-bg">Criar e Ativar Cliente</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('createClientForm');
        const btnSubmit = document.getElementById('btnSubmitClient');
        const errorContainer = document.getElementById('formErrors');
        const errorList = document.getElementById('errorList');
        const tableBody = document.querySelector('#clientsTable tbody');
        const noClientsRow = document.getElementById('noClientsRow');

        const createClientModalEl = document.getElementById('createClientModal');
        let createClientModalInstance;
        if (createClientModalEl) {
            createClientModalInstance = new bootstrap.Modal(createClientModalEl);
        }

        form.addEventListener('submit', function (e) {
            e.preventDefault();
            
            errorContainer.classList.add('d-none');
            errorList.innerHTML = '';

            if (window.showGlobalLoadingModal) {
                window.showGlobalLoadingModal();
            } else {
                const originalText = btnSubmit.innerHTML;
                btnSubmit.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processando...';
                btnSubmit.disabled = true;
            }

            const formData = new FormData(form);

            fetch("{{ route('vendor.clients.store') }}", {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => { throw err; });
                }
                return response.json();
            })
            .then(data => {
                if (createClientModalInstance) {
                    createClientModalInstance.hide();
                }
                
                form.reset();

                if (noClientsRow) noClientsRow.remove();

                const newRow = `
                    <tr>
                        <td class="border-0 align-middle" data-label="Nome / Contato" style="animation: fadeIn 1s ease;">
                            <div class="text-end text-md-start">
                                <strong>${data.client.name}</strong><br>
                                <small class="text-muted">${data.client.email} <br class="d-md-none"> ${data.client.phone}</small>
                            </div>
                        </td>
                        <td class="border-0 align-middle color-primary font-monospace text-end text-md-start" data-label="Token (Tela)">
                            ${data.client.playback_token}
                        </td>
                        <td class="border-0 align-middle text-end text-md-center" data-label="Data Cadastro">
                            ${data.client.created_at}
                        </td>
                        <td class="border-0 align-middle text-end text-md-center" data-label="Vencimento">
                            <span class="badge bg-success">${data.client.expires_at}</span>
                        </td>
                    </tr>
                `;
                tableBody.insertAdjacentHTML('afterbegin', newRow);

                if (typeof window.showToast === 'function') {
                    window.showToast('Sucesso', data.success, 'success');
                } else {
                    alert(data.success);
                }
            })
            .catch(error => {
                console.error('Erro ao criar cliente:', error);
                
                if (error.errors) {
                    errorContainer.classList.remove('d-none');
                    for (const key in error.errors) {
                        errorList.innerHTML += `<li>${error.errors[key][0]}</li>`;
                    }
                } else {
                    const errorMsg = error.error || error.message || 'Erro de conexão. Tente novamente.';
                    
                    if (typeof SimpleModal === 'function') {
                        SimpleModal({
                            title: 'Aviso',
                            body: `<p class="mb-0 text-center">${errorMsg}</p>`,
                            buttons: [{ label: 'Entendi', class: 'btn-primary', close: true }]
                        });
                    } else if (typeof window.showToast === 'function') {
                        window.showToast('Erro', errorMsg, 'danger');
                    } else {
                        alert(errorMsg);
                    }
                }
            })
            .finally(() => {
                if (window.hideGlobalLoadingModal) {
                    window.hideGlobalLoadingModal();
                } else {
                    btnSubmit.disabled = false;
                    btnSubmit.innerHTML = '<span class="color-bg">Criar e Ativar Cliente</span>';
                }
            });
        });
    });
</script>
@endpush