@extends('layouts.back-end.body')
@section('content')
    <div class="app-content pt-3 p-md-3 p-lg-4">
        <div class="container-xl">
            <h1 class="app-page-title"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"
                    class="bi bi-box-seam" viewBox="0 0 16 16">
                    <path
                        d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z" />
                </svg><span class="sub-navicate">{{ __('message.product') }} <svg xmlns="http://www.w3.org/2000/svg"
                        width="16" height="16" fill="currentColor" class="bi bi-chevron-double-right"
                        viewBox="0 0 16 16">
                        <path fill-rule="evenodd"
                            d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z" />
                        <path fill-rule="evenodd"
                            d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z" />
                    </svg> {!! $title !!}</h1></span>
            <form class="form-horizontal" id="form-product" method="POST"
                action="{{ !isset($row) ? route('product.store') : route('product.update', $row->id) }}"
                enctype="multipart/form-data">
                @csrf
                @if (isset($row))
                    <input name="_method" type="hidden" value="PUT">
                    <input type="hidden" name="user_id" value="{{ isset($row['user']) ? $row['user']['id'] : 0 }}">
                @endif
                <div class="app-card app-card-notification shadow-sm mb-4">
                    <div class="app-card-body p-4 input-p-4">
                        <div class="col-lg-12 col-md-12 col-sm-12 row middle-decoration slide-padding">

                            <div class="col-lg-3 col-md-3 col-sm-12 tab-language">
                                <label>{{ __('message.product') }} {{ __('message.title') }}<span
                                        class="red">*</span></label>
                                <input type="text" class="form-control require-input" name="product_title"
                                    value="{{ isset($row['product_title']) ? $row['product_title'] : '' }}"
                                    placeholder="{{ __('message.please input') }}">
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-12 tab-language">
                                <label>{{ __('message.product') }} {{ __('message.code') }}<span
                                        class="red">*</span></label>
                                <input type="text" class="form-control require-input" name="product_code"
                                    value="{{ isset($row['product_code']) ? $row['product_code'] : '' }}"
                                    placeholder="{{ __('message.please input') }}">
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-12 tab-language">
                                <label>{{ __('message.price') }}<span class="red">*</span></label>
                                <div class="input-group">
                                    <input type="text" class="form-control read-only-txt" name="price" id="price"
                                        onkeypress="return numberOnly(event)"
                                        value="{{ isset($row['price']) ? $row['price'] : '' }}"
                                        placeholder="{{ __('message.please input') }}">
                                    <div class="input-group-append">
                                        <span class="input-group-text" id="basic-addon2">THB</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-12">
                                <label>{{ __('message.commission') }}<span class="red">*</span></label>
                                <div class="input-group">
                                    <input type="text" class="form-control read-only-txt" name="commission"
                                        id="commission" onkeypress="return numberOnly(event)"
                                        value="{{ isset($row['commission']['price']) ? $row['commission']['price'] : '' }}"
                                        placeholder="{{ __('message.please input') }}" required>
                                    <div class="input-group-append">
                                        <span class="input-group-text" id="basic-addon2">THB</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-12 tab-language">
                                <label>{{ __('message.sort number') }}<span class="red">*</span></label>
                                <input type="text" class="form-control require-input" name="sort_number"
                                    value="{{ isset($row['sort_number']) ? $row['sort_number'] : '' }}"
                                    placeholder="{{ __('message.please input') }}" onkeypress="return numberOnly(event)">
                            </div>

                            <div class="col-lg-8 col-md-8 col-sm-12">
                                <div class="image-upload-wrap">
                                    <input class="file-upload-input" type='file' name="original_file[]"
                                        id="original_file" onchange="readURL(this);" accept="image/*" />
                                    <div class="drag-text">
                                        <h3> {{ __('message.please select an image') }}</h3>
                                    </div>
                                </div>
                                <div class="file-upload-content img-container">
                                    <img class="file-upload-image" id="file-upload-image" src="#" alt="your image" />
                                    <button class="btn" type="button" onclick="removeUpload()"><svg
                                            xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                            fill="currentColor" class="bi bi-x-square" viewBox="0 0 16 16">
                                            <path
                                                d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                                            <path
                                                d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                                        </svg></button>
                                </div>
                                <span
                                    style="color:blue;background-color: beige;font-weight: 400;">{{ __('message.your original image isnt uploaded our system needs to resize your image upload') }}
                                </span>
                            </div>
                            @if (isset($row->image_resize))
                                <div class="col-lg-2 col-md-2 col-sm-12" style="padding: 25px;">
                                    <input type="hidden" id="new_image" name="image_resize" value="" />
                                    <img id="new_image-preview"
                                        src="{{ isset($row->image_resize) ? asset('storage/' . $row->image_resize) : '' }}" />
                                </div>
                            @else
                                <div class="col-lg-2 col-md-2 col-sm-12 resize-img" id="x80-remove"><span
                                        id="span80-remove">300 x 300 pixel</span>
                                    <input type="hidden" id="new_image" name="image_resize" value="" />
                                    <img id="new_image-preview" src="" />
                                </div>
                            @endif

                            <div class="col-lg-2 col-md-2 col-sm-12 resize-img thumbnail-img" id="x36-remove"
                                style="display:none;"><span id="span36-remove">36 x 36</span>
                                <input type="hidden" id="thumbnail" name="thumbnail" value="" />
                                <img id="thumbnail-preview" src="" />
                            </div>

                            <div class="col-lg-12 col-md-12 col-sm-12" style="padding-top: 15px;">
                                <label style="margin-bottom: 0px;">{{ __('message.description') }}</label>
                                <textarea class="text-area" rows="6" id="description" name="description" placeholder=""
                                    style="margin-top: 10px;"></textarea>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 input-next">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="is_active"
                                        value="{{ isset($row['is_active']) ? $row['is_active'] : '1' }}"
                                        id="flexCheckApprove">
                                    <label class="form-check-label" for="flexCheckApprove">
                                        {{ __('message.approve') }}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="btn-save-change">

                    <button type="submit" class="btn app-btn-primary float-right"><svg
                            xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-shield-check" viewBox="0 0 16 16">
                            <path
                                d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z" />
                            <path
                                d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
                        </svg> {{ __('message.save change') }}</button>

                    <button type="button" onclick="redirect_back();"
                        class="btn btn-warning float-right cancel-margin"><svg xmlns="http://www.w3.org/2000/svg"
                            width="16" height="16" fill="currentColor" class="bi bi-arrow-left"
                            viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
                        </svg> {{ __('message.go back') }}</button>

                </div>
            </form>
        </div>
    </div>
    <style>
        .resize-img {
            height: 300px;
            width: 300px;
            margin: 20px;
            border: 3px dashed #c2cac6;
            text-align: center;
            font-size: 12px;
            padding-top: 125px;
        }

        .thumbnail-img {
            font-size: 7px !important;
            height: 36px !important;
            width: 36px !important;
            padding-top: 0px !important;
        }
    </style>

    <script type="text/javascript">
        function numberOnly(evt) {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode != 46 && charCode > 31 &&
                (charCode < 48 || charCode > 57))
                return false;

            return true;
        }
        $('#form-product :checkbox').change(function() {
            // this will contain a reference to the checkbox   
            if (this.checked) {
                $('#flexCheckApprove').val(1);
                $('#flexCheckApprove').attr('checked', true);
            } else {
                $('#flexCheckApprove').val(0);
                $('#flexCheckApprove').attr('checked', false);
            }
        });
        // redirect back to listing page
        function redirect_back() {
            location.href = '{{ url('/admin/product') }}';
        }
        // check user is approve or padding
        var is_approve = $('#flexCheckApprove').val();
        if (is_approve == 1) {
            $('#flexCheckApprove').attr('checked', true);
        } else {
            $('#flexCheckApprove').attr('checked', false);
        }

        function readURL(input) {
            if (input.files && input.files[0]) {

                var fileReader = new FileReader();

                fileReader.onload = function(e) {
                    $('.image-upload-wrap').hide();

                    $('.file-upload-image').attr('src', e.target.result);
                    $('.file-upload-content').show();

                    $('.image-title').html(input.files[0].name);

                    var image = document.getElementById("file-upload-image");
                    image.onload = function() {
                        $('#x36-remove').removeClass("resize-img").css('padding', '25px');
                        $('#x36-remove').removeClass("thumbnail-img");
                        $('#x80-remove').removeClass("resize-img").css('padding', '25px');

                        $('#span80-remove').html("");
                        $('#span36-remove').html("");

                        // New image resize
                        var canvas = document.createElement("canvas");
                        var context = canvas.getContext("2d");
                        canvas.width = 300;
                        canvas.height = 300;

                        context.drawImage(image,
                            0,
                            0,
                            canvas.width,
                            canvas.height
                        );
                        document.getElementById("new_image-preview").src = canvas.toDataURL();
                        document.getElementById("new_image").value = canvas.toDataURL();
                        // End of new image resize

                        // Thumbnail resize
                        var canvas = document.createElement("canvas");
                        var context = canvas.getContext("2d");
                        canvas.width = 36;
                        canvas.height = 36;
                        context.drawImage(image,
                            0,
                            0,
                            canvas.width,
                            canvas.height
                        );
                        document.getElementById("thumbnail-preview").src = canvas.toDataURL();
                        document.getElementById("thumbnail").value = canvas.toDataURL();
                        // End of thumbnail resize
                    }
                    image.src = e.target.result;
                };
                fileReader.readAsDataURL(input.files[0]);

            } else {
                removeUpload();
            }
        }

        function removeUpload() {
            $('.file-upload-input').replaceWith($('.file-upload-input').clone());
            $('.file-upload-content').hide();
            $('.image-upload-wrap').show();

            document.getElementById("new_image-preview").src = "";
            document.getElementById("new_image").value = "";
            $('#x80-remove').addClass("resize-img").css('padding-top', '125px');
            $('#span80-remove').html("300 x 300 pixel");

            document.getElementById("thumbnail-preview").src = "";
            document.getElementById("thumbnail").value = "";
        }

        $(document).ready(function() {
            var description = `{{ isset($row->description) ? $row->description : '' }}`;
            $('#description').html(description);
        });
    </script>
@endsection