@php
    $isEdit = isset($categorie);
@endphp

@if($errors->all())
    <div class="alert alert-danger" role="alert">
        <ul>
            @foreach($errors->all() as $erro)
                <li>{{$erro}}</li>
            @endforeach
        </ul>
    </div>
@endif
@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif
@if (session('erro'))
    <div class="alert alert-danger">
        {{ session('erro') }}
    </div>
@endif
<div class="card-body">
    @if($isEdit)
        {!! Form::model($categorie, ['url'=>routeTenant('consorciado.atualizar', [$categorie->id]),'enctype'=>'multipart/form-data']) !!}
    @else
        {!! Form::open(['url'=>routeTenant('consorciados.store'),'enctype'=>'multipart/form-data','class'=>'needs-validation','id'=>'formulario']) !!}
    @endif
    <div class="form-row">
        <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
            <label for="validationCustom03">Estado</label>
            <select name="estado" class="custom-select" required>
                <option value="">Selecione um Estado</option>
                @foreach($estados as $estado)
                    <option value="{{$estado->id}}" @if($isEdit && $categorie->estado == $estado->id) selected @endif>{{$estado->name}}</option>
                @endforeach
            </select>
        </div>
        <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
            <label for="validationCustom05">Município</label>
            {!! Form::select('cidade', ['0'=>'Selecione uma cidade'], $isEdit ? $categorie->cidade : null, ['class' => 'custom-select']) !!}
        </div>
        <div class="form-group col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
            <label for="validationCustom05">Brasão do Município</label>
            @if($isEdit && !empty($categorie->brasao))
                <div class="d-flex align-items-center">
                    <img src="{{ routeTenant('oracle.get', [$categorie->brasao]) }}" height="50" class="mr-2"/>
                    <button type="button" class="btn btn-warning btn-sm mr-2 btn-alterar-imagem" onclick="$(this).closest('.form-group').find('.input-alterar-imagem').show(); $(this).hide();">Alterar brasão</button>
                    <button type="button" class="btn btn-danger btn-sm btn-excluir-imagem" data-id="{{ $categorie->id }} " data-nome="{{ $categorie->nome }}" data-tipo="brasao">Remover brasão</button>
                    <input type="file" name="brasao" class="form-control input-alterar-imagem mt-2" id="email" placeholder="Email" style="display:none;">
                </div>
            @else
                <input type="file" name="brasao" class="form-control" id="email" placeholder="Email" >
            @endif
        </div>
    </div>
    <div class="form-row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mb-2">
            @include('components.assinatura', [
                'sufix' => '_presidente',
                'name_cargo'=>'',
                'value' => [
                    'nome' => $isEdit ? $categorie->nome_presidente : '',
                    'cargo' => $isEdit ? $categorie->cargo : '',
                    'imagem' => $isEdit ? $categorie->assinatura_presidente : ''
                ],
                'required' => true
            ])
        </div>
        
    </div>

    <div class="form-row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mb-2" id="escoder" style="@if($isEdit && $categorie->nome_presidente_2 == null) display: none; @endif">
            @include('components.assinatura', [
                'sufix' => '_presidente_2',
                'name_cargo'=>'_2',
                'value' => [
                    'nome' => $isEdit ? $categorie->nome_presidente_2 : '',
                    'cargo' => $isEdit ? $categorie->cargo_2 : '',
                    'imagem' => $isEdit ? $categorie->assinatura_presidente_2 : ''
                ],
                'required' => false
            ])
        </div>
    </div>
    <div id="escoder2" style="@if($isEdit && $categorie->nome_presidente_2 != null) display: none; @endif" class="float-right"><a style="color: black;" onclick="$('#escoder').css('display','inline'); $('#escoder2').css('display','none'); $('#escoder3').css('display','inline');"> Adicionar assinante</a></div>
    <div id="escoder3" style="@if($isEdit && $categorie->nome_presidente_2 == null) display: none; @endif" class="float-right">
        <a style="color: black;" id="btn-retirar-assinante"> Retirar assinante</a>
    </div>

    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 ">
            <button type="submit" class="btn btn-success">Salvar</button>
            <a href="{{ routeTenant('consorciados.index') }}" class="btn btn-secondary">Voltar</a>
        </div>
    </div>
    {!! Form::close() !!}
</div>
<script type="text/javascript">
    $('select[name=estado]').change(function () {
        var idEstado = $(this).val();
        $.get('/get-cidades/' + idEstado, function (cidades) {
            $('select[name=cidade]').empty();
            console.log(cidades)
            $.each(cidades, function (key, value) {
                $('select[name=cidade]').append('<option value="' + value.name + '">' + value.name + '</option>');
            });
        });
    });

    // Limpa campos do segundo assinante ao clicar em "Retirar assinante"
    $(document).on('click', '#btn-retirar-assinante', function() {
        $('#escoder').css('display','none');
        $('#escoder3').css('display','none');
        $('#escoder2').css('display','inline');
        // Limpa campos do segundo assinante
        $("input[name='nome_presidente_2']").val('');
        $("input[name='cargo_2']").val('');
        $("input[name='assinatura_presidente_2']").val('');
        // Remove imagem de assinatura se houver
        $("#escoder img").remove();
    });
</script>
<div class="row mb-3">
    <div class="col-12">
        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalAssinatura">
            Adicionar assinatura extra
        </button>
    </div>
</div>

