@extends('layouts.layout')
@section('content')
    <style>
        label {
            text-transform: capitalize;
        }

        .form-group-inner-main {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        input#validationCustom02 {
            width: 85%;
        }

        .table th {
            font-size: 14px !important;
        }
    </style>
    <div class="page-body">
        <!-- Container-fluid starts-->
        <div class="container-fluid">
            <div class="page-header">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="page-header-left">
                            <h3>Add Sama Products
                                <small>Diamond Admin panel</small>
                            </h3>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <ol class="breadcrumb pull-right">
                            <li class="breadcrumb-item">
                                <a href="{{ route('admin.dashboard') }}">
                                    <i data-feather="home"></i>
                                </a>
                            </li>
                            <li class="breadcrumb-item"><a href="{{ route('sama.internal-product.list') }}">Product List</a>
                            </li>
                            <li class="breadcrumb-item active">Add Product</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- Container-fluid Ends-->
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <a href="{{ route('edit.product.info', ['id' => $obj->id]) }}" class="btn btn-danger">Product Info</a>
                            <a href="{{ route('edit.gemstone.info', ['id' => $obj->id]) }}" class="btn btn-danger">Gemstone info</a>
                            <a href="{{ route('edit.product.images',['id'=>$obj->id]) }}" class="btn btn-danger">Images</a>
                            <a href="{{ route('edit.product.videos',['id'=>$obj->id]) }}" class="btn btn-danger">videos</a>
                            <a href="{{ route('edit.product.price',['id'=>$obj->id]) }}" class="btn btn-danger">Prices</a>
                            <a href="{{ route('edit.product.mapping', ['id' => $obj->id]) }}" class="btn btn-primary">products mapping</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Container-fluid starts-->
        <div class="container-fluid">
            <div class="card">
                <div class="card-header">
                    Product Id : {{ $obj['id'] }} <br>
                    Product Type : {{ $obj['type'] == 'parent_product' ? 'PARENT' : 'CHILD' }} <br>
                    Product Sku : {{ $obj['sama_sku']  }} <br>
                    Product Name : {{ $obj['product_browse_pg_name'] }}
                </div>
                <div class="card-body">
                    <div class="col-md-12 mb-2">
                        {{-- @if (($obj['type'] == 'parent_product' && $obj['parent_sku'] == '') || empty($obj['sama_parent_sku'])) --}}
                        @if (($obj['type'] == 'parent_product'))
                            <form action="{{ route('update.product.mapping',['id'=>$obj->id]) }}" method="POST">
                                @csrf
                                <div class="form-group">
                                    <input type="hidden" name="type" value="{{ $obj->type }}">
                                    <label for="">choose products</label>
                                    <select name="products[]" id="mapped_products" class="form-control" multiple>
                                        <option selected disabled>--select--</option>
                                        @foreach ($list as $values)
                                            <option value="{{ $values['id'] }}"
                                                {{ in_array($values['id'], $mapped_ids) ? 'selected' : '' }}>
                                                {{ $values['product_browse_pg_name'] }} -- {{ $values['type'] =='parent_product'?'Parent Product':'Child Product' }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-primary">Add More</button>
                                </div>
                            </form>
                        @else
                            <form action="{{ route('update.product.mapping',['id'=>$obj->id]) }}" method="POST">
                                @csrf
                                <div class="form-group">
                                    <label for="">choose parent products</label>
                                    <input type="hidden" name="type" value="{{ $obj->type }}">
                                    <select name="products"  id="mapped_products" class="form-control">
                                        <option selected disabled>--select--</option>
                                        @foreach ($list as $values)
                                            <option value="{{ $values['id'] }}"
                                                {{ in_array($values['id'], $mapped_ids) ? 'selected' : '' }}>
                                                {{ $values['product_browse_pg_name'] }} --   {{ $values['type'] =='parent_product'?'Parent Product':'Child Product' }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-primary">Update</button>
                                </div>
                            </form>
                        @endif

                    </div>

                    <div class="col-md-12 mt-5">
                        <table class="table table-responsive">
                            <thead>
                                <tr>
                                    <th>SR</th>
                                    <th>NAME</th>
                                    <th>SKU</th>
                                    <th>Type</th>
                                    <th>Fractionsemimount</th>
                                    <th>Option</th>
                                </tr>
                            </thead>

                            <tbody>
                                @php
                                    $i =1;
                                @endphp
                                @foreach ($mapped_products as $index => $mapped_product)

                                    <tr>
                                        <td>{{ $i++ }}</td>
                                        <td>{{ $mapped_product['sama_sku'] }}</td>
                                        <td>{{ $mapped_product['product_browse_pg_name'] }}</td>
                                        <td>{{ $mapped_product['type'] == 'parent_product'?'PARENT':'CHILD' }}</td>
                                        <td>
                                            {{ $mapped_product['fractionsemimount'] }}
                                        </td>
                                        <td>
                                            <a href="{{ route('remove.mapped.child',['id'=>$mapped_product['id']]) }}" title="REMOVE"><i class="fa fa-trash text-danger"></i></a>
                                        </td>
                                    </tr>

                                @endforeach

                            </tbody>

                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- Container-fluid Ends-->
    </div>
    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#mapped_products').select2();
            });
        </script>
    @endpush
@endsection