@extends('admin.layouts.main')
@section('content')
    <section class="content">
        <div class="container-fluid">
            <div class="row mt-4 ">
                <div class=" offset-lg-3 col-lg-6 mt-5 ">
                    <form action="{{ route('color#create') }}" method="post">
                        @csrf
                        <div class="card">
                            <div class="card-header  text-center">
                                <h3 class="card-title">
                                    Color
                                </h3>
                            </div>

                            <!-- /.card-header -->
                            <div class="card-body text-center row">
                                <input type="text" name="colorName" placeholder="add color" class="form-control col-11">
                                <input type="color" name="colorCode" class="form-control-color col-1 p-1">
                                <button class="btn btn-primary  mt-3 "> Add Color</button>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </form>
                </div>

            </div>
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body table-responsive p-0">
                            <table class="table table-hover text-nowrap text-center">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th> Name</th>
                                        <th>Color</th>
                                        <th>Created Date</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($color as $item)
                                        <tr>
                                            <td class="id">{{ $item->color_id }}</td>
                                            <td>{{ $item->name }}</td>

                                            <td style="background-color: {{ $item->color_code }}">{{ $item->color_code }}
                                            </td>

                                            <td>{{ $item->created_at }}</td>
                                            <td>
                                                {{-- <a href="{{ route('category#edit', $item->category_id) }}"
                                                    class="btn btn-sm bg-dark text-white"><i class="fas fa-edit"></i></a> --}}
                                                <button class="btn btn-sm bg-danger text-white btn-delete"><i
                                                        class="fas fa-trash-alt"></i></button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>

            </div>

        </div><!-- /.container-fluid -->
    </section>
@endsection
@section('scriptSource')
    <script>
        $(document).ready(function() {
            $('.btn-delete').on('click', function() {
                $colorId = $(this).closest('tr').find('.id').text();
                $(this).closest('tr').remove();

                $.ajax({
                    type: 'get',
                    url: '/admin/category/color/delete',
                    data: {
                        'id': $colorId,
                    },
                })
            })


        })
    </script>
@endsection