@extends('layouts.admin'))

@section('content')


    <!--begin::Main-->
    <div class="app-main flex-column flex-row-fluid " id="kt_app_main">

        <!--conteudo-->

        <div class="d-flex flex-column flex-column-fluid">
            <!--begin::Toolbar-->
            <div id="kt_app_toolbar" class="app-toolbar  py-3 py-lg-6 "
            >
                <!--begin::Toolbar container-->
                <div id="kt_app_toolbar_container" class="app-container  container-xxl d-flex flex-stack ">
                    <!--begin::Page title-->
                    <div  class="page-title d-flex flex-column justify-content-center flex-wrap me-3 ">
                        <!--begin::Title-->
                        <!--end::Title-->
                        <!--begin::Breadcrumb-->
                        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                            <!--begin::Item-->
                            <li class="breadcrumb-item text-muted">
                                <a href="{{route('admin.dashboard')}}" class="text-muted text-hover-primary">
                                    Prefeitura de congonhas                            </a>
                            </li>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-500 w-5px h-2px"></span>
                            </li>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <li class="breadcrumb-item text-muted">
                                serviço
                            </li>
                            <!--end::Item-->
                        </ul>
                        <!--end::Breadcrumb-->
                    </div>
                    <!--end::Page title-->



                </div>
                <!--end::Toolbar container-->
            </div>
            <!--end::Toolbar-->
            <!--begin::Content-->
            <div id="kt_app_content" class="app-content  flex-column-fluid " >
                <!--begin::Content container-->
                <div id="kt_app_content_container" class="app-container  container-xxl ">





    <div class="row">
    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-12">
      <h3>Nova Serviço</h3>


        <form action="{{route('servicos.store')}}" method="POST" enctype="multipart/form-data" class="form" >
@csrf
      @include('app.servicos._form')


            <button type="submit" class="btn btn-primary" style="margin-top: 20px;" >Criar Serviço</button>

        </form>

    </div>
    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
      <div class="card">
        <h5 class="card-header">Modelos de Icones</h5>
        <div class="card-body">

            <link rel="stylesheet" href="{{ asset('font-awesome.min.css') }}">
          <h5 class="card-header">Mais usados</h5>
          <a style="color: #fff; margin-top: 10px;" class="btn  btn-primary" onclick="add('fa-gavel')"> <i
              class="fa fa-gavel " aria-hidden="true"></i> </a>
          <a style="color: #fff; margin-top: 10px;" class="btn  btn-primary" onclick="add('fa-search')"> <i
              class="fa fa-search  " aria-hidden="true"></i> </a>
          <a style="color: #fff; margin-top: 10px;" class="btn  btn-primary" onclick="add('fa-file')"> <i
              class="fa fa-file-code-o  " aria-hidden="true"></i> </a>
          <a style="color: #fff; margin-top: 10px;" class="btn  btn-primary" onclick="add('fa-comments')"> <i
              class="fa fa-comments " aria-hidden="true"></i> </a>
          <a style="color: #fff; margin-top: 10px;" class="btn  btn-primary" onclick="add('fa-usd')"> <i
              class="fa fa-usd " aria-hidden="true"></i> </a>
          <div></div>

     <a target="_blank" class="btn  btn-danger" style="margin-top: 20px; margin-bottom: 20px; width: 100%;"
              href="https://fontawesome.com/v4.7.0/icons/">Link de Icones</a>


          <h5 class="card-header">Lista de Icones</h5>
          <div style="overflow: auto; width: 100%; height: 300px;">
            @foreach ($icon as $icone)
              <div style="height: 50px; width: 60px; float: left">
                <a style="color: #fff; margin-top: 10px;" class="btn  btn-primary"
                  onclick="add('{{ $icone }}')">
                  <i class=" fa {{ $icone }}" title="fa {{ $icone }}" aria-hidden="true"></i> </a>
              </div>
            @endforeach
          </div>
        </div>
      </div>
    </div>
  </div>


                </div>
                <!--end::Content container-->
            </div>
            <!--end::Content-->
        </div>




        <!--begin::Footer-->
        <div id="kt_app_footer" class="app-footer " >
            <!--begin::Footer container-->
            <div class="app-container  container-fluid d-flex flex-column flex-md-row flex-center flex-md-stack py-3 ">
                <!--begin::Copyright-->
                <div class="text-gray-900 order-2 order-md-1">
                    <span class="text-muted fw-semibold me-1">2024&copy;</span>
                    <a href="" target="_blank" class="text-gray-800 text-hover-primary">Rlv Tecnologia</a>
                </div>
                <!--end::Copyright-->
                <!--begin::Menu-->
                <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1">
                    <li class="menu-item"><a href="" target="_blank" class="menu-link px-2">Sobre</a></li>
                    <li class="menu-item"><a href="" target="_blank" class="menu-link px-2">Suporte</a></li>
                </ul>
                <!--end::Menu-->
            </div>
            <!--end::Footer container-->
        </div>
        <!--end::Footer-->
    </div>
    <!--end:::Main-->
@endsection
@section('script')
  <script>
    function add(value) {
      var resultado = document.getElementById('icone');
      resultado.value = value;
    }
  </script>
@endsection