@extends('admin.base-admin')

@section('page_title', 'Assinaturas | Admin TI')

@section('nav')
@include('admin.partials.nav-ti')
@endsection

@section('page-header')
    <h1>
        <i class="bi bi-envelope-at-fill mr-2" style="font-size:1.1rem;color:#4d7cf5;"></i>
        Assinatura de E-mail
    </h1>
@endsection

@section('content')
<style>
    .ass-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        align-items: start;
    }
    @media (max-width: 768px) {
        .ass-grid { grid-template-columns: 1fr; }
    }

    .ass-card {
        background: var(--dm-surface);
        border: 1px solid var(--dm-nav-border);
        border-radius: 12px;
        padding: 1.5rem;
    }

    .ass-card-title {
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .8px;
        color: var(--dm-text-muted);
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        gap: .4rem;
    }

    .ass-form-group {
        margin-bottom: 1rem;
    }

    .ass-label {
        font-size: .75rem;
        font-weight: 600;
        color: var(--dm-text-muted);
        margin-bottom: .35rem;
        display: block;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .ass-input {
        width: 100%;
        background: var(--dm-bg) !important;
        border: 1px solid var(--dm-nav-border) !important;
        border-radius: 8px !important;
        color: var(--dm-text) !important;
        font-size: .85rem;
        padding: .5rem .75rem;
        transition: border-color .15s;
        outline: none;
    }

    .ass-input:focus {
        border-color: #4d7cf5 !important;
        box-shadow: 0 0 0 3px rgba(77,124,245,.12);
    }

    select.ass-input {
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%239aa4b2' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        padding-right: 2rem !important;
        cursor: pointer;
    }

    .ass-phone-row {
        display: grid;
        grid-template-columns: 80px 1fr;
        gap: .5rem;
    }

    .ass-preview-wrap {
        background: var(--dm-bg);
        border: 1px solid var(--dm-nav-border);
        border-radius: 8px;
        min-height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        margin-bottom: 1rem;
    }

    .ass-preview-wrap img {
        max-width: 100%;
        border-radius: 4px;
        display: block;
    }

    .ass-preview-empty {
        font-size: .8rem;
        color: var(--dm-text-muted);
        text-align: center;
        padding: 2rem;
    }

    .ass-alert {
        padding: .75rem 1rem;
        border-radius: 8px;
        font-size: .82rem;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: flex-start;
        gap: .5rem;
    }

    .ass-alert.warning {
        background: rgba(220,53,69,.07);
        border: 1px solid rgba(220,53,69,.25);
        color: #e05260;
    }
</style>

<div style="padding: 0 .5rem;">

    @if(request()->query('chamado_id'))
        <div class="ass-alert warning">
            <i class="bi bi-exclamation-triangle-fill" style="flex-shrink:0; margin-top:.1rem;"></i>
            <span>
                Assinatura do chamado <strong>#{{ request()->query('chamado_id') }}</strong> rejeitada pelo RH.
                Os campos abaixo foram pré-preenchidos com os dados existentes. Corrija e gere novamente.
            </span>
        </div>
    @endif

    <div class="ass-grid">

        {{-- ── Formulário ── --}}
        <div class="ass-card">
            <div class="ass-card-title">
                <i class="bi bi-person-lines-fill" style="color:#4d7cf5;"></i>
                Informações do Usuário
            </div>

            <div class="ass-form-group">
                <label class="ass-label" for="nome_user">Nome completo</label>
                <input type="text" id="nome_user" name="nome_user" class="ass-input"
                    placeholder="Nome completo" maxlength="20"
                    value="{{ $assinaturaData->fullname ?? '' }}">
                <span id="nome-counter" style="font-size:.7rem; color:var(--dm-text-muted); display:block; margin-top:.25rem; text-align:right;">
                    <span id="nome-chars">{{ strlen($assinaturaData->fullname ?? '') }}</span>/20
                </span>
            </div>

            <div style="display:grid; grid-template-columns:1fr 1fr; gap:.75rem;">
                <div class="ass-form-group">
                    <label class="ass-label" for="filial">Filial</label>
                    <select id="filial" name="filial" class="ass-input">
                        <option value="">Selecione...</option>
                        @foreach ($filiais as $f)
                            <option value="{{ $f['id'] }}"
                                {{ isset($assinaturaData) && $assinaturaData->location == $f['id'] ? 'selected' : '' }}>
                                {{ $f['comment'] }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="ass-form-group">
                    <label class="ass-label" for="setor">Setor</label>
                    <select id="setor" name="setor" class="ass-input">
                        <option value="">Selecione...</option>
                        <option>Crediário</option>
                        <option>Pacote</option>
                        <option>Loja</option>
                        <option>Recepção</option>
                        <option>Caixa</option>
                        <option>Vendas</option>
                        <option>Logística</option>
                        <option>Depósito</option>
                        <option>Contabilidade</option>
                        <option>Vendas Online</option>
                        <option>RH</option>
                        <option>Marketing</option>
                        <option>Financeiro/Contas</option>
                        <option>Compras</option>
                        <option>TI</option>
                    </select>
                </div>
            </div>

            <div class="ass-form-group">
                <label class="ass-label" for="ocupacao">Cargo / Função</label>
                <input type="text" id="ocupacao" name="ocupacao" class="ass-input"
                    placeholder="Cargo ou função"
                    value="{{ $assinaturaData->role ?? '' }}">
            </div>

            <div class="ass-form-group">
                <label class="ass-label">Telefone principal</label>
                <div class="ass-phone-row">
                    <input type="tel" id="ddd" name="ddd" class="ass-input"
                        maxlength="2" placeholder="DDD"
                        value="{{ $assinaturaData->ddd_main ?? '' }}">
                    <input type="tel" id="telefone" name="telefone" class="ass-input telefone"
                        placeholder="Telefone"
                        value="{{ $assinaturaData->number_main ?? '' }}">
                </div>
            </div>

            <div class="ass-form-group">
                <label class="ass-label">Telefone alternativo <span style="color:var(--dm-text-muted); font-weight:400;">(opcional)</span></label>
                <div class="ass-phone-row">
                    <input type="tel" id="ddd-x" name="ddd-x" class="ass-input"
                        maxlength="2" placeholder="DDD"
                        value="{{ $assinaturaData->ddd_extra ?? '' }}">
                    <input type="tel" id="telefone-x" name="telefone-x" class="ass-input telefone"
                        placeholder="Telefone"
                        value="{{ $assinaturaData->number_extra ?? '' }}">
                </div>
            </div>

            <button id="btn-gerar" type="button" class="saas-btn primary" style="width:100%; justify-content:center; padding:.6rem 1rem; font-size:.9rem;">
                <i class="bi bi-magic me-1"></i> Gerar assinatura
            </button>
        </div>

        {{-- ── Preview ── --}}
        <div class="ass-card">
            <div class="ass-card-title">
                <i class="bi bi-eye-fill" style="color:#4d7cf5;"></i>
                Preview
            </div>

            <div class="ass-preview-wrap" id="preview-wrap">
                <div class="ass-preview-empty" id="preview-empty">
                    <i class="bi bi-image" style="font-size:2rem; display:block; margin-bottom:.5rem;"></i>
                    Preencha os dados e clique em "Gerar assinatura"
                </div>
                <img id="preview-img" src="" alt="Preview da assinatura" style="display:none;">
            </div>

            <div id="download-wrap" style="display:none;">
                <a id="btn-download" href="#" download
                    class="saas-btn primary"
                    style="display:flex; justify-content:center; width:100%; padding:.6rem 1rem; font-size:.9rem;">
                    <i class="bi bi-download me-1"></i> Baixar assinatura
                </a>
            </div>

            <div id="generating-indicator" style="display:none; text-align:center; padding:1rem; color:var(--dm-text-muted); font-size:.82rem;">
                <i class="bi bi-hourglass-split me-1"></i> Gerando…
            </div>
        </div>

    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

<script>
(function () {
    // Máscara de telefone
    $('.telefone').on('input', function () {
        var val = $(this).val().replace(/\D/g, '');
        if (val.startsWith('3')) {
            $(this).mask('0000.0000');
            $(this).attr('minlength', '9');
        } else {
            $(this).mask('00000.0000');
            $(this).attr('minlength', '10');
        }
    });

    // Contador de caracteres no nome
    $('#nome_user').on('input', function () {
        var len = $(this).val().length;
        $('#nome-chars').text(len);
        if (len > 20) $(this).val($(this).val().substring(0, 20));
    });

    // Avançar foco do DDD para telefone
    $(document).on('input', '#ddd, #ddd-x', function () {
        if ($(this).val().length >= 2) {
            $(this).closest('.ass-phone-row').find('input.telefone').focus();
        }
    });

    // Gerar assinatura
    $('#btn-gerar').on('click', function () {
        var nome     = $('#nome_user').val().trim();
        var location = $('#filial').val();
        var setor    = $('#setor').val();
        var role     = $('#ocupacao').val().trim();
        var ddd_main = $('#ddd').val();
        var ddd_extra = $('#ddd-x').val();
        var num_main  = $('#telefone').val();
        var num_extra = $('#telefone-x').val();

        if (!nome || !location || !role || !ddd_main || !num_main) {
            alert('Preencha ao menos: Nome, Filial, Cargo, DDD e Telefone principal.');
            return;
        }

        $('#btn-gerar').prop('disabled', true).html('<i class="bi bi-hourglass-split me-1"></i> Gerando…');
        $('#generating-indicator').show();
        $('#download-wrap').hide();
        $('#preview-empty').show();
        $('#preview-img').hide();

        $.post('/admin/ti/gerar_assinatura', {
            '_token'      : '{{ csrf_token() }}',
            'nome_user'   : nome,
            'location'    : location,
            'setor'       : setor,
            'role'        : role,
            'ddd_main'    : ddd_main,
            'ddd_extra'   : ddd_extra,
            'number_main' : num_main,
            'number_extra': num_extra,
            'chamado_id'  : new URLSearchParams(window.location.search).get('chamado_id')
        }, function (result) {
            $('#generating-indicator').hide();
            $('#btn-gerar').prop('disabled', false).html('<i class="bi bi-magic me-1"></i> Gerar assinatura');

            if (result && result !== 'erro') {
                var url = '/storage/chamado/att/' + result;
                $('#preview-empty').hide();
                $('#preview-img').attr('src', url + '?t=' + Date.now()).show();
                $('#btn-download').attr('href', url).attr('download', result);
                $('#download-wrap').show();
            } else {
                alert('Erro ao gerar assinatura. Tente novamente.');
            }
        }).fail(function () {
            $('#generating-indicator').hide();
            $('#btn-gerar').prop('disabled', false).html('<i class="bi bi-magic me-1"></i> Gerar assinatura');
            alert('Erro de comunicação. Tente novamente.');
        });
    });

    // Aplicar máscaras nos telefones pré-preenchidos ao carregar
    $('.telefone').each(function () {
        var val = $(this).val().replace(/\D/g, '');
        if (val.length > 0) {
            if (val.startsWith('3')) {
                $(this).mask('0000.0000');
            } else {
                $(this).mask('00000.0000');
            }
        }
    });
})();
</script>
@endsection