@extends('admin.layouts.main')
@section('content')
    <section class="content">
        <div class="container-fluid">
            <p>
                <button class="btn btn-primary mt-3" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
                    aria-expanded="false" aria-controls="collapseExample">
                    Create Product
                </button>
            </p>
            <div class="collapse" id="collapseExample">
                <div class="card card-body col-md-6 offset-md-3 text-center">
                    <form action="{{ route('product#create') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row">

                            <label for="" class="">name</label>
                            <input type="text" name="productName" class="form-control col-auto">

                            <label for="" class="form-label col-6">Categories</label> <label for=""
                                class="form-label col-6">Groups</label>
                            <select name="categoryId" id="" class="form-select col-6">
                                <option value="" selected>Choose category</option>
                                @foreach ($category as $c)
                                    <option value="{{ $c->category_id }}">{{ $c->name }}
                                    </option>
                                @endforeach
                            </select>

                            <select name="groupId" id="" class="form-select col-6">
                                <option value="" selected>Choose group</option>
                                @foreach ($group as $g)
                                    <option value="{{ $g->id }}">{{ $g->categoryName }}, &ensp;{{ $g->name }}
                                    </option>
                                @endforeach
                            </select>

                            <div class="form-check-inline col-12 m-3 p-0">
                                @foreach ($color as $c)
                                    <input class="form-check-input m-0" type="checkbox" value="{{ $c['name'] }}"
                                        id="flexCheckDefault" name="color[]">
                                    @if ($c['color_code'] == 'Mixed')
                                        <label class="mx-1" for=""
                                            style="width:30px;height:30px;display:grid;grid-template-columns: 50% 50%">
                                            <div style="width:100%;height:100%;background-color:#FF85A2">
                                            </div>
                                            <div style="width:100%;height:100%;background-color:#FFE300">
                                            </div>
                                            <div style="width:100%;height:100%;background-color:#5A86AD">
                                            </div>
                                            <div style="width:100%;height:100%;background-color:#FFF9EC">
                                            </div>
                                        </label>
                                    @else
                                        <label class="form-control mx-1" for=""
                                            style="content: '';background-color:{{ $c['color_code'] }};height: 30px;width: 30px;">
                                        </label>
                                    @endif
                                @endforeach
                            </div>

                            <label for="" class="form-label">price(Kyats)</label>
                            <input type="number" name="price" class="form-control col-12">

                            <label for="" class="form-label">Description</label>
                            <textarea name="description" id="" class="form-textarea" cols="30" rows="10"></textarea>
                            <label for="" class="form-label">image</label>
                            <input type="file" name="image[]" class="form-control col-12 mb-3" multiple="3" required>
                            {{-- <input type="file" name="image2" class="form-control col-12 mb-3">
                            <input type="file" name="image3" class="form-control col-12 mb-3"> --}}
                        </div>
                        <button class="btn btn-primary m-auto">create
                            product</button>
                    </form>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">

                        <div class="card-header">
                            <h3 class="card-title">Pizza Table</h3>

                            <div class="card-tools">
                                <div class="input-group input-group-sm" style="width: 150px;">
                                    <input type="text" name="table_search" class="form-control float-right"
                                        placeholder="Search">

                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-default">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- /.card-header -->
                        <div class="card-body table-responsive p-0">
                            <table class="table table-hover text-nowrap text-left">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Categories & Group</th>
                                        <th class="w-25">Color</th>
                                        <th class="w-25">image</th>

                                        <th>Price</th>

                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($product as $p)
                                        <tr>
                                            <td class="id">{{ $p->product_id }}</td>
                                            <td>{{ $p->name }}</td>
                                            <td>
                                                {{ $p->categoryName }}|
                                                {{ $p->groupName }}
                                            </td>
                                            <td>
                                                <div class="d-flex flex-wrap">
                                                    @foreach ($p->color as $c)
                                                        @php
                                                            $l = $color[array_search($c, array_column($color, 'name'))]['color_code'];
                                                            
                                                        @endphp

                                                        @if ($l == 'Mixed')
                                                            <div
                                                                style="width:30px;height:30px;display:grid;grid-template-columns: 50% 50%">
                                                                <div
                                                                    style="width:100%;height:100%;background-color:#FF85A2">
                                                                </div>
                                                                <div
                                                                    style="width:100%;height:100%;background-color:#FFE300">
                                                                </div>
                                                                <div
                                                                    style="width:100%;height:100%;background-color:#5A86AD">
                                                                </div>
                                                                <div
                                                                    style="width:100%;height:100%;background-color:#FFF9EC">
                                                                </div>
                                                            </div>
                                                        @else
                                                            <div
                                                                style="width:30px;height:30px;background-color:{{ $l }}">
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </td>
                                            <td style=" display:grid;grid-template-columns: auto auto ;gap: 0">
                                                @foreach ($p->image as $i)
                                                    <img src="
                                                    {{ asset('storage/image/' . $i) }}"
                                                        alt="" class="img-thumbnail"
                                                        style="height:200px;width:200px;object-position: center;object-fit: cover"
                                                        class="col-6">
                                                @endforeach
                                            </td>

                                            <td>
                                                <button class="btn btn-sm bg-dark text-white"><i
                                                        class="fas fa-edit"></i></button>
                                                <button class="btn btn-sm bg-danger text-white"><i
                                                        class="fas fa-trash-alt btn-delete"></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() {
                $productId = $(this).closest('tr').find('.id').text();
                $(this).closest('tr').remove();

                $.ajax({
                    type: 'get',
                    url: '/admin/product/delete',
                    data: {
                        'id': $productId,
                    },
                })
            })


        })
    </script>
@endsection