@extends('backoffice.layouts.app')
@section('content')
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    <!-- Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <!-- Optional: Select2 Bootstrap 5 theme (if using Bootstrap 5) -->
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css"
        rel="stylesheet" />
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
        <div class="d-block mb-4 mb-md-0">
            <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
                <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
                    <li class="breadcrumb-item">
                        <a href="#">
                            <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
                                </path>
                            </svg>
                        </a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.products') }}">Products</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Create</li>
                </ol>
            </nav>
            <h2 class="h4">Product Create</h2>
        </div>
        <div class="btn-toolbar mb-2 mb-md-0">
            <a href="{{ route('admin.products') }}" class="btn btn-sm btn-gray-800 d-inline-flex align-items-center">
                <span class="fas fa-arrow-left"></span>&nbsp;
                Back to list
            </a>
        </div>
    </div>
    <div class="card card-body">
        <div class="row">
            <form method="post" id="createProductForm" name="createProductForm">
                @csrf
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-2">
                            <label for="title">Title (EN)<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="title_en" id="title_en"
                                aria-describedby="titleHelp" placeholder="Enter Title">
                            <p></p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-2">
                            <label for="title">Title (AR)<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="title_ar" id="title_ar"
                                aria-describedby="titleHelp" placeholder="Enter Title">
                            <p></p>
                        </div>
                    </div>
                </div>
                <div class="mb-2">
                    <label for="slug">Slug <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" name="slug" id="slug" aria-describedby="slugHelp"
                        placeholder="Enter Slug" readonly>
                    <p></p>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="mb-2">
                            <label for="category">Related Products</label>
                            <select name="related_products[]" id="related_products" class="form-select select2-multiple"
                                multiple>
                                <option value="">Select</option>
                                @if (count($productCategoriesRelated))
                                    @foreach ($productCategoriesRelated as $item)
                                        @php
                                            // Convert comma-separated string to array
                                            $selectedRelated = isset($product->related_products_id)
                                                ? explode(',', $product->related_products_id)
                                                : [];
                                        @endphp
                                        <option value="{{ $item->id }}"
                                            {{ in_array($item->id, $selectedRelated) ? 'selected' : '' }}>
                                            {{ $item->title_en }}
                                        </option>
                                    @endforeach
                                @else
                                    <option value="">Not Available</option>
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-2">
                            <label for="category">Category</label>
                            <select name="category" id="category" class="form-select">
                                <option value="">Select</option>
                                {{-- <option value="0" {{ isset($product->category_id) && $product->category_id == 0 ? 'selected' : '' }}>Gift Card</option> --}}
                                @if (count($productCategories))
                                    @foreach ($productCategories as $item)
                                        <option value="{{ $item->id }}">{{ $item->title_en }}</option>
                                    @endforeach
                                @else
                                    <option value="">Not Available</option>
                                @endif
                            </select>
                            <p></p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-2">
                            <label for="brand">Brand</label>
                            <select name="brand" id="brand" class="form-select">
                                <option value="">Select</option>
                                @if (count($brands))
                                    @foreach ($brands as $item)
                                        <option value="{{ $item->id }}">{{ $item->title_en }}</option>
                                    @endforeach
                                @else
                                    <option value="">Not Available</option>
                                @endif
                            </select>
                            <p></p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="mb-2">
                            <label for="price">Cost<span class="text-danger">*</span></label>
                            <input type="number" class="form-control" name="cost" id="cost"
                                aria-describedby="priceHelp" placeholder="Enter Cost">
                            <p></p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-2">
                            <label for="price">Price<span class="text-danger">*</span></label>
                            <input type="number" class="form-control" name="price" id="price"
                                aria-describedby="priceHelp" placeholder="Enter Price">
                            <p></p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-2">
                            <label for="discount">Discount<span class="text-danger">*</span></label>
                            <input type="number" class="form-control" name="discount" id="discount"
                                aria-describedby="discountHelp" placeholder="Enter Discount">
                            <p></p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-2">
                            <label for="description_en">Description (EN)</label>
                            <textarea name="description_en" id="description_en" cols="30" rows="10" class="form-control summernote"></textarea>
                            <p></p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-2">
                            <label for="description_ar">Description (AR)</label>
                            <textarea name="description_ar" id="description_ar" cols="30" rows="10" class="form-control summernote"></textarea>
                            <p></p>
                        </div>
                    </div>
                </div>
                <div class="mb-2">
                    <label for="status">Status <span class="text-danger">*</span></label>
                    <select name="status" id="status" class="form-select">
                        <option value="">Select</option>
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                    <p></p>
                </div>
                <div class="mb-2">
                    <div class="form-group">
                        <label class="form-label">Product Images</label>
                        <div class="needsclick dropzone" id="documents-dropzone">
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="hidden" name="filename[]" id="filename">
                        <input type="hidden" name="uuid[]" id="uuid">
                        <input type="hidden" name="size[]" id="size">
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-md-6">
                        <h3 class="pt-2">Product Variant</h3>
                    </div>
                    <div class="col-md-6 text-end">
                        <button id="addRowBtn" type="button" class="btn btn-primary mt-2">Add Row</button>
                    </div>
                </div>
                <table id="myTable" class="table table-bordered mb-2">
                    <thead>
                        <tr>
                            <th width="40%">Color</th>
                            <th width="40%">Quantity</th>
                            <th width="20%">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Existing rows will be here -->
                    </tbody>
                </table>
                <div class="mb-2">
                    <input type="submit" value="Submit" class="btn btn-primary w-100">
                </div>
            </form>
        </div>
    </div>
