@section('title')
    Modelos de Peças
@stop

@section('content-header')
    Modelos de Peças
@stop

@section('breadcrumb')
    <li>Entidades</li>
    <li class="active">Modelos de Peças</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="openPartModelsModal">
                        <i class="fas fa-plus"></i> Novo Modelo de peça
                    </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="datatable-filters-extended m-t-5 hide {{ Request::has('filter') ? 'active' : null }}" data-target="#suppliers-table">
                <ul class="list-inline pull-left">
                    <li style="margin-bottom: 5px;" class="col-xs-6">
                        <strong>Tipo de Peça</strong><br/>
                        <div class="w-100px">
                            {{ Form::select('family', ['' => 'Todos'] + $families->pluck('name', 'id_family')->toArray(), Request::has('family') ? Request::get('family') : null, ['class' => 'form-control input-sm filter-datatable select2']) }}
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    <div class="container">
        <table id="models-table" class="table table-striped">
            <thead>
            <tr>
                <th class="header panel-blue w-5">Nome</th>
                <th class="header panel-blue w-15">Descrição</th>
                <th class="header panel-blue w-7">Código de Barras</th>
                <th class="header panel-blue w-3">Referência</th>
                <th class="header panel-blue w-8">Margem de Lucro</th>
                <th class="header panel-blue w-6">Tipo de Peça</th>
                <th class="header panel-blue w-10">Ações</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    </div>
    <div class="modal fade" id="partModelsModal" tabindex="-1" role="dialog" aria-labelledby="partModelsModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="partModelsModalLabel">Novo Modelo</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="partModelsModalBody">
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            function openEditModal() {
                var id_part_model = $(this).data('id');
                $.get("{{ url('admin/pmodels') }}/" + id_part_model + "/edit", function(data) {
                    $('#partModelsModalBody').html(data);
                    $('#partModelsModalLabel').text('Editar Modelo');
                    $('#partModelsModal').modal('show');
                });
            }
            $(document).on('click', '.openEditModal', openEditModal);
            $(document).on('click', '.delete-pmodel', function() {
                var modelId = $(this).data('pmodel-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' + modelId).submit();
                    }
                });
            });

            var modelsTable = $('#models-table').DataTable({
                    processing: true,
                    serverSide: true,
                ajax: {
                    url: "{{ route('admin.pmodels.datatable') }}",
                    data: function (d) {
                        d.family = $('select[name=family]').val();
                    }
                },
                    columns: [
                        { data: 'name', name: 'name', searchable:true, orderable:true },
                        { data: 'description', name: 'description', searchable:true, orderable:true },
                        { data: 'barcode', name: 'barcode', searchable:true, orderable:true },
                        { data: 'reference', name: 'reference', searchable:true, orderable:true },
                        {
                            data: 'profit_margin',
                            name: 'profit_margin',
                            searchable: false,
                            orderable: true,
                            render: function(data) {
                                if (data) {
                                    return (data * 100).toFixed(2) + '%';
                                } else {
                                    return '';
                                }
                            }
                        },
                        { data: 'part_family.name', name: 'part_family.name', searchable:false, orderable:false },
                        { data: 'actions', name: 'actions', searchable:false },
                    ],
                    order: [
                    [0, 'asc']
                    ]
                });
            $('.filter-datatable').on('change', function (e) {
                modelsTable.draw();
                e.preventDefault();
            });
        });
        $('#openPartModelsModal').click(function() {
            $.get("{{ route('admin.pmodels.create') }}", function(data) {
                $('#partModelsModalBody').html(data);
                $('#partModelsModal').modal('show');
            });
        });
    </script>
@endsection