@extends('layouts.admin')
@section('styles')
<style>
    .key{
        width: 100px;
    }
    tr{
        background-color: white;
    }
</style>
@endsection
@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <b>Devices</b> <a href="{{ route('admin.devices.create') }}"><span class="badge badge-success px-2 mx-1">Add New</span></a>
            </div>
            <div class="card-body">
                <table class=" table table-bordered table-striped table-hover ajaxTable datatable datatable-Device">
                    <thead>
                        <tr>
                            <th width="10">
        
                            </th>
                            <th>
                                No
                            </th>
                            <th>
                                Serial Number
                            </th>
                            <th>
                                {{ trans('cruds.device.fields.status') }}
                            </th>
                            <th>
                                Action
                            </th>
                        </tr>
                        <tr>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <b>Detail Project</b>
            </div>
            <div class="card-body">
                <table class="table table-light">
                    <tr>
                        <td class="key">Name</td>
                        <td>: {{ $project->name }} <a href="{{ route('admin.projects.edit', $project->id) }}"><span class="badge badge-danger px-2 mx-2">Edit</span></a></td>
                    </tr>
                    <tr>
                        <td class="key">Owner</td>
                        <td>: {{ $project->company->name }}</td>
                    </tr>
                    <tr>
                        <td class="key">Product</td>
                        <td>: 
                            @foreach ($project->templates as $template)
                                <span class="badge badge-primary">{{ $template->name }}</span>
                            @endforeach
                        </td>
                    </tr>
                </table>
            </div>
        </div>

    </div>
</div>
@endsection

@section('scripts')
<script>
    $(function () {
        let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)
        @can('device_delete')
            let deleteButtonTrans = '{{ trans('global.datatables.delete') }}';
            let deleteButton = {
            text: deleteButtonTrans,
            url: "{{ route('admin.brands.massDestroy') }}",
            className: 'btn-danger',
            action: function (e, dt, node, config) {
                var ids = $.map(dt.rows({ selected: true }).data(), function (entry) {
                    return entry.id
                });

                if (ids.length === 0) {
                alert('{{ trans('global.datatables.zero_selected') }}')

                return
                }

                if (confirm('{{ trans('global.areYouSure') }}')) {
                $.ajax({
                    headers: {'x-csrf-token': _token},
                    method: 'POST',
                    url: config.url,
                    data: { ids: ids, _method: 'DELETE' }})
                    .done(function () { location.reload() })
                }
            }
            }
            dtButtons.push(deleteButton)
        @endcan
        var table = $('.datatable-Device').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('admin.devices.index') }}",
            columns: [
                {data: 'placeholder', name: 'placeholder'},
                {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                {data: 'serial_number', name: 'serial_number'},
                {data: 'status', name: 'status'},
                {data: 'actions', name: 'actions'},
            ],
            pageLength: 25,
        });
    });

</script>
<script>
  $(document).ready(function() {
    $('.js-example-basic-multiple').select2();
  });
</script>
@endsection