@extends('adminlte::page')

@section('title', " $title ")

@section('content')
<div class="container-fluid">

    @can('cadastrar-dados-da-empresa')
        <div class="row pt-4">
            <div class="col-md-4">
                <h4><a href="" class="btn btn-primary" title="Cadastrar Novo" data-toggle="modal" data-target="#create"> + Cadastrar Dados da empresa</a> <span class="badge badge-secondary shadow">{!! $count !!}</span></h4>
            </div>
        </div>
    @endcan

    <div class="row mt-4">
        <div class="col-md-12">
            
            @include('app.includes.alerts')
            <table class="table table-striped">
                <thead class='bg-secondary text-white'>
                    <tr>
                        <th>Logomarca</th>
                        <th>Nome</th>
                        <th>Email</th>
                        <th>Site</th>
                        <th>Telefone</th>
                        <th>Whatsapp</th>
                        <th>Email</th>
                        <th>Editar</th>
                    </tr>
                </thead>
                
                <tbody>
                    @foreach($companies as $company)
                        <tr>
                            <td><img src="{{ url("storage/{$company->image}") }}" class="img-fluid" alt="{{ $company->name }}" title="{{ $company->name }}" style="max-width:250px;"/></td>
                            <td>{{ $company->name }}</td>
                            <td>{{ $company->email }}</td>
                            <td>{{ $company->site }}</td>
                            <td>{{ $company->phone }}</td>
                            <td>{{ $company->whatsapp }}</td>
                            <td>{{ $company->email }}</td>
                            <td>
                                <a href="#" class="btn btn-outline-success me-1 edit-btn shadow" title="Editar Dados"
                                    data-toggle="modal" data-target="#update"
                                    data-id="{{ $company->id }}"
                                    data-name="{{ $company->name }}"
                                    data-address="{{ $company->address }}"
                                    data-email="{{ $company->email }}"
                                    data-site="{{ $company->site }}"
                                    data-phone="{{ $company->phone }}"
                                    data-whatsapp="{{ $company->whatsapp }}"
                                    data-mission="{{ $company->mission }}"><i class="fa fa-edit"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

        </div>
    </div>
    
    <!--MODAL CREATE-->
    <div class="modal fade" id="create" tabindex="-1" role="dialog" aria-labelledby="formCreate">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h4 class="modal-title" id="formCreate"> Cadastrando dados da empresa</h4>
                </div>
                <div class="modal-body">

                    <form action="{{ route('company.store') }}" method="post" enctype="multipart/form-data">
                        @csrf

                        <div class="form-group">
                            <label>Logotipo</label>
                            <input type="file" name="image" class="form-control">
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label"> Nome</label>
                                <input name="name" class="form-control" value="" placeholder="Digite o nome ..." type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label"> Endereço</label>
                                <input name="address" class="form-control" value="" placeholder="Digite o endereço ..." type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label"> Email</label>
                                <input name="email" class="form-control" value="" placeholder="Digite o email ..." type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label"> Site</label>
                                <input name="site" class="form-control" value="" placeholder="Digite o site ..." type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label"> Telefone</label>
                                <input name="phone" class="form-control" value="" placeholder="Digite o nome ..." type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label"> Whatsapp</label>
                                <input name="whatsapp" class="form-control" value="" placeholder="Digite o whatsapp ..." type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label"> Missão</label>
                                <textarea name="mission" class="form-control" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div class="col-sm-12">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
                                <input type="submit" class="btn btn-primary" value="Cadastrar"/>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- Update -->
<div class="modal fade" id="update">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header bg-success">
                    <h4 class="modal-title"><i class="fa fa-ckeck"></i> Atualizando Dados da empresa</h4>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <form action="{{ route('company.update') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <input type="hidden" name="id" class="form-control" value="" id="id">

                        <div class="form-group">
                            <label>Logotipo</label>
                            <input type="file" name="image" class="form-control">
                        </div>

                        <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label"> Nome</label>
                                <input name="name" class="form-control" value="" id="name" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label"> Endereço</label>
                                <input name="address" class="form-control" value="" id="address" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label"> Email</label>
                                <input name="email" class="form-control" value="" id="email" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label"> Site</label>
                                <input name="site" class="form-control" value="" id="site" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label"> Telefone</label>
                                <input name="phone" class="form-control" value="" id="phone" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label"> Whatsapp</label>
                                <input name="whatsapp" class="form-control" value="" id="whatsapp" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label"> Atendimento</label>
                                <textarea name="mission" class="form-control" rows="5" id="mission"></textarea>
                            </div>
                        </div>

                        <!-- Modal footer -->
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success submit">Salvar</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
                        </div>

                    </form>
                </div>

            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Seleciona todos os botões de edição
            var editButtons = document.querySelectorAll('.edit-btn');

            // Adiciona um evento de clique para cada botão de edição
            editButtons.forEach(function(button) {
                button.addEventListener('click', function() {
                    let id = this.getAttribute('data-id');
                    let name = this.getAttribute('data-name');
                    let address = this.getAttribute('data-address');
                    let email = this.getAttribute('data-email');
                    let site = this.getAttribute('data-site');
                    let phone = this.getAttribute('data-phone');
                    let whatsapp = this.getAttribute('data-whatsapp');
                    let mission = this.getAttribute('data-mission');

                    document.getElementById('id').value = id;
                    document.getElementById('name').value = name;
                    document.getElementById('address').value = address;
                    document.getElementById('email').value = email;
                    document.getElementById('site').value = site;
                    document.getElementById('phone').value = phone;
                    document.getElementById('whatsapp').value = whatsapp;
                    document.getElementById('mission').value = mission;
                });
            });
        });

        function displaySelectedImage(event, elementId) {
            const selectedImage = document.getElementById(elementId);
            const fileInput = event.target;

            if (fileInput.files && fileInput.files[0]) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    selectedImage.src = e.target.result;
                };

                reader.readAsDataURL(fileInput.files[0]);
            }
        }
    </script>

@stop