<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="{{asset('assets/images/logo3.png')}}" type="image/x-icon">
    <link rel="shortcut icon" href="{{asset('assets/images/favicon.jpg')}}" type="image/x-icon">
    <title>{{ env('APP_NAME') }} - @yield('title')</title>
    <!-- Google font-->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap"
        rel="stylesheet">
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&amp;display=swap"
        rel="stylesheet">
    <link
        href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap"
        rel="stylesheet">
    <!-- Font Awesome-->
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/fontawesome.css')}}">
    <!-- ico-font-->
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/icofont.css')}}">
    <!-- Themify icon-->
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/themify.css')}}">
    <!-- Flag icon-->
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/flag-icon.css')}}">
    <!-- Feather icon-->
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/feather-icon.css')}}">
    <!-- Plugins css start-->
    <!-- Plugins css Ends-->
    <!-- Bootstrap css-->
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/bootstrap.css')}}">
    <!-- App css-->
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/style.css')}}">
    <link id="color" rel="stylesheet" href="{{ asset('assets/css/color-1.css')}}" media="screen">
    <!-- Responsive css-->
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/responsive.css')}}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/dropzone.css') }}">
</head>

<body>
    @php
        use App\Models\escolas;
        use App\Models\turmas;
        if (Auth::user()->id_escola == 0) {
            $escolas = escolas::all();
        } else {
            $escolas = escolas::where('id', Auth::user()->id_escola)->get();
        }

        if (Auth::user()->id_escola == 0) {
            $turmas = turmas::all();
        } else {
            $turmas = turmas::where('id_escola', Auth::user()->id_escola)->get();
        }
    @endphp
    <!-- Loader starts-->
    <div class="loader-wrapper">
        <div class="theme-loader">
            <div class="loader-p"></div>
        </div>
    </div>
    <!-- Loader ends-->
    <!-- page-wrapper Start-->
    <div class="page-wrapper" id="pageWrapper">
        <!-- Page Header Start-->
        <div class="page-main-header">
            <div class="main-header-right row m-0">
                <div class="main-header-left">
                    <div class="toggle-sidebar"><i class="status_toggle middle" data-feather="align-center"
                            id="sidebar-toggle"></i></div>
                </div>
                <div class="left-menu-header col">
                    <ul>
                        <li>
                            <form class="form-inline search-form">
                                <div class="search-bg"><i class="fa fa-search"></i>
                                    <input class="form-control-plaintext" placeholder="Procure aqui">
                                </div>
                            </form><span class="d-sm-none mobile-search search-bg"><i class="fa fa-search"></i></span>
                        </li>
                    </ul>
                </div>
                <div class="nav-right col pull-right right-menu p-0 box-col-6">
                    <ul class="nav-menus">
                        <li><a class="text-dark" href="#!" onclick="javascript:toggleFullScreen()"><i
                                    data-feather="maximize"></i></a></li>
                        <li>
                            <div class="dropdown-basic">
                                <div class="dropdown">
                                    <div class="btn-group mb-0">
                                        <button class="dropbtn btn-primary btn-round" type="button">
                                            Novo <span><i class="icofont icofont-arrow-down"></i></span>
                                        </button>

                                        <div class="dropdown-content">
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#modalEscola">Escola</a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#modalTurma">Turma</a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#modalAluno">Aluno</a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#modalEnvio">Envio de
                                                Mensagem</a>
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#modalEvento">Evento</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="onhover-dropdown p-0">
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="btn btn-primary-light">
                                    <i data-feather="log-out"></i> Sair
                                </button>
                            </form>
                        </li>

                    </ul>
                </div>
                <div class="d-lg-none mobile-toggle pull-right w-auto"><i data-feather="more-horizontal"></i></div>
            </div>
        </div>
        <!-- Page Header Ends                              -->
        <!-- Page Body Start-->
        <div class="page-body-wrapper horizontal-menu">
            <!-- Page Sidebar Start-->
            <header class="main-nav">
                <div class="sidebar-user text-center"><a class="setting-primary" href="javascript:void(0)"><i
                            data-feather="settings"></i></a><img class="img-90 rounded-circle"
                        src="{{ asset('assets/images/logo3.png')}}" alt="">
                    <div class="badge-bottom"><span class="badge badge-primary">Responsável</span></div><a
                        href="user-profile.html">
                        <h6 class="mt-3 f-14 f-w-600">{{ Auth::user()->name }}</h6>
                    </a>
                </div>
                <nav>
                    <div class="main-navbar">
                        <div class="left-arrow" id="left-arrow"><i data-feather="arrow-left"></i></div>
                        <div id="mainnav">
                            <ul class="nav-menu custom-scrollbar">
                                <li class="back-btn">
                                    <div class="mobile-back text-end"><span>Back</span><i class="fa fa-angle-right ps-2"
                                            aria-hidden="true"></i></div>
                                </li>
                                <li class="sidebar-main-title">
                                    <div>
                                        <h6>Geral </h6>
                                    </div>
                                </li>
                                <li class="dropdown"><a class="nav-link menu-title link-nav" href=""><i
                                            data-feather="git-pull-request"></i><span>Dashboard</span></a></li>
                                <li class="sidebar-main-title">
                                    <div>
                                        <h6>Administração </h6>
                                    </div>
                                </li>
                                <li class="dropdown"><a class="nav-link menu-title link-nav"
                                        href="{{ route('escolas') }}"><i
                                            data-feather="award"></i><span>Escolas</span></a></li>
                                <li class="dropdown"><a class="nav-link menu-title link-nav"
                                        href="{{ route('turmas') }}"><i data-feather="award"></i><span>Turmas</span></a>
                                </li>
                                <li class="dropdown"><a class="nav-link menu-title link-nav"
                                        href="{{ route('alunos') }}"><i data-feather="award"></i><span>Alunos</span></a>
                                </li>
                            </ul>
                        </div>
                        <div class="right-arrow" id="right-arrow"><i data-feather="arrow-right"></i></div>
                    </div>
                </nav>
            </header>
            <!-- Page Sidebar Ends-->
            <div class="page-body">
                <div class="container-fluid">
                    <div class="page-header">
                        <div class="row">
                            <div class="col-sm-6">
                                <h3>@yield('title.page')</h3>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="index.html">@yield('title.page1')</a></li>
                                    <li class="breadcrumb-item">@yield('title.page2')</li>
                                    <li class="breadcrumb-item active">@yield('title.page3')</li>
                                </ol>
                            </div>
                            <div class="col-sm-6">
                                <!-- Bookmark Start-->

                                <!-- Bookmark Ends-->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Container-fluid starts-->
                <div class="container-fluid">
                    @yield('content')
                </div>
                <!-- Container-fluid Ends-->
            </div>
            <!-- footer start-->
            <footer class="footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6 footer-copyright">
                            <p class="mb-0">
                                Copyright 2026-{{ date('y') }} © Aquino All rights reserved.
                            </p>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
    <div class="modal fade" id="modalEscola" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Nova Escola</h4>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form class="form theme-form" action="{{ route('escola.novo') }}" method="POST">
                        @csrf
                        <div class="card-body">
                            <div class="row">
                                <div class="col-4">
                                    <div class="mb-3">
                                        <label class="form-label" for="cnoj">CNPJ</label>
                                        <input class="form-control" id="cnpj" name="cnpj" type="text">
                                    </div>
                                </div>
                                <div class="col-8">
                                    <div class="mb-3">
                                        <label class="form-label" for="razao_social">Razão Social</label>
                                        <input class="form-control" id="razao_social" name="razaosocial" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="logradouro">Logradouro</label>
                                        <input class="form-control" id="logradouro" type="text" disabled>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="mb-3">
                                        <label class="form-label" for="numero">Número</label>
                                        <input class="form-control" id="numero" type="text" disabled>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="mb-3">
                                        <label class="form-label" for="cep">CEP</label>
                                        <input class="form-control" id="cep" type="text" disabled>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-4">
                                    <div class="mb-3">
                                        <label class="form-label" for="complemento">Complemento</label>
                                        <input class="form-control" id="complemento" type="text" disabled>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="mb-3">
                                        <label class="form-label" for="bairro">Bairro</label>
                                        <input class="form-control" id="bairro" type="text" disabled>
                                    </div>
                                </div>
                                <div class="col-2">
                                    <div class="mb-3">
                                        <label class="form-label" for="estado">Estado</label>
                                        <input class="form-control" id="estado" type="text" disabled>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="mb-3">
                                        <label class="form-label" for="cidade">Cidade</label>
                                        <input class="form-control" id="cidade" type="text" disabled>
                                        <input class="form-control" id="address" name="address" type="hidden">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <button class="btn btn-primary" type="submit">Salvar|Atualizar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalTurma" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Nova Turma</h4>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form class="form theme-form" action="{{ route('turma.novo') }}" method="POST">
                        @csrf
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <div class="mb-3">
                                        <label class="form-label" for="escolas">Escola</label>
                                        <select class="form-select digits" id="escolas" name="id_escola">
                                            @foreach ($escolas as $escola)
                                                <option value="{{ $escola->id }}">{{ $escola->nome }}
                                                </option>
                                            @endforeach

                                        </select>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="mb-3">
                                        <label class="form-label" for="turma_nome">Nome</label>
                                        <input class="form-control" id="turma_nome" name="turma_nome" type="text">
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="mb-3">
                                        <label class="form-label" for="turma_descricao">Descrição</label>
                                        <input class="form-control" id="turma_descricao" name="turma_descricao"
                                            type="text">
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="mb-3">
                                        <label class="form-label" for="id_whatsapp">Whatsap Id</label>
                                        <input class="form-control" id="id_whatsapp" name="id_whatsapp" type="text">
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="card-footer text-end">
                            <button class="btn btn-primary" type="submit">Salvar|Atualizar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalAluno" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Novo Aluno</h4>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- formulário -->
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalEnvio" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <form class="form theme-form" action="{{ route('envio.wpp') }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf

                    <div class="modal-header">
                        <h4 class="modal-title">Novo Envio</h4>
                        <button class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <div class="row">

                            <!-- ✅ NOVO DROPDOWN (primeiro item) -->
                            <div class="col-12">
                                <div class="mb-3">
                                    <label class="form-label">Tipo de Envio</label>
                                    <select class="form-select" name="tipo_envio" id="tipo_envio">
                                        <option value="texto">Somente Texto</option>
                                        <option value="imagem">Imagem + Texto</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Turma -->
                            <div class="col-12">
                                <div class="mb-3">
                                    <label class="form-label">Turma</label>
                                    <select class="form-select digits" name="id_turma">
                                        @foreach ($turmas as $turma)
                                            <option value="{{ $turma->id }}">
                                                {{ $turma->nome }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- Mensagem -->
                            <div class="col-12">
                                <div class="mb-3">
                                    <label class="form-label">Mensagem</label>
                                    <textarea id="editor" name="mensagem" class="form-control"></textarea>
                                </div>
                            </div>

                            <!-- Upload imagem (oculto inicialmente) -->
                            <div class="col-12 d-none" id="campoImagem">
                                <div class="mb-3">
                                    <label class="form-label">Imagem</label>
                                    <input type="file" name="imagem" class="form-control"
                                        accept="image/jpeg,image/png,image/webp">
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-secondary" data-bs-dismiss="modal">
                            Cancelar
                        </button>
                        <button class="btn btn-primary" type="submit">
                            Enviar Mensagem
                        </button>
                    </div>

                </form>

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

    <div class="modal fade" id="modalEvento" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Novo Evento</h4>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- formulário -->
                </div>
            </div>
        </div>
    </div>

    <!-- latest jquery-->
    <script src="{{ asset('assets/js/jquery-3.5.1.min.js')}}"></script>
    <!-- feather icon js-->
    <script src="{{ asset('assets/js/icons/feather-icon/feather.min.js')}}"></script>
    <script src="{{ asset('assets/js/icons/feather-icon/feather-icon.js')}}"></script>
    <!-- Sidebar jquery-->
    <script src="{{ asset('assets/js/sidebar-menu.js')}}"></script>
    <script src="{{ asset('assets/js/config.js')}}"></script>
    <!-- Bootstrap js-->
    <script src="{{ asset('assets/js/bootstrap/popper.min.js')}}"></script>
    <script src="{{ asset('assets/js/bootstrap/bootstrap.min.js')}}"></script>
    <!-- Plugins JS start-->
    <!-- Plugins JS Ends-->
    <!-- Theme js-->
    <script src="{{ asset('assets/js/script.js')}}"></script>
    <!-- login js-->
    <!-- Plugin used-->
    <script src="{{ asset('assets/js/icons/icons-notify.js') }}"></script>
    <script src="{{ asset('assets/js/icons/icon-clipart.js') }}"></script>
    <script src="{{ asset('assets/js/icons/feather-icon/feather-icon.js') }}"></script>
    <script src="{{ asset('assets/js/icons/feather-icon/feather.min.js') }}"></script>
    <script src="{{ asset('assets/js/tooltip-init.js') }}"></script>
    <script src="{{ asset('assets/js/dropzone/dropzone.js') }}"></script>
    <script src="{{ asset('assets/js/dropzone/dropzone-script.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

    @yield('scripts')

    <script>
        let ultimoCNPJ = '';
        let timeout = null;

        document.getElementById('cnpj').addEventListener('input', function () {
            let cnpj = this.value.replace(/\D/g, '');

            clearTimeout(timeout);

            if (cnpj.length !== 14 || cnpj === ultimoCNPJ) {
                return;
            }

            timeout = setTimeout(() => {
                ultimoCNPJ = cnpj;
                buscarCNPJ(cnpj);
            }, 400);
        });

        function buscarCNPJ(cnpj) {
            fetch(`https://open.cnpja.com/office/${cnpj}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Erro na consulta');
                    }
                    return response.json();
                })
                .then(data => {

                    // ===== RAZÃO SOCIAL =====
                    document.getElementById('razao_social').value =
                        data.company?.name ?? '';

                    const address = data.address ?? {};

                    // ===== ENDEREÇO =====
                    document.getElementById('logradouro').value = address.street ?? '';
                    document.getElementById('numero').value = address.number ?? '';
                    document.getElementById('complemento').value = address.details ?? '';
                    document.getElementById('bairro').value = address.district ?? '';
                    document.getElementById('estado').value = address.state ?? '';
                    document.getElementById('cidade').value = address.city ?? '';
                    document.getElementById('address').value = JSON.stringify(address ?? {});

                    // CEP formatado
                    document.getElementById('cep').value = formatarCEP(address.zip);
                })
                .catch(error => {
                    console.error(error);
                    alert('Erro ao consultar o CNPJ');
                });
        }

        function formatarCEP(cep) {
            if (!cep) return '';
            return cep.replace(/^(\d{5})(\d{3})$/, '$1-$2');
        }
    </script>


    <script>
        var simplemde = new SimpleMDE({
            element: document.getElementById("editor"),
            spellChecker: false,
            toolbar: ["bold", "italic", "strikethrough", "|", "unordered-list", "ordered-list", "|", "preview"]
        });
    </script>
    <script>
        document.getElementById('tipo_envio').addEventListener('change', function () {
            const campoImagem = document.getElementById('campoImagem');

            if (this.value === 'imagem') {
                campoImagem.classList.remove('d-none');
            } else {
                campoImagem.classList.add('d-none');
            }
        });
    </script>


</body>

</html>