@extends('layout.default')
@section('styles')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
@endsection
@section('content')
    <div class="card card-custom">
        <div class="card-header flex-wrap border-0 pt-6 pb-0">
            <div class="card-title">
                <h3 class="card-label">Colors
                    {{--                <div class="text-muted pt-2 font-size-sm">Datatable initialized from HTML table</div>--}}
                </h3>
            </div>
            <div class="card-toolbar">
                <a href="{{ url('/admin/cpabanners/colors/create') }}" class="btn btn-primary font-weight-bolder">
                    <span class="svg-icon svg-icon-light svg-icon-2x">
                        <i style="color: white" class="flaticon2-plus"></i>
                    </span>New Color
                </a>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-separate table-head-custom table-foot-custom table-checkable dataTable dtr-inline" id="kt_datatable">
               <thead>
                <tr>
                    <th>Name</th>
                    <th>Hexadecimal</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                @foreach($colors as $color)
                    <tr>
                        <td>{{ $color->name }}</td>
{{--                        <div style="width: 200px;height: 20px;display: inline-block; background-color: {{ $color->hexadecimal }}"></div>--}}
                        <td  style="width: 200px;height: 20px;display: inline-block; background-color: {{ $color->hexadecimal }}"><strong style="color: white">{{ $color->hexadecimal }}</strong></td>
{{--                        <td style="background-color: {{ $color->hexadecimal }}"></td>--}}
                        <td>
                            <a href="{{ url('/admin/cpabanners/colors/' . $color->id . '/edit') }}" class="btn" title="edit"><i class="m-menu__link-icon flaticon-edit"></i></a>
                            <button onclick="deleteKB(this)" id="{{$color->id}}" type="button" data-url="{{ url('/admin/cpabanners/colors/' . $color->id) }}" data-token="{{ csrf_token() }}" class="btn" title="Delete">
                                <i class="m-menu__link-icon flaticon2-trash"></i>
                            </button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/datatable.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/sweetdelete.js') }}" type="text/javascript"></script>
@endsection