@extends('layouts.user', ['header' => true, 'nav' => true, 'demo' => true, 'settings' => $settings])

@section('css')
<link href="{{ asset('backend/css/dropzone.min.css')}}" rel="stylesheet">
<script src="{{ asset('backend/js/dropzone.min.js')}}"></script>
@endsection

@section('content')
<div class="page-wrapper">
    <!-- Page title -->
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        {{ __('Overview') }}
                    </div>
                    <h2 class="page-title">
                        {{ __('Update Products') }}
                    </h2>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-xl">
            <div class="row row-deck row-cards">
                <div class="col-sm-12 col-lg-12">
                    <form action="{{ route('user.update.products', Request::segment(3)) }}" method="post"
                        enctype="multipart/form-data" class="card">
                        @csrf
                        <div class="card-body">
                            <div class="row">
                                <div class="col-xl-12">

                                    <div class="row">

                                        <h2 class="page-title my-3">
                                            {{ __('Products') }}
                                        </h2>

                                        @for ($i = 0; $i < count($products); $i++) <div class='row' id="{{ $i }}">
                                            <div class='col-md-6 col-xl-6'>
                                                <div class='mb-3'>
                                                    <label class='form-label required' for='product_status'>{{ __('Categories') }}</label>
                                                    <select name='categories[]' id='categories' class='form-control' required>
                                                        @foreach ($categories as $category)
                                                        <option value='{{ $category->category_id }}' {{ $category->category_id == $products[$i]->category_id ? 'selected' : '' }}>{{ __($category->category_name) }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class='col-md-6 col-xl-6'>
                                                <div class='mb-3'>
                                                    <label class='form-label required'>{{ __('Product Badge') }}</label>
                                                    <input type='text' class='form-control' name='badge[]'
                                                        placeholder='{{ __(' Product Badge') }}...'
                                                        value="{{ $products[$i]->badge }}" required>
                                                </div>
                                            </div>
                                            <div class='col-md-6 col-xl-6'>
                                                <div class='mb-3'>
                                                    <label class='form-label required'>{{ __('Product Image') }}</label>
                                                    <div class='input-group mb-2'>
                                                        <input type='text'
                                                            class='image{{ $products[$i]->id }} media-model form-control'
                                                            name='product_image[]' placeholder='{{ __(' Product Image')
                                                            }}' value="{{ $products[$i]->product_image }}" required>
                                                        <button class='btn btn-primary btn-md' type='button'
                                                            onclick="openMedia({{ $products[$i]->id }})">{{ __('Choose
                                                            image') }}</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class='col-md-6 col-xl-6'>
                                                <div class='mb-3'>
                                                    <label class='form-label required'>{{ __('Product Name') }}</label>
                                                    <input type='text' class='form-control' name='product_name[]'
                                                        placeholder='{{ __(' Product Name') }}'
                                                        value="{{ $products[$i]->product_name }}" required>
                                                </div>
                                            </div>
                                            <div class='col-md-6 col-xl-6'>
                                                <div class='mb-3'>
                                                    <label class='form-label required'>{{ __('Product Subtitle')
                                                        }}</label>
                                                    <textarea class='form-control' name='product_subtitle[]'
                                                        data-bs-toggle='autosize' placeholder='{{ __(' Product Subtitle') }}...'
                                                        required>{{ $products[$i]->product_subtitle }}</textarea>
                                                </div>
                                            </div>
                                            <div class='col-md-6 col-xl-6'>
                                                <div class='mb-3'><label class='form-label required'>{{ __('Regular
                                                        Price') }}</label>
                                                    <input type='number' class='form-control' name='regular_price[]'
                                                        min='1' placeholder='{{ __(' Regular Price') }}...'
                                                        value="{{ $products[$i]->regular_price }}" min='1' step='.001'
                                                        required>
                                                </div>
                                            </div>
                                            <div class='col-md-6 col-xl-6'>
                                                <div class='mb-3'>
                                                    <label class='form-label required'>{{ __('Sales Price') }}</label>
                                                    <input type='number' class='form-control' name='sales_price[]'
                                                        min='1' step='.001' value="{{ $products[$i]->sales_price }}"
                                                        placeholder='{{ __(' Sales Price') }}...' required>
                                                </div>
                                            </div>
                                            <div class='col-md-6 col-xl-6'>
                                                <div class='mb-3'>
                                                    <label class='form-label required' for='product_status'>{{
                                                        __('Status') }}</label>
                                                    <select name='product_status[]' id='product_status'
                                                        class='form-control' required>
                                                        <option value='instock' {{ $products[$i]->product_status ==
                                                            "instock" ? "selected" : "" }}>
                                                            {{ __('In Stock') }}</option>
                                                        <option value='outstock' {{ $products[$i]->product_status ==
                                                            "outstock" ? "selected" : "" }}>
                                                            {{ __('Out of Stock') }}</option>
                                                    </select>
                                                    <a href='#' class='btn mt-3 btn-danger btn-sm'
                                                        onclick='removeProduct({{ $i }})'>{{ __('Remove') }}</a>
                                                </div>
                                            </div>
                                    </div>
                                    @endfor
                                </div>
                            </div>
                        </div>

                        <div id="more-products" class="row"></div>

                        <div class="col-lg-12">
                            <button type="button" onclick="addProduct()" class="btn btn-primary">
                                {{ __('Add One More Product') }}
                            </button>
                        </div>


                        <div class="col-md-4 col-xl-4 my-3">
                            <div class="mb-3">
                                <a href="{{ route('user.stores') }}" class="btn btn-primary">
                                    {{ __('Skip & Continue') }}
                                </a>

                                <button type="submit" class="btn btn-primary">
                                    {{ __('Submit') }}
                                </button>
                            </div>
                        </div>
                </div>
            </div>
        </div>
        </form>
    </div>
    @include('user.includes.footer')
</div>

<div class="modal modal-blur fade" id="openMediaModel" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('Media Library')}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row row-cards" id="captions">
                    {{-- Upload multiple images --}}
                    <div class="col-sm-12 col-lg-12 mb-4">
                        <form action="{{ route('user.multiple') }}" class="dropzone" id="dropzone"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="dz-message">
                                {{ __('Drag and Drop Single/Multiple Files Here') }} <br>
                            </div>
                        </form>
                    </div>

                    @if (!empty($media) && $media->count())
                    @foreach ($media as $gallery)
                    <div class="col-6 col-sm-4">
                        <label class="form-imagecheck mb-2">
                          <input name="form-imagecheck" type="checkbox" id="{{ $gallery->media_url }}" class="form-imagecheck-input media_image">
                          <span class="form-imagecheck-figure">
                            <img src="{{ asset($gallery->media_url) }}" class="form-imagecheck-image">
                          </span>
                        </label>
                    </div>
                    @endforeach
                    @else
                    <div class="empty">
                        <div class="empty-img"><img src="{{ asset('backend/img/undraw_printing_invoices_5r4r.svg') }}"
                                height="128" alt="">
                        </div>
                        <p class="empty-title">{{ __('No media found') }}</p>
                        <p class="empty-subtitle text-muted">
                            {{ __('Try adjusting your add to find what you are looking for.') }}
                        </p>
                    </div>
                    @endif
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{ __('Select') }}</button>
            </div>
        </div>
    </div>
</div>

@push('custom-js')
<script>
    var count = {{ count($products) }};
    var currentSelection = 0;
    function addProduct() {
	"use strict";
    if (count>={{ $plan_details->no_of_store_products }}) {
        swal({
            title: `{{ __('Oops!') }}`,
            icon: 'warning',
            text: `{{ __('You have reached your current plan limit.') }}`,
            timer: 2000,
            buttons: false,
        });
    }
    else {
        count++;
        var id = getRandomInt();
        var products = `<div class='row' id=`+ id +`>
                            <div class='col-md-6 col-xl-6'>
                                <div class='mb-3'>
                                    <label class='form-label required' for='product_status'>{{ __('Categories') }}</label>
                                    <select name='categories[]' id='categories' class='form-control' required>
                                        @foreach ($categories as $category)
                                        <option value='{{ $category->category_id }}'>{{ __($category->category_name) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class='col-md-6 col-xl-6'>
                                <div class='mb-3'>
                                    <label class='form-label required'>{{ __('Product Badge') }}</label>
                                    <input type='text' class='form-control' name='badge[]'placeholder='{{ __('Product Badge') }}...' required>
                                </div>
                            </div>
                            <div class='col-md-6 col-xl-6'>
                                <div class='mb-3'>
                                    <label class='form-label required'>{{ __('Product Image') }} </label>
                                    <div class='input-group mb-2'>
                                        <input type='text' class='image`+id+` media-model form-control' name='product_image[]' placeholder='{{ __('Product Image') }}' required>
                                        <button class='btn btn-primary btn-md' type='button' onclick='openMedia(`+ id +`)'>{{ __('Choose image') }}</button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class='col-md-6 col-xl-6'>
                                <div class='mb-3'> 
                                    <label class='form-label required'>{{ __('Product Name') }}</label> 
                                    <input type='text' class='form-control' name='product_name[]' placeholder='{{ __('Product Name') }}' required> 
                                </div>
                            </div>
                            
                            <div class='col-md-6 col-xl-6'>
                                <div class='mb-3'>
                                    <label class='form-label required'>{{ __('Product Sub Title') }}</label>
                                    <textarea class='form-control' name='product_subtitle[]' data-bs-toggle='autosize' placeholder='{{ __('Product Sub Title') }}...' required></textarea>
                                </div>
                            </div>
                            
                            <div class='col-md-6 col-xl-6'>
                                <div class='mb-3'><label class='form-label required'>{{ __('Regular Price') }}</label>
                                    <input type='number' class='form-control' name='regular_price[]' min='1' step='.001' placeholder='{{ __('Regular Price') }}...' required>
                                </div>
                            </div>
                            
                            <div class='col-md-6 col-xl-6'>
                                <div class='mb-3'>
                                    <label class='form-label required'>{{ __('Sales Price') }}</label>
                                    <input type='number' class='form-control' name='sales_price[]' min='1' step='.001' placeholder='{{ __('Sales Price') }}...' required>
                                </div>
                            </div>
                            
                            <div class='col-md-6 col-xl-6'>
                                <div class='mb-3'>
                                    <label class='form-label required' for='product_status'>{{ __('Status') }}</label>
                                    <select name='product_status[]' id='product_status' class='form-control' required>
                                        <option value='instock'>{{ __('In Stock') }}</option>
                                        <option value='outstock'>{{ __('Out of Stock') }}</option>
                                    </select>
                                    <a href='#' class='btn mt-3 btn-danger btn-sm' onclick='removeProduct(`+id+`)'>{{ __('Remove') }}</a>
                                </div>
                            </div>
                        </div>
                        <br>`;
        $("#more-products").append(products).html();
    }
    }

    function removeProduct(id) {
	"use strict";
        $("#"+id).remove();
    }

    function getRandomInt() {
        min = Math.ceil(0);
        max = Math.floor(9999999999);
        return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
    }

    function chooseImg(a){
        "use strict";
        var imgUri = $(a).attr('id');
        if (this.checked) {
            if($.inArray(imgUri, selectedImages)) {
                selectedImages.push(imgUri);
            } else {
                selectedImages.splice($.inArray(imgUri, selectedImages), 1);
            }
        } else {
            selectedImages.splice($.inArray(imgUri, selectedImages), 1);
        }
        $('.image'+currentSelection).val(selectedImages);
    }
</script>
<script type="text/javascript">
    Dropzone.options.dropzone = {
            maxFilesize  : {{ env('SIZE_LIMIT')/1024 }},
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            init: function() {
            this.on("success", function(file, response) {
                var uploadImages = `<div class="col-6 col-sm-4">
                        <label class="form-imagecheck mb-2">
                          <input name="form-imagecheck" type="checkbox" id="../../images/`+response.image_url+`" class="form-imagecheck-input media_image" onclick="chooseImg(this)">
                          <span class="form-imagecheck-figure">
                            <img src="../../images/`+response.image_url+`" class="form-imagecheck-image">
                          </span>
                        </label>
                    </div>`;

                $("#captions").append(uploadImages).html();

                $('.image'+currentSelection).val(`/images/`+response.image_url);

                $('#openMediaModel').modal('hide');

                // Hidden empty
                $(".empty").hide();
            });
        }
        };

        var selectedImages = "";
        function openMedia(id){
            "use strict";
            currentSelection = id;
            selectedImages = [];
            $('.image'+currentSelection).val("");
            $(".media_image").prop("checked", false)
            $('#openMediaModel').modal('show');
        }

        $(".media_image").on( "click", function() {
            var imgUri = $(this).attr('id');
            if (this.checked) {
                if($.inArray(imgUri, selectedImages)) {
                    selectedImages.push(imgUri);
                } else {
                    selectedImages.splice($.inArray(imgUri, selectedImages), 1);
                }
            } else {
                selectedImages.splice($.inArray(imgUri, selectedImages), 1);
            }
            $('.image'+currentSelection).val(selectedImages);
        });
</script>
@endpush
@endsection