@extends('layouts.contentLayoutMaster')

{{-- page title --}}
@section('title', 'Product Form')
{{-- vendor style --}}
@section('vendor-style')
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/select2/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/select2/select2-materialize.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/file-upload/image-uploader.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/flag-icon/css/flag-icon.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/flag-icon/css/flag-icon.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/dropify/css/dropify.min.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.7/cropper.min.css">
@endsection
{{-- page style --}}
@section('page-style')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/pages/form-select2.css') }}">
    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }

    </style>
@endsection

{{-- page content --}}
@section('content')
    <div class="section">
        <div class="row">
            <div class="col s12">
                <form action="{{ route('admin.products.update', $product->id) }}" class="formValidate0" id="formValidate0"
                    method="POST" enctype="multipart/form-data">
                    <div id="html-validations" class="card card-tabs">
                        <div class="card-content">
                            <div class="card-title">
                                <div class="row">
                                    <div class="col s12 m6 l10">
                                        <h3 class="card-title font-weight-700">Product Edit </h3>
                                    </div>
                                    <div class="col s12 m6 l2">
                                    </div>
                                </div>
                            </div>
                            {{-- {{dd($errors)}} --}}
                            <div id="html-view-validations">
                                @csrf
                                @method('PUT')
                                <table class="striped">
                                    <tbody>
                                        <tr>
                                            <th class="right-align padr30px">Model *</th>
                                            <td>
                                                <input class="validate" id="model" type="text" name="model"
                                                    value="{{ $product->model }}">
                                                <small class="errorTxt1">
                                                    @if ($errors->has('model'))
                                                        <div id="model-error" class="error">
                                                            {{ $errors->first('model') }}</div>
                                                    @endif
                                                </small>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th class="right-align padr30px">Normal Price *</th>
                                            <td>
                                                {{-- <label for="grade">MMK</label> --}}
                                                <div class="custom-d-flex">
                                                    <input class="validate" id="normal_price" type="number"
                                                        name="normal_price"
                                                        value="{{ $product->inventory->normal_price ?? null }}">
                                                    <span class="mt-2">MMK</span>
                                                </div>
                                                <small class="errorTxt1">
                                                    @if ($errors->has('normal_price'))
                                                        <div id="normal_price-error" class="error">
                                                            {{ $errors->first('normal_price') }}</div>
                                                    @endif
                                                </small>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th class="right-align padr30px">Discounted Price </th>
                                            <td>
                                                {{-- <label for="grade">MMK</label> --}}
                                                <div class="custom-d-flex">
                                                    <input class="validate" id="discounted_price" type="number"
                                                        name="discounted_price"
                                                        value="{{ $product->inventory->discounted_price ?? null }}">
                                                    <span class="mt-2">MMK</span>
                                                </div>
                                                <small class="errorTxt1">
                                                    @if ($errors->has('discounted_price'))
                                                        <div id="discounted_price-error" class="error">
                                                            {{ $errors->first('discounted_price') }}</div>
                                                    @endif
                                                </small>
                                            </td>
                                        </tr>

                                        <tr>
                                            <th class="right-align padr30px">Quantity *</th>
                                            <td>
                                                <input class="validate" id="quantity" type="number" name="quantity"
                                                    value="{{ $product->inventory->actual_stock ?? null }}">
                                                <small class="errorTxt1">
                                                    @if ($errors->has('quantity'))
                                                        <div id="quantity-error" class="error">
                                                            {{ $errors->first('quantity') }}</div>
                                                    @endif
                                                </small>
                                            </td>
                                        </tr>

                                        <tr>
                                            <th class="right-align padr30px">Description *</th>
                                            <td>
                                                <textarea class="validate materialize-textarea" id="description"
                                                    name="description">{{ $product->description }}</textarea>
                                                <small class="errorTxt1">
                                                    @if ($errors->has('description'))
                                                        <div id="description-error" class="error">
                                                            {{ $errors->first('description') }}</div>
                                                    @endif
                                                </small>
                                            </td>
                                        </tr>

                                        <tr>
                                            <th class="right-align padr30px">Choose your category *</th>
                                            <td>
                                                <select class="error validate" id="category_id" name="category_id">
                                                    <option value="" disabled selected>Choose your category</option>
                                                    @foreach ($categories as $category)
                                                        <option value="{{ $category->id }}"
                                                            @if ($category->id == $product->category_id) selected @endif>
                                                            {{ $category->name }} @if ($category->is_customer_also == '1' && $category->is_merchant_also == '1')
                                                                (Customer & Merchant)
                                                            @elseif($category->is_customer_also == '1')
                                                                (Customer)
                                                            @elseif($category->is_merchant_also == '1')
                                                                (Merchant)
                                                            @endif
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <small class="errorTxt1">
                                                    @if ($errors->has('category_id'))
                                                        <div id="category_id-error" class="error">
                                                            {{ $errors->first('category_id') }}</div>
                                                    @endif
                                                </small>
                                            </td>
                                        </tr>
                                        @if ($prices->count() == 0)
                                            @foreach ($merchantClasses as $class)
                                                <tr>
                                                    <th class="with25 right-align padr30px">{{ $class->name }} Price</th>
                                                    <td>
                                                        <input type="hidden" name="classes[]" value="{{ $class->id }}">
                                                        <input type="number" name="prices[]" required>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @else
                                            @foreach ($prices as $price)
                                                <tr>
                                                    <th class="with25 right-align padr30px">
                                                        {{ $price->merchantClass->name }} Price</th>
                                                    <td>
                                                        <input type="hidden" name="classes[]"
                                                            value="{{ $price->merchant_class_id }}">
                                                        <input type="number" name="prices[]" value="{{ $price->price }}">
                                                    </td>
                                                </tr>
                                            @endforeach
                                            @if ($newMerchantPrices->count() > 0)
                                                @foreach ($newMerchantPrices as $price)
                                                    <tr>
                                                        <th class="with25 right-align padr30px">{{ $price->name }} Price
                                                        </th>
                                                        <td>
                                                            <input type="hidden" name="new_classes[]"
                                                                value="{{ $price->id }}">
                                                            <input type="number" name="new_prices[]" value="">
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @endif
                                        @endif

                                        <tr>
                                            <th class="width25 right-align padr30px">Choose your usage area *</th>
                                            <td>
                                                <select class="select2 browser-default validate" id="usage_area_id"
                                                    name="usage_area_id[]" multiple="multiple">
                                                    {{-- <option value="" disabled>Choose your Usage Area</option> --}}
                                                    @foreach ($usage_areas as $usage_area)
                                                        {{-- <option value="{{ $usage_area->id }}" @if ($usage_area->id == $product->usage_area_id) selected @endif>{{ $usage_area->name }}</option> --}}
                                                        <option value="{{ $usage_area->id }}"
                                                            @if (in_array($usage_area->id, $product_usage_areas)) selected @endif>
                                                            {{ $usage_area->name }}</option>
                                                    @endforeach
                                                </select>
                                                <small class="errorTxt1">
                                                    @if ($errors->has('usage_area_id'))
                                                        <div id="usage_area_id-error" class="error">
                                                            {{ $errors->first('usage_area_id') }}</div>
                                                    @endif
                                                </small>
                                            </td>
                                        </tr>


                                        <tr>
                                            <th class="right-align padr30px">Is Best Deal *</th>
                                            <td>
                                                <p class="is-bestdeal-radio">
                                                    <label>
                                                        <input class="validate" value="1" name="is_bestdeal"
                                                            type="radio"
                                                            @if ($product->is_bestdeal == 1) checked @endif />
                                                        <span>Yes</span>
                                                    </label>
                                                    <label>
                                                        <input class="validate" value="0" name="is_bestdeal"
                                                            type="radio"
                                                            @if ($product->is_bestdeal == 0) checked @endif />
                                                        <span>No</span>
                                                    </label>
                                                </p>
                                                <small class="errorTxt1">
                                                    @if ($errors->has('is_bestdeal'))
                                                        <div id="is_bestdeal-error" class="error">
                                                            {{ $errors->first('is_bestdeal') }}</div>
                                                    @endif
                                                </small>
                                            </td>
                                        </tr>

                                        <tr>
                                            <th class="right-align padr30px">Product Images *</th>
                                            <td>
                                                <div class="col s12 m8 l12 input-field">
                                                    <div class="input-images"></div>
                                                    <small class="errorTxt1">
                                                        @if ($errors->has('images'))
                                                            <div id="image-error" class="error">
                                                                {{ $errors->first('images') }}</div>
                                                        @endif
                                                    </small>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th class="right-align padr30px">Product Images</th>
                                            <td>
                                                <div class="container">
                                                    <div class="row">
                                                        <h6></h6>
                                                        @forelse ($product->images as $image)
                                                            <div
                                                                class="col m3 center product-image-hide-{{ $image->id }}">
                                                                <img src="{{ $image->full_image }}" alt="product image"
                                                                    class="product-images">
                                                                <div class="center">
                                                                    <div class="product-delete">
                                                                        <a class="chip red custom btn"
                                                                            onclick="imgDelete({{ $image->id }})"><span
                                                                                class="white-text">Delete</span></a>
                                                                        <input type="hidden" class="image-id"
                                                                            name="image_id" value="{{ $image->id }}">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @empty
                                                            <p>No Image Found!</p>
                                                        @endforelse
                                                    </div>
                                                    <div id="product-image-select">
                                                        <select name="product_images[]" class="product-image-id"
                                                            multiple="multiple">
                                                        </select>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th class="right-align padr30px">Banner Image</th>
                                            <td>
                                                <div class="row">
                                                    <div class="row section mt-5">
                                                        <div class="col s12" id="banner-image-section">
                                                            <input type="file" name="banner_image" id="banner_image"
                                                                class="dropify" />
                                                            <div class="cropper-box center">
                                                                <div class="crop-img-box">
                                                                    <img src="" alt="" id="show_banner_image">
                                                                </div>
                                                                <div class="preview"></div>
                                                                <button type="button" class="btn waves-effect waves-light"
                                                                    id="crop">Crop</button>
                                                            </div>
                                                            <div class="preview-box">
                                                                <input type="hidden" name="product_id"
                                                                    value="{{ $product->id }}">
                                                                <input type="hidden" name="cropped_banner_image"
                                                                    id="cropped">
                                                                <img src="" alt="" class="preview-custom-image">
                                                            </div>
                                                        </div>
                                                        <small class="errorTxt1">
                                                            @if ($errors->has('banner_image'))
                                                                <div id="banner_image-error" class="error">
                                                                    {{ $errors->first('banner_image') }}</div>
                                                            @endif
                                                        </small>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th class="right-align padr30px">Banner Images</th>
                                            <td>
                                                <div class="row">
                                                    <h6>Banner Images</h6>
                                                    @forelse ($product->banners as $banner)
                                                        <div class="col m3">
                                                            <img src="{{ $banner->image }}" alt="product image"
                                                                class="product-images">
                                                        </div>
                                                    @empty
                                                        <p>No Banner Image Found!</p>
                                                    @endforelse
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="row right pr-1">
                        <a href="{{ route('admin.products.index') }}"
                            class="waves-effect waves-light black-text padr30px">Cancel</a>
                        <button class="btn waves-effect waves-light red border-radius-10" type="submit"
                            id="btn-product-create">Update</button>
                        <button type="button" class="btn waves-effect waves-light" id="btn-product-spinner">
                            <div class="preloader-wrapper small active">
                                <div class="spinner-layer">
                                    <div class="circle-clipper left">
                                        <div class="circle"></div>
                                    </div>
                                    <div class="gap-patch">
                                        <div class="circle"></div>
                                    </div>
                                    <div class="circle-clipper right">
                                        <div class="circle"></div>
                                    </div>
                                </div>
                            </div>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