@endsection
@section('script')
    <script>
        // console.log("Dropzone URL:", '{{ route('admin.product.storeMedia') }}');
        let file_name_arr = [];
        let file_size_arr = [];
        let file_uuid_arr = [];

        Dropzone.options.documentsDropzone = {
            url: '{{ route('admin.product.storeMedia') }}',
            maxFilesize: 50, // MB
            maxFiles: 5,
            acceptedFiles: ".jpeg,.jpg,.png,.gif,.webp",
            // acceptedFiles: ".pdf,.doc,docx,.xls,.xlsx",
            addRemoveLinks: true,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            params: {
                size: 50
            },
            success: function(file, response) {

                file_name_arr.push(file.xhr.response);
                file_uuid_arr.push(file.upload.uuid);
                file_size_arr.push(file.size);

                $("#filename").val(file_name_arr);
                $("#size").val(file_size_arr);
                $("#uuid").val(file_uuid_arr);


                // console.log(response,file);
                $('form').find('input[name="product_images"]').remove()
                $('form').append('<input type="hidden" name="product_images" value="' + response.name +
                    '">')
            },
            removedfile: function(file) {
                file.previewElement.remove();
                if (file.status !== 'error') {
                    $('form').find('input[name="product_images"]').remove()
                    this.options.maxFiles = this.options.maxFiles + 1
                }

                // The string you want to find
                var searchString = file.upload.uuid;

                // Find the index where the string matches
                var matchingIndex = file_uuid_arr.indexOf(searchString);

                // remove index from array
                file_uuid_arr.splice(matchingIndex, 1);
                file_name_arr.splice(matchingIndex, 1);
                file_size_arr.splice(matchingIndex, 1);

                // if (matchingIndex !== -1) {
                //     console.log("String found at index:", matchingIndex);
                // } else {
                //     console.log("String not found in the array.");
                // }

                // reset the array's
                $("#filename").val(file_name_arr);
                $("#size").val(file_size_arr);
                $("#uuid").val(file_uuid_arr);


            },
            init: function() {
                @if (isset($customer) && $customer->documents)
                    var file = {!! json_encode($customer->documents) !!}
                    this.options.addedfile.call(this, file)
                    file.previewElement.classList.add('dz-complete')
                    $('form').append('<input type="hidden" name="product_images" value="' + file
                        .file_name + '">')
                    this.options.maxFiles = this.options.maxFiles - 1
                @endif
            },
            error: function(file, response) {
                if ($.type(response) === 'string') {
                    var message = response //dropzone sends it's own error messages in string
                } else {
                    var message = response.errors.file
                }
                file.previewElement.classList.add('dz-error')
                _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
                _results = []
                for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                    node = _ref[_i]
                    _results.push(node.textContent = message)
                }
                return _results
            }
        }
        $(document).ready(function() {
            $(document).on("submit", "#createProductForm", function(event) {
                event.preventDefault();
                var data = new FormData(this);
                $("button[type=submit]").prop('disabled', true);
                $.ajax({
                    url: '{{ route('admin.product.store') }}',
                    type: 'post',
                    data: data,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        if (response.status === true) {
                            toastr.success(response.message, "Success");
                            $('#createProductForm')[0].reset();
                            $(".error").removeClass('invalid-feedback').html('');
                            $("input, select").removeClass('is-invalid');
                            $("button[type=submit]").prop('disabled', false);
                        } else {
                            let errors = response['errors'];
                            $("button[type=submit]").prop('disabled', false);
                            $(".error").removeClass('invalid-feedback').html('');
                            $("input, select").removeClass('is-invalid');
                            $.each(errors, function(key, value) {
                                $(`#${key}`).addClass('is-invalid')
                                    .siblings('p')
                                    .addClass('invalid-feedback')
                                    .html(value);
                            });
                            toastr.error(response.message, "Required");
                        }
                    },
                    error: function(jqXHR, exception) {
                        toastr.error("Please Try Again...", "Error");
                        $("button[type=submit]").prop('disabled', false);
                    }
                });
            });
        });
    </script>
    <script>
        var rowIndex = 0;

        $('#addRowBtn').click(function() {
            rowIndex++; // Increment the row index each time a new row is added

            // Add a new row with color dropdown and quantity input
            var colorOptions = '<select name="variants[' + rowIndex +
                '][color]" class="colorDropdown form-select" required>';
            colorOptions += '<option value="">Select</option>';
            @if (count($colors))
                @foreach ($colors as $color)
                    colorOptions +=
                        '<option value="{{ $color->id }}">{{ ucfirst($color->title_en) }}</option>';
                @endforeach
            @else
                colorOptions += '<option value="">Not Available</option>';
            @endif
            colorOptions += '</select>';

            var quantityInput = '<input type="number" name="variants[' + rowIndex +
                '][quantity]" class="quantityInput form-control" min="1" value="1" required="">';

            var deleteButton = '<button class="deleteRowBtn btn btn-danger">Delete</button>';

            var newRow = '<tr><td>' + colorOptions + '</td><td>' + quantityInput + '</td><td>' + deleteButton +
                '</td></tr>';
            $('#myTable tbody').append(newRow);
        });

        // jQuery function to delete a row
        $(document).on('click', '.deleteRowBtn', function() {
            $(this).closest('tr').remove(); // Removes the row that the button is part of
        });
        $(document).ready(function() {
            $('.select2-multiple').select2({
                placeholder: "Select related products",
                width: '100%'
            });
        });
    </script>
@endsection