@section('title', 'Marcas')

@section('content-header', 'Marcas')

@section('breadcrumb')
    <li>Entidades</li>
    <li class="active">Marcas</li>
@stop

@section('content')
    <div class="box no-border">
        <div class="box-body">
            <ul class="datatable-filters list-inline pull-left" data-target="#datatable">
                <li>
                    <button type="button" class="btn btn-success btn-sm" id="openBrandsModal">
                        <i class="fas fa-plus"></i> Nova Marca
                    </button>
                </li>
{{--                <button type="button" class="btn btn-filter-datatable btn-default">--}}
{{--                    <i class="fas fa-filter"></i> Filtrar <i class="fas fa-angle-down"></i>--}}
{{--                </button>--}}

            </ul>
        </div>
    <div class="container">
        <div class="table-responsive">
            <table id="brands-table" class="table table-striped">
                <thead>
                <tr>
                    <th class="header panel-blue">Nome</th>
                    <th class="header panel-blue">Descrição</th>
                    <th class="header panel-blue">Ações</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    </div>
    <div class="modal fade" id="brandsModal" tabindex="-1" role="dialog" aria-labelledby="brandsModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="brandsModalLabel">Nova Marca</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">X</span>
                    </button>
                </div>
                <div class="modal-body" id="brandsModalBody">
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            function openEditModal() {
                var id_brand = $(this).data('id');
                $.get("{{ url('admin/brands') }}/" + id_brand + "/edit", function(data) {
                    $('#brandsModalBody').html(data);
                    $('#brandsModalLabel').text('Editar Marca');
                    $('#brandsModal').modal('show');
                });
            }
            $(document).on('click', '.openEditModal', openEditModal);
            $(document).on('click', '.delete-brand', function() {
                var brandId = $(this).data('brand-id');

                Swal.fire({
                    title: 'Tem a certeza?',
                    text: 'Esta ação não pode ser revertida!',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Sim, apagar!',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Enviar o formulário de exclusão
                        $('#deleteForm' + brandId).submit();
                    }
                });
            });
            $('#brands-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.brands.datatable') }}",
                columns: [
                    { data: 'name', name: 'name', searchable: true, orderable:true },
                    { data: 'description', name: 'description', searchable: true, orderable:true },
                    { data: 'actions', name: 'actions', searchable: true, orderable:false },
                ],
                order: [
                    [0, 'asc']
                ]
            });
            $('#openBrandsModal').click(function() {
                $.get("{{ route('admin.brands.create') }}", function(data) {
                    $('#brandsModalBody').html(data);
                    $('#brandsModal').modal('show');
                });
            });});
    </script>
@endsection