@extends('backend.admin.layouts.app')
@section('content')

    <div class="content-wrapper">

        <section class="content">
            <div class="container-fluid">

                <div class="row ">

                    <div class="col-lg-12">
                        <div class="card mt-2">
                            <div class="card-header">
                                <h5>Product Detail</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-3">

                                        @if (file_exists(public_path() . '/uploads/products/' . $product->image))
                                            <img class="rounded" width="250" height="250"
                                                src="{{ asset('uploads/products') . '/' . $product->image }}"
                                                alt="">
                                        @else
                                            <img class="rounded" width="90" height="90"
                                                src="{{ asset('noimage.png') }}" alt="">
                                        @endif
                                    </div>
                                    <div class="col-5">

                                        <ul class="list-unstyled list-unstyled-py-3 text-dark p-2">
                                            <li>
                                                <h5 class="mt-">Product Name: {{ $product->name }}</h5>
                                            </li>

                                            <li>
                                                <h5 class="mt-">Country:
                                                    {{ !empty($product->country->name) ? $product->country->name : '-' }}
                                                </h5>
                                            </li>

                                            @php
                                                $category = App\Models\Category::where('id', $product->category_id)
                                                    ->where('parent_id', '!=', null)
                                                    ->first();
                                                $m_category = App\Models\Category::orderBy('id', 'desc')
                                                    ->where(['id' => $category->parent_id])
                                                    ->first();

                                            @endphp
                                            <li>
                                                <h5 class="mt-">Product Name: {{ $m_category->name }} /
                                                    {{ $category->name }}</h5>
                                            </li>

                                            <li>
                                                <h5 class="mt-">Price: {{ $product->sale_price }}</h5>
                                            </li>


                                        </ul>
                                    </div>

                                </div>
                                <hr>
                                @if ($product->sizes)
                                    <h4>Size</h4>
                                    @php
                                        $sizes = json_decode($product->sizes, true);
                                    @endphp

                                    @if ($sizes && is_array($sizes))
                                        @foreach ($sizes as $id)
                                            @php
                                                $size = App\Models\Size::find($id);
                                            @endphp

                                            @if ($size)
                                                <button class="btn btn-primary">{{ $size->name }}</button>
                                            @endif
                                        @endforeach
                                    @endif
                                @endif
                                <hr>
                                <button class="btn btn-sm btn-primary" data-toggle="modal"
                                    data-target="#modalWeightVariation">Add Label Variations</button>
                                @if ($product->weight_variants)
                                    <h4><span class="text-danger">{{ $product->variation_label }}</span> Variations</h4>
                                    <table class="table">
                                        <tr>
                                            <th>Variation</th>
                                            <th>Price</th>
                                            <th>Action</th>

                                        </tr>

                                        @foreach ($product->weight_variants as $weight_variant)
                                            <tr>
                                                <td>{{ $weight_variant->weight->name }}</td>
                                                <td>
                                                    {{ $weight_variant->price }}
                                                </td>

                                                <td>
                                                    <button class="btn btn-sm btn-warning" data-toggle="modal"
                                                        data-target="#modalWeightVariation{{ $weight_variant->id }}"><span
                                                            class="fa fa-edit"></span></button>

                                                    <a class="btn btn-sm btn-danger"
                                                        onclick="return confirm('Are you sure?')"
                                                        href="{{ route('product.variation.delete', $weight_variant->id) }}"><span
                                                            class="fa fa-trash"></span></a>

                                                            @include('backend.admin.vendors.editLabelVariation')
                                                </td>


                                            </tr>

                                        @endforeach
                                    </table>
                                @endif
                                <hr>

                                <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modalVariation">Add Color
                                    Variations</button>
                                @if ($product->variants)
                                    <h4>Color Variations</h4>
                                    <table class="table">
                                        <tr>
                                            <th>Color</th>
                                            <th>Price</th>
                                            <th>Image</th>
                                            <th>Action</th>

                                        </tr>

                                        @foreach ($product->variants as $variant)
                                            <tr>
                                                <td>
                                                    {{ optional($variant->color)->name }}

                                                    <div class="p-2"
                                                        style="width:50px;background-color: {{ optional($variant->color)->code }}">
                                                    </div>
                                                </td>
                                                <td>
                                                    {{ $variant->price }}
                                                </td>
                                                <td>
                                                    <img width="70" height="70" class="rounded"
                                                        src="{{ asset('uploads/products/variations') . '/' . $variant->image }}"
                                                        alt="">
                                                </td>
                                                <td>
                                                    <button class="btn btn-sm btn-warning" data-toggle="modal"
                                                        data-target="#modalupdateVariation{{$variant->id }}"><span
                                                            class="fa fa-edit"></span></button>

                                                    <a class="btn btn-sm btn-danger"
                                                        onclick="return confirm('Are you sure?')"
                                                        href="{{ route('product.variation.delete', $variant->id) }}"><span
                                                            class="fa fa-trash"></span></a>

                                                    @include('backend.admin.vendors.editColorVariation')

                                                </td>


                                            </tr>

                                        @endforeach
                                    </table>
                                @endif
                                <hr>
                                <p>
                                    @if (!empty($product->gallery_images))
                                        <h4>Gallery</h4>
                                        @foreach (json_decode($product->gallery_images) as $image)
                                            <img class="ml-1 mt-1" width="200" height="200"
                                                src="{{ asset('uploads/products/gallery') . '/' . $image }}">
                                        @endforeach
                                    @endif
                                </p>

                                <hr>
                                <p>
                                <h5>Short Descriptionn</h5>
                                {{ $product->short_description }}
                                </p>
                                <hr>
                                <p>
                                <h5>Long Descriptionn</h5>
                                {!! $product->long_description !!}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="modalWeightVariation" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Add variation
                                </h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <form action="{{ route('product.weight_variation.add') }}" method="post"
                                enctype="multipart/form-data">
                                <input type="hidden" value="{{ $product->id }}" name="product_id">
                                @csrf
                                <div class="modal-body">
                                    <table class="table table-bordered" id="dynamic_field">
                                        <tr>
                                            <th>Variation</th>
                                            <th>Price</th>
                                            <th>+</th>
                                        </tr>
                                        <tr>
                                            <td>
                                                <select name="weights[]" class="form-control" id="">
                                                    @foreach ($weights as $key => $weight)
                                                        <option value="{{ $weight->id }}">{{ $weight->name }}</option>
                                                    @endforeach
                                                </select>

                                            </td>
                                            <td>
                                                <input type="text" name="weight_price[]" value=""
                                                    placeholder="Price" class="form-control name_list" />
                                            </td>


                                            <td><button type="button" name="add" id="add"
                                                    class="btn btn-success btn-sm">+</button></td>
                                        </tr>
                                    </table>
                                    <button class="btn btn-primary btn_save" type="submit">Save</button>

                                </div>
                            </form>

                        </div>
                    </div>
                </div>

                <div class="modal fade" id="modalVariation" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Add variation
                                </h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <form action="{{ route('product.variation.add') }}" method="post"
                                enctype="multipart/form-data">
                                <input type="hidden" value="{{ $product->id }}" name="product_id">
                                @csrf
                                <div class="modal-body">
                                    <table class="table table-bordered" id="dynamic_field1">
                                        <tr>
                                            <th>Color</th>
                                            <th>Price</th>
                                            <th>Image</th>
                                            <th>+</th>
                                        </tr>
                                        <tr>
                                            <td>
                                                <select name="colors[]" class="form-control" id="">
                                                    @foreach ($colors as $key => $row)
                                                        <option value="{{ $row->id }}">{{ $row->name }}</option>
                                                    @endforeach
                                                </select>

                                            </td>
                                            <td>
                                                <input type="text" name="variant_price[]" value=""
                                                    placeholder="Price" class="form-control name_list" />
                                            </td>
                                            <td>
                                                <input type="file" name="variant_images[]" value=""
                                                    class="form-control name_list" />
                                            </td>

                                            <td><button type="button" name="add" id="add1"
                                                    class="btn btn-success btn-sm">+</button></td>
                                        </tr>
                                    </table>
                                    <button class="btn btn-primary btn_save" type="submit">Save</button>

                                </div>
                            </form>

                        </div>
                    </div>
                </div>


            </div>
        </section>
        <!-- /.content -->
    </div>

    <script>
        $(document).ready(function() {
            $('#imageUpload').on('change', function() {
                const previewContainer = $('#imagePreview');
                previewContainer.empty();

                const files = $(this)[0].files;
                if (files.length === 0) return;

                for (let i = 0; i < files.length; i++) {
                    const file = files[i];
                    const reader = new FileReader();

                    reader.onload = function(e) {
                        const imageSrc = e.target.result;
                        const previewHtml = `
                    <div class="col-md-2">
                        <div class="position-relative">
                            <img src="${imageSrc}" class="img-thumbnail preview-image" alt="Image Preview">
                            <button type="button" class="close delete-image" aria-label="Delete" data-index="${i}">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    </div>
                `;
                        previewContainer.append(previewHtml);
                    };

                    reader.readAsDataURL(file);
                }
            });

            // Handle delete button click
            $('#imagePreview').on('click', '.delete-image', function() {
                const index = $(this).data('index');
                const fileInput = $('#imageUpload')[0];
                const files = fileInput.files;
                const newFiles = [];

                for (let i = 0; i < files.length; i++) {
                    if (i !== index) {
                        newFiles.push(files[i]);
                    }
                }

                // Create a new FileList object with the remaining files
                const newFileList = new DataTransfer();
                newFiles.forEach((file) => {
                    newFileList.items.add(file);
                });

                // Set the new FileList as the value of the input element
                fileInput.files = newFileList.files;

                // Remove the corresponding image preview
                $(this).closest('.col-md-2').remove();
            });
        });
    </script>
    <script>
        var i = 0;

        $('#add').click(function() {
            i++;
            var weightDropdown = '<select name="weights[]" class="form-control">';
            @foreach ($weights as $weight)
                weightDropdown += '<option value="{{ $weight->id }}">{{ $weight->name }}</option>';
            @endforeach
            weightDropdown += '</select>';

            $('#dynamic_field').append('<tr id="row' + i + '"><td>' + weightDropdown +
                '<td><input type="text" name="weight_price[]" placeholder="Price" class="form-control" /></td>' +
                '<td><button type="button" name="remove" id="' + i +
                '" class="btn btn-danger btn-sm btn_remove">X</button></td></tr>');
        });

        $(document).on('click', '.btn_remove', function() {
            var button_id = $(this).attr("id");
            $('#row' + button_id).remove();
        });
    </script>

    <script>
        var j = 0;

        $('#add1').click(function() {
            j++;
            var colorsDropdown = '<select name="colors[]" class="form-control">';
            @foreach ($colors as $row)
                colorsDropdown += '<option value="{{ $row->id }}">{{ $row->name }}</option>';
            @endforeach
            colorsDropdown += '</select>';

            $('#dynamic_field1').append('<tr id="row1' + j + '"><td>' + colorsDropdown +
                '</td><td><input type="text" name="variant_price[]" placeholder="Price" class="form-control" /></td>' +
                '<td><input type="file" name="variant_images[]" class="form-control" /></td>' +
                '<td><button type="button" name="remove" id="' + j +
                '" class="btn btn-danger btn-sm btn_remove">X</button></td></tr>');
        });

        $(document).on('click', '.btn_remove', function() {
            var button_id = $(this).attr("id");
            $('#row1' + button_id).remove();
        });
    </script>
@endsection