{{-- vendor script --}}
@section('vendor-script')
    <script src="{{ asset('vendors/select2/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendors/file-upload/image-uploader.min.js') }}"></script>
    <script src="{{ asset('vendors/jquery-validation/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('vendors/dropify/js/dropify.min.js') }}"></script>
@endsection

{{-- page script --}}
@section('page-script')
    <script src="{{ asset('js/scripts/form-select2.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.7/cropper.min.js"></script>
    <script src="{{ asset('js/scripts/form-validation.js') }}"></script>
    <script src="{{ asset('js/scripts/form-file-uploads.js') }}"></script>
    <script src="{{ asset('js/custom/custom-cropper.js') }}"></script>
    <script>
        $('.input-images').imageUploader();

        // $( ".product-delete" ).click(function() {
        //     let imageId = $('.image-id').val();
        //     console.log(imageId);
        // });
        $(document).ready(function() {
            $("#product-image-select").hide();
        });

        function imgDelete(imageId) {
            $('.product-image-id').append('<option value="' + imageId + '" selected>' + imageId + '</option>');
            $('.product-image-hide-' + imageId).hide();
        }
        $(document).ready(function() {
            $(".product-image-id").hide();
        });

        // $(document).ready(function() {
        //     $('#percentage').on('input', function() {
        //         if ($(this).val() > 100) {
        //             $(this).val(100);
        //         }
        //     });
        //     var discount_price = $('#discounted_price').val();
        //     var discount_type_1 = $('#discount_type').val();
        //     if (discount_type_1 == 'false') {
        //         $('.value-input').css("display", "block");
        //         $('.percent-input').css("display", "none");
        //         $('.percent-input > input').removeAttr('name');
        //         $('.value-input > input').attr('name', 'discounted_price');
        //         // $('.switch').toggle();
        //         // $('#formButton').attr('checked', 'checked');
        //     } else {
        //         $('#formButton').attr('checked', 'checked');
        //         $('.value-input').css("display", "none");
        //         $('.percent-input').css("display", "block");
        //         $('.value-input > input').removeAttr('name');
        //         $('.percent-input > input').attr('name', 'discounted_price');
        //     }
        //     $("#formButton").click(function() {
        //         var discount_type = $('#discount_type').val();
        //         if (discount_type == 'false') {
        //             $('#discount_type').val('true');
        //             $('.value-input').css("display", "none");
        //             $('.percent-input').css("display", "block");
        //             $('.value-input > input').removeAttr('name');
        //             $('.percent-input > input').attr('name', 'discounted_price');
        //         } else {
        //             $('#discount_type').val('false');
        //             $('.value-input').css("display", "block");
        //             $('.percent-input').css("display", "none");
        //             $('.percent-input > input').removeAttr('name');
        //             $('.value-input > input').attr('name', 'discounted_price');
        //         }

        //     });
        // });
    </script>
@endsection