@inject('menu', 'App\Models\Other\Other')
@extends('admin.layouts.main')
@section('container')
    <div class="row">
        <!-- left column -->
        <div class="col-md-12">
            <!-- jquery validation -->
            @if (session()->has('error'))
                <div class="alert alert-danger text-center">
                    {{ session()->get('error') }}
                </div>
            @endif
            @if (session()->has('success'))
                <div class="alert alert-success text-center">
                    {{ session()->get('success') }}
                </div>
            @endif
            <div class="card card-warning">
                <div class="card-header">
                    <h3 class="card-title">แก้ไขข้อมูลสินค้า</h3>
                </div>
                <!-- /.card-header -->
                <!-- form start -->
                <form action="{{ route('products.update', '' . $data->id . '') }}" method="post"
                    enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="card-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1">ชื่อสินค้า <small class="text-danger">*</small></label>
                            <input type="text" name="products_name" class="form-control" id="products_name"
                                placeholder="ชื่อสินค้า" value="{{ $data->products_name }}">
                            <small class="text-danger">{{ $errors->first('products_name') }}</small>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">ราคา <small class="text-danger">*</small></label>
                            <input type="number" name="products_price" class="form-control" id="products_price"
                                placeholder="ราคา" value="{{ $data->products_price }}" step="any">
                            <small class="text-danger">{{ $errors->first('products_price') }}</small>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">หมวดหมู่ <small class="text-danger">*</small></label>
                            @php
                                $datamenu = $menu->productmenu();
                            @endphp
                            <select name="products_categorys" id="products_categorys" class="form-control">
                                @foreach ($datamenu as $rows)
                                    <option value="{{ $rows->id }}"
                                        {{ $rows->id == $data->products_categorys ? 'seleted' : '' }}>
                                        {{ $rows->categorys_names }}</option>
                                @endforeach
                            </select>
                            <small class="text-danger">{{ $errors->first('products_categorys') }}</small>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">คุณลักษณะ <small class="text-danger">*</small></label>
                            <textarea name="products_attribute" class="form-control" id="products_attribute" cols="30"
                                rows="10">{{ $data->products_attribute }}</textarea>
                            <small class="text-danger">{{ $errors->first('products_attribute') }}</small>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">คุณสมบัติ <small class="text-danger">*</small></label>
                            <textarea name="products_detail" class="form-control" id="products_detail" cols="30"
                                rows="10">{{ $data->products_detail }}</textarea>
                            <small class="text-danger">{{ $errors->first('products_detail') }}</small>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">การใช้งาน <small class="text-danger">*</small></label>
                            <textarea name="products_usability" class="form-control" id="products_usability" cols="30"
                                rows="10">{{ $data->products_usability }}</textarea>
                            <small class="text-danger">{{ $errors->first('products_usability') }}</small>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">ข้อควรระวัง <small class="text-danger">*</small></label>
                            <textarea name="products_warning" class="form-control" id="products_warning" cols="30"
                                rows="10">{{ $data->products_warning }}</textarea>
                            <small class="text-danger">{{ $errors->first('products_warning') }}</small>
                        </div>
                        <hr />
                        <div class="form-group">
                            <label for="exampleInputEmail1">อัพโหลดภาพโชว์สินค้า</label>
                            <input class="form-control" type="file" id="files" name="files" onchange="previewFile()">
                            <small class="text-danger">{{ $errors->first('files') }}</small>
                            <br />
                            <label for="exampleInputEmail1">รูปภาพโชว์สินค้าเดิม </label><br />
                            <a href="{{ asset('' . $data->products_img . '') }}" target="_blank"><img
                                    src="{{ asset('' . $data->products_img . '') }}" alt="{{ $data->products_name }}"
                                    class="img-fluid" style="width: 200px; height: 200px;"></a>
                            <br />
                            <span id="imgshow"></span>
                        </div>
                        <hr />
                        <div class="form-group">
                            <label for="exampleInputEmail1">อัพโหลดสินค้า <span
                                    class="text-danger">(**สามารถอัพได้หลายไฟล์ กด Shift
                                    ค้างไว้ตอนเลือกรูปภาพ**)</span></label>
                            <input class="form-control" type="file" id="files_multi" name="files_multi[]"
                                onchange="previewFilesmulti()" multiple>
                            <small class="text-danger">{{ $errors->first('files_multi') }}</small>
                            <br />
                            <span id="imgshowmulti"></span>
                            <br />
                            <label for="exampleInputEmail1">รูปภาพสินค้าทั้งหมดเดิม </label><br />
                            @foreach (json_decode($data->products_img_multi, true) as $value)
                                <a href="{{ asset('' . $value['path'] . '') }}" target="_blank"><img
                                        src="{{ asset('' . $value['path'] . '') }}" class="img-fluid"
                                        style="width: 200px; height: 200px;"></a>
                            @endforeach
                        </div>
                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer text-center">
                        <a href="{{ asset('admin/products') }}"><button type="button"
                                class="btn btn-danger">ยกเลิก</button></a>
                        <button type="submit" class="btn btn-warning">แก้ไขข้อมูล</button>
                    </div>
                </form>
            </div>
            <!-- /.card -->
        </div>
        <!--/.col (left) -->

    </div>
@endsection
@section('scriptadd')
    <script>
        function previewFile() {
            $("#imgshow").empty();
            const preview = document.querySelector('#imgshow');
            const file = document.querySelector('input[id=files]').files[0];
            const reader = new FileReader();

            reader.addEventListener("load", function() {
                var image = new Image();
                image.height = 300;
                image.title = file.name;
                image.src = this.result;
                preview.appendChild(image);
            }, false);

            if (file) {
                reader.readAsDataURL(file);
            }
        }

        function previewFilesmulti() {
            $("#imgshowmulti").empty();
            var preview = document.querySelector('#imgshowmulti');
            var files = document.querySelector('input[id=files_multi]').files;

            function readAndPreview(file) {
                // Make sure `file.name` matches our extensions criteria
                if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
                    var reader = new FileReader();
                    reader.addEventListener("load", function() {
                        var image = new Image();
                        image.height = 300;
                        image.title = file.name;
                        image.src = this.result;
                        preview.appendChild(image);
                    }, false);

                    reader.readAsDataURL(file);
                }

            }

            if (files) {
                [].forEach.call(files, readAndPreview);
            }

        }
    </script>
@endsection
