@extends('layouts.crud')
@section('title', 'Link Dinamicos - Cadastrar Novo')
@section('content')

	<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100" rel="stylesheet" />

	<div class="card">
	    <div class="card-header d-flex justify-content-between align-items-end">
			<h3>Cadastrar Novo Link Dinamico</h3>

			<div id="divVoltar" class='pb-1 mr-3'>
				<a href="{{ route('link_dinamicos', []) }}" class="text-white">
					<i class="fas fa-reply"></i>
				</a>
			</div>
	    </div>

        <div class="card-body">
    		@if($errors->any())
    			<div class="alert alert-danger alert-dismissible fade show" role="alert">
    				@foreach($errors->all() as $error)
    			  		<li>{{ $error }}</li>
    				@endforeach
    			  	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
    				    <span aria-hidden="true">&times;</span>
    			  	</button>
    			</div>
    		@endif

			{!! Form::open(['route'=>'link_dinamicos.store']) !!}
				<div class='form-row'>
					<div class="form-group col-md-8">
						{!! Form::label('nome', 'Nome:') !!}
						{!! Form::text('nome', null, ['class'=>'form-control', 'maxlength'=>191]) !!}
					</div>
					<div class="form-group col-md-4">
						{!! Form::label('icon', 'Icone:') !!}
						<div class="div-icon">
							<div class="div-icon-icon">
								<span id="icon-amostra" class="material-symbols-outlined" style="font-size: 24px;">search</span>
							</div>
							{!! Form::text('icon', null, ['class'=>'form-control', 'required', 'onchange'=>'setIcon()']) !!}	
						</div>
						
					</div>
					<div class="form-group col-md-8">
                        {!! Form::label('url', 'Link:') !!}
						{!! Form::text('url', null, ['class'=>'form-control']) !!}
					</div>
					<div class="form-group col-md-4">
                        {!! Form::label('tipo', 'Tipo:') !!}
                        {!! Form::select('tipo', $tipo, null, ['class'=>'form-control', 'required']) !!}
					</div>
                </div>
    			<div class='form-row'>
    				<div class="form-group col-md-6">
    				{!! Form::reset('Limpar', ['class'=>'btn btn-default']) !!}
    				{!! Form::submit('Cadastrar', ['class'=>'btn btn-primary']) !!}
					<a href="https://fonts.google.com/icons" target="_blank" class="btn btn-secondary"> 
						<span class="material-symbols-outlined" style="font-size: 18px;">search</span>
						Buscar Icones 
					</a>
    			</div>
    		{!! Form::close() !!}
	    </div>
	</div>

	<style>
		.div-icon {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.div-icon-icon {
			border: 1px solid #ccc;
			padding: 6px 6px;
			border-radius: 10px 0 0 10px;
			margin-right: -1px;
			display: flex;
		}
	</style>

@stop

@section('js')
	<script>
		function setIcon() {
			const iconSelected = $('#icon').val();
			$('#icon-amostra').text(iconSelected)
		}
	</script>
@stop

@section('table-delete')
"link_dinamicos"
@stop