@extends('layouts.main')

@section('titulopagina', 'Serviços')


@section('content')
<script>
@if(Session::has('msg'))
toastr.options = {
    "closeButton": false,
    "progressBar": true
}
toastr.success("{{ session('msg') }}");
@endif
</script>

<div class="container-fluid">
    <div class="row">
        <div class="col-3">


            <div class="card border-primary mb-3">
                <div class="card-header bg-default">
                    <strong class="fs-6"><i class="fa-solid fa-bars p-2"></i>MENU</strong>
                </div>
                <div class="card-body p-0">
                    <a href="/servicos" class="btn btn-block bg-primary btn-labeled rounded-0 p-2">
                        <span class="p-2"><i class="fa-solid fa-arrow-down-wide-short"></i></span>
                        LISTAGEM
                    </a>
                </div>
            </div>

        </div>
        <div class="col-9">
            @foreach ($servico as $ser)
            <div class="card border-info mb-3">
                <div class="card-header bg-primary">Atualizar</div>
                <div class="card-body">
                    <form class="form" action="/servicos/{{$ser->id}}/update" method="post">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="id" value="{{$ser->id}}">

                        <div class="mb-1">
                            <label class="form-label text-black">Descrição</label>
                            <input type="text" class="form-control form-control-sm" id="descricao"
                                name="nome_servico" value="{{$ser->nome_servico}}">

                        </div>
                        <div class="mb-1">
                            <label class="form-label text-black">Taxa</label>
                            <input type="number" class="form-control form-control-sm" id="taxa_servicos" name="taxa_servicos"
                                value="{{$ser->taxa_servicos}}">

                        </div>
                        <div class="mt-2 float-right">
                            <a href="/servicos" class="btn btn-default btn-sm">Voltar</a>
                            <button type="submit" class="btn btn-primary btn-sm">Atualizar</button>
                            <button type="button" class="btn btn-danger btn-sm me-1" data-bs-toggle="modal"
                                data-bs-target="#modaldestroy" data-bs-whatever="{{$ser->id}}"
                                data-nome="{{$ser->nome_servico}}"><i
                                    class="fa-solid fa-trash-can"></i></button>

                        </div>

                    </form>

                </div>
            </div>
            @endforeach


        </div>


    </div>
</div>

<!-- Modal -->

<div class="modal fade" id="modaldestroy" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form class="form" method="post">
            @csrf
            @method('delete')
            <div class="modal-content">

                <div class="modal-body">


                    <div class="row">
                        <strong></strong>
                        <div class="col-12">
                            <h5 class="modal-title"></h5>
                        </div>
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                    <button type="submit" class="btn btn-danger">Excluir</button>
                </div>
            </div>
        </form>

    </div>
</div>

<script>
var destroyModal = document.getElementById('modaldestroy')
destroyModal.addEventListener('show.bs.modal', function(event) {
    // Button that triggered the modal
    var button = event.relatedTarget
    // Extract info from data-bs-* attributes
    var recipient = button.getAttribute('data-bs-whatever')
    var data_nome = button.getAttribute('data-nome')
    // If necessary, you could initiate an AJAX request here
    // and then do the updating in a callback.
    //
    // Update the modal's content.

    var modalBodyForm = destroyModal.querySelector('.modal-dialog form')
    var modalTitle = destroyModal.querySelector('.modal-title')
    
    modalBodyForm.action = '/servico/' + recipient
    modalTitle.innerHTML = '<h5> Deseja excluir o registro <strong>"' + data_nome + '"</strong> ?</h5>'

    
})
</script>

@endsection

@section('js')