@extends('layout.backend')
@section('title', 'Crachá: '.$user->short_name)

@section('styles')
<style>
    .foto {
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .preview {
        text-align: center;
        overflow: hidden;
        width: 160px;
        height: 220px;
        margin-top: 135px;
        margin-left: 40px;
        border: 1px solid red;
    }

    .preview-container {
        position: relative; /* Define um contexto de posicionamento para os filhos absolutos */
        height: 404px; /* Define a altura do contêiner */
        width: 604px; /* Define a largura do contêiner */
        border: 1px solid black;
    }

    .img-back {
        position: absolute; /* Posiciona a imagem de fundo dentro do contêiner */
        top: 0;
        left: 0;
        height: 400px; /* Faz a imagem ocupar toda a altura do contêiner */
        width: 600px; /* Faz a imagem ocupar toda a largura do contêiner */
        object-fit: cover; /* Ajusta a imagem para cobrir o contêiner */
    }

    .img-front {
        position: absolute; /* Posiciona a imagem sobreposta */
        top: 240px; /* Define a posição vertical (ajustar conforme necessário) */
        left: 120px; /* Define a posição horizontal (ajustar conforme necessário) */
        transform: translate(-50%, -50%); /* Centraliza a imagem sobreposta */
        width: 145px; /* Define a largura da imagem sobreposta */
        height: 210px; /* Define a altura da imagem sobreposta */
        /* z-index: 2;  Se precisar controlar a ordem de sobreposição */
    }

    .text-overlay {
        position: absolute;
        top: 260px;
        left: 250px;
        font-size: xx-large;
        width: 380px;
        color: #12669e;
        display: flex;
        z-index: 1; /* Garante que o texto esteja por cima da imagem */
    }

    .text-colih-overlay {
        position: absolute;
        top: 103px;
        left: 37px;
        font-size: larger;
        width: 380px;
        color: #ffffff;
        display: flex;
        z-index: 1; /* Garante que o texto esteja por cima da imagem */
    }


</style>
@parent 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" />
@endsection
@section('scripts')
@parent
<script type="text/javascript" src="/js/userBadge.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
@endsection

@section('content')

<x-form.header.button-bar>
	<x-form.header.button-back />
</x-form.header.button-bar>

@if(empty($badge))
<div class="form-group">
	<div class="row">
		<div class="col-12 mb-4 text-danger">
			<x-form.alert-error>Este recurso é apenas para membros de Colih e GVP.</x-form.alert-error>
		</div>
	</div>
</div>
@else

<div class="form-group">
	<div class="row">
		<div class="col-12 mb-2 text-primary">
            Membros: Crachá<br/>
        </div>

        <div class="col-12 mb-4">
            Selecione o arquivo com a foto para o crachá.
        </div>
        <div class="col-11 col-lg-6 col-xl-4 mx-2 mb-4">
            <label for="file" id="fileLabel" class="custom-file-label">Selecione o arquivo</label>
            <input type="file" class="custom-file-input btn" name="file" id="file" 
                   accept="png,jpg" >
            {!! Form::open(['id' => 'form-foto', 'url' => route("users.badgestore"), 'autocomplete' => 'off', 'method' => 'post', 'files' => true]) !!}
            <input type="hidden" name="image_base64" id="image_base64" />
            <input type="hidden" name="iduser" value='{{$user->id}}' />
            {!! Form::close() !!}
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="preview-container">
            <div class="text-colih-overlay">
                {!! App\Helpers\AppHelper::getAppSetting('portal-name') !!}
            </div>            

			<img src="{{$badge}}" height="300px" class="img-back">
            <div class="preview text-center">
                <img
                    src="{{ $photo ? $photo : '/img/logo-colih.png' }}"
                    alt="Preview"
                    class="img-front"
                    />
            </div>
            <div class="text-overlay">
                {{$user->short_name}}
            </div>            
        </div>
        <button type="button" class="btn btn-primary mt-2 d-none" id="btnSend">
            <i class="fas fa-id-badge mr-1"></i> Atualizar foto do crachá
        </button>    
        @if($photo)
        <a href="{{route("users.badgepdf",['id'=>$user->id])}}" type="button" class="btn btn-primary mt-2" id="btnPdf" target="_blank">
            <i class="fas fa-print mr-1"></i> Gerar PDF
        </a>    
        @endif
    </div>
    <div class="col-md-6 d-none img-container" id="divContainer">
            <img
                id="image"
                src="/img/logo-colih.png"
                class="foto img-fluid"
                alt="Image"
                />
    </div>
</div>
@endif

@endsection