Sala33_FreebirdTech/Views/Artists/Edit.cshtml
@using FreebirdTech.Utility
@model FreebirdTech.Models.Artist

@{
    ViewData["Title"] = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" integrity="sha512-0SPWAwpC/17yYyZ/4HSllgaK7/gg9OlVozq8K7rf3J8LvCjYEEIfzzpnA2/SSjpGIunCSD18r3UhvDcu/xncWA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
    .image-upload > input {
        display: none;
    }

    .img-container img {
        max-width: 100%;
    }

    .image-upload img {
        width: 200px;
        cursor: pointer;
        border-radius: 50%;
        margin: 5px;
    }
</style>

<form asp-action="Edit" method="post" enctype="multipart/form-data">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" asp-for="Id" />
    <div class='bg_servico text-center px-0 pt-5'>
        <div class='container mt-5'>
            <div class='row justify-content-center align-items-center'>
                <div class='col-12 col-md-2 text-center'>
                    <label for="input">
                        <img id="avatar" class='figure-img rounded-circle img-fluid w-85' src="@PageRenderHelper.ValidateProfilePicture(Model.AvatarImageURI)" alt="">
                    </label>
                    <input type="file" class="sr-only" id="input" name="image" accept="image/jpeg">
                    <input id="Base64Avatar" class="btn btn-primary btn-sm" asp-for="AvatarImageURI" type="text" hidden>
                </div>
                <div class='col-12 col-md-10 mt-4 text-md-left text-white'>
                    <h1 class="text-white"><strong>@Model.Name</strong></h1>
                    <div class="form-group">
                        <label asp-for="Categoria" class="control-label"></label>
                        <select asp-for="Categoria" class="form-select" id="CategoriaProfissional" asp-items="Html.GetEnumSelectList<ECategoriaProfissional>()"></select>
                        <span asp-validation-for="Categoria" class="text-danger"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Fim texto simples -->
    <div class='container-fluid py-5 '>
        <div class='container'>
            <div class='row justify-content-center'>
                @Html.ValidationSummary(false, "", new { @class = "text-danger" })
                <div class='col-12 col-md-3 text-justify text-md-left'>
                    <div class="form-group">
                        <label asp-for="Name" class="control-label"></label>
                        <input asp-for="Name" class="form-control" />
                        <span asp-validation-for="Name" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="BriefDescription" class="control-label"></label>
                        <input asp-for="BriefDescription" class="form-control" />
                        <span asp-validation-for="BriefDescription" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <small id="emailHelp" class="form-text text-muted">Se você precisa de algum suporte, vamos conversar.</small>
                        <i class="text_orange far fa-comment-alt"></i>
                        <label asp-for="Contact" class="control-label"></label>
                        <input asp-for="Contact" class="form-control" />
                        <span asp-validation-for="Contact" class="text-danger"></span>
                        <small id="emailHelp" class="form-text text-muted">**Seu email não será compartilhado.</small>
                    </div>
                    <div class="form-group">
                        <input asp-for="OwnerId" class="form-control" value="@Model.OwnerId" hidden />
                        <span asp-validation-for="OwnerId" class="text-danger"></span>
                    </div>
                </div>


                <div class='col-12 col-md-9 text-center mb-8 text-md-left'>
                    <div class="form-group">
                        <label asp-for="Description" class="control-label"></label>
                        <textarea asp-for="Description" class="form-control" rows="10"></textarea>
                        <span asp-validation-for="Description" class="text-danger"></span>
                    </div>
                </div>
                <div class="button-group pt-1">
                    <button type="reset" class="btn btn-danger">Cancel</button>
                    <button type="submit" class="btn btn-primary my-1">Save Changes</button>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLabel">Crop the image</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="img-container">
                    <img id="image" src="https://avatars0.githubusercontent.com/u/3456749">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="crop">Crop</button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

<script>

    window.addEventListener('DOMContentLoaded', function () {
        var avatar = document.getElementById('avatar');
        var image = document.getElementById('image');
        var input = document.getElementById('input');
        var Base64Avatar = document.getElementById('Base64Avatar');
        var $modal = $('#modal');
        var cropper;

        $('[data-toggle="tooltip"]').tooltip();
        $('#avatar').tooltip({ 'trigger': 'hover', 'title': 'Clique para fazer upload de uma foto' });

        input.addEventListener('change', function (e) {
            var files = e.target.files;
            var done = function (url) {
                input.value = '';
                image.src = url;
                $modal.modal('show');
            };
            var reader;
            var file;
            var url;

            if (files && files.length > 0) {
                file = files[0];

                if (URL) {
                    done(URL.createObjectURL(file));
                } else if (FileReader) {
                    reader = new FileReader();
                    reader.onload = function (e) {
                        done(reader.result);
                    };
                    reader.readAsDataURL(file);
                }
            }
        });

        $modal.on('shown.bs.modal', function () {
            cropper = new Cropper(image, {
                aspectRatio: 1,
                viewMode: 3,
            });
        }).on('hidden.bs.modal', function () {
            cropper.destroy();
            cropper = null;
        });

        document.getElementById('crop').addEventListener('click', function () {
            var initialAvatarURL;
            var canvas;

            $modal.modal('hide');

            if (cropper) {
                canvas = cropper.getCroppedCanvas({
                    width: 160,
                    height: 160,
                });
                initialAvatarURL = avatar.src;
                var dataURL = canvas.toDataURL();
                avatar.src = dataURL;
                Base64Avatar.value = dataURL;
            }
        });
    });

    $('#CategoriaProfissional').change(function () {
        //alert($('#CategoriaProfissional option:selected').text());
        $("#BannerTrabalho").load("GetBannerDiv?id=" + $(this).val() + " #BannerTrabalho");
    })


</script>