<div class="modal fade" id="modalAssinatura" tabindex="-1" role="dialog" aria-labelledby="modalAssinaturaLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalAssinaturaLabel">Adicionar Assinatura</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form id="formAssinaturaModal" enctype="multipart/form-data">
        <div class="modal-body">
            <input type="hidden" name="consorciado_id" value="{{ $isEdit ? $categorie->id : '' }}">
            @include('components.assinatura', [
                'sufix' => '',
                'name_cargo'=>'',
                'value' => [],
                'required' => true
            ])
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
          <button type="submit" class="btn btn-primary">Salvar Assinatura</button>
        </div>
      </form>
    </div>
  </div>
</div>

@if($isEdit)
<div class="row mt-3">
    <div class="col-12">
        <h5>Assinaturas extras já cadastradas</h5>
    @include('app.admin.consorciado._assinaturas_lista', ['consorciado' => $categorie])
    </div>
</div>
<div class="modal fade" id="modalConfirmaExclusaoAssinatura" tabindex="-1" role="dialog" aria-labelledby="modalConfirmaExclusaoAssinaturaLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Confirmar exclusão</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Tem certeza que deseja excluir a assinatura <span id="nomeAssinaturaExcluir"></span>?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-danger" id="btnConfirmaExcluirAssinatura">Excluir</button>
      </div>
    </div>
  </div>
</div>
@endif

@section('post-script')
<script>
    let assinaturaExcluirId = null;

    $(document).on('click', '.btn-excluir-imagem', function() {
        console.log('Excluir imagem');
        assinaturaExcluirId = $(this).data('id');
        tipo = $(this).data('tipo');
        $('#nomeAssinaturaExcluir').text($(this).data('nome'));
        $('#modalConfirmaExclusaoAssinatura').modal('show');
    });

    $('#btnConfirmaExcluirAssinatura').on('click', function() {
        if (!assinaturaExcluirId) return;
        console.log(tipo);
        if(tipo == ''){
            url= '{{ routeTenant("signs.destroy", ["sign" => "SIGN_ID"]) }}'.replace("SIGN_ID", assinaturaExcluirId);
        }else if(tipo == 'brasao'){
            url= '{{ routeTenant("consorciado.delete_brasao", ["consorciado" => "SIGN_ID"]) }}'.replace("SIGN_ID", assinaturaExcluirId);
        }else if(tipo == '_presidente'){
            url = '{{ routeTenant("consorciado.delete_assinatura", ["consorciado" => "SIGN_ID", "tipo" => "presidente"]) }}'.replace("SIGN_ID", assinaturaExcluirId);
        }else if(tipo == '_presidente_2'){
            url = '{{ routeTenant("consorciado.delete_assinatura", ["consorciado" => "SIGN_ID", "tipo" => "presidente_2"]) }}'.replace("SIGN_ID", assinaturaExcluirId);
        }else{
            return;
        }
        $.ajax({
            url: url,
            type: 'POST',
            data: {
                _method: 'DELETE',
                _token: '{{ csrf_token() }}'
            },
            success: function(data) {
                $('#modalConfirmaExclusaoAssinatura').modal('hide');
                if(data.success) {
                    $('#assinatura-msg').html('<div class="alert alert-success">'+data.message+'</div>');
                    if(data.html) {
                        $('#assinaturas-lista').html(data.html);
                    } else {
                        location.reload();
                    }
                } else {
                    $('#assinatura-msg').html('<div class="alert alert-danger">'+(data.message || 'Erro ao excluir assinatura.')+'</div>');
                }
            },
            error: function(xhr) {
                $('#modalConfirmaExclusaoAssinatura').modal('hide');
                $('#assinatura-msg').html('<div class="alert alert-danger">Erro ao excluir assinatura.</div>');
            }
        });
    });
    $(function() {
        // Mensagem dinâmica no modal
        if (!$('#modalAssinatura .modal-body .alert').length) {
            $('#modalAssinatura .modal-body').prepend('<div id="assinatura-msg"></div>');
        }
        // Usar delegação para garantir que o evento seja capturado mesmo se o form for recriado
        $(document).on('submit', '#formAssinaturaModal', function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            // Debug: listar todos os campos do FormData
            for (let pair of formData.entries()) {
                console.log(pair[0]+ ':', pair[1]);
            }
            $('#assinatura-msg').html('');
            $.ajax({
                url: '{{ routeTenant('signs.store') }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                success: function(data) {
                    console.log('ajax');
                    if(data.success) {
                        console.log('success');
                        $('#assinatura-msg').html('<div class="alert alert-success">'+data.message+'</div>');
                        // Limpa os campos do modal
                        $('#formAssinaturaModal')[0].reset();
                        if(data.html) {
                            $('#assinaturas-lista').html(data.html);
                        }
                        // Fecha o modal e mostra mensagem de sucesso na tela principal
                        setTimeout(function(){
                            $('#modalAssinatura').modal('hide');
                            // Mostra mensagem de sucesso na tela principal
                            if($('.alert-success').length === 0) {
                                $('<div class="alert alert-success">'+data.message+'</div>').insertBefore('.card-body');
                            }
                        }, 800);
                    } else {
                        console.log('fail');
                        $('#assinatura-msg').html('<div class="alert alert-danger">'+(data.message || 'Erro ao salvar assinatura.')+'</div>');
                    }
                },
                error: function(xhr) {
                    let msg = 'Erro ao salvar assinatura.';
                    if(xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                        msg = '<ul>';
                        $.each(xhr.responseJSON.errors, function(k, v){
                            msg += '<li>'+v[0]+'</li>';
                        });
                        msg += '</ul>';
                    } else if(xhr.responseJSON && xhr.responseJSON.message) {
                        msg = xhr.responseJSON.message;
                    }
                    $('#assinatura-msg').html('<div class="alert alert-danger">'+msg+'</div>');
                }
            });
        });
    });
</script>
@endsection