@extends('admin.layouts.app')

@section('content')
    <div class="container-fluid content-inner mt-n5 py-0" style="margin-top: 100px !important;">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <div class="flex-wrap d-flex justify-content-between align-items-center">
                            <div>
                                <div class="header-title">
                                    <h2 class="card-title">Product Single</h2>
                                    <p>Edit Product Single Data</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="POST" class="needs-validation" id="form-data" name="form-data" novalidate>
                            {{ csrf_field() }}

                            <div class="form-group">
                                <label class="form-label" for="category">Category</label>
                                <select class="form-select" id="product_category_id" name="product_category_id" required>
                                    <option value="" hidden>Select Category</option>
                                    @foreach ($product_category as $row)
                                        <option value="{{$row['id']}}">{{$row['name']}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="name">Name</label>
                                <input class="form-control" type="text" id="name" name="name" placeholder="Enter Name" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="description">Description</label>
                                <textarea class="form-control" id="content" name="content" rows="3" placeholder="Enter Description / Spesification"></textarea>
                                <textarea class="form-control" id="description" name="description" rows="3" placeholder="Enter Description" style="display: none"></textarea>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="unit">Satuan</label>
                                <input class="form-control" type="text" id="unit" name="unit" value="" placeholder="Enter Satuan, module / unit" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="time_period">Time Period</label>
                                <input class="form-control" type="text" id="time_period" name="time_period" value="" placeholder="Enter Time Period, Contract / Shipping" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="price">Price</label>
                                <input class="form-control" type="number" id="price" name="price" placeholder="Enter Price" required>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="image">Image</label>
                                <input class="form-control" type="file" id="file" name="file" required>
                                <input class="form-control" type="hidden" id="image" name="image" value="noimage.jpg" placeholder="image">
                                <br>
                                <img src="{{ asset('/uploads/noimage.jpg') }}" id="image-preview" name="image-preview" width="300px" style="border-radius: 2%;">
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="goal">Goal</label>
                                <input class="form-control" type="text" id="goal" name="goal" value="" placeholder="Tujuan" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="main_feature">Main Feature</label>
                                <input class="form-control" type="text" id="main_feature" name="main_feature" value="" placeholder="Fitur Andalan" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="legal_basis">Legal Basis</label>
                                <input class="form-control" type="text" id="legal_basis" name="legal_basis" value="" placeholder="Dasar Hukum" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="spesification">Spesification</label>
                                <textarea class="form-control" id="content2" name="content" rows="3" placeholder="Enter Spesification"></textarea>
                                <textarea class="form-control" id="spesification" name="spesification" rows="3" placeholder="Enter Spesifikasi" style="display: none"></textarea>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="source">Source</label>
                                <input class="form-control" type="text" id="source" name="source" value="" placeholder="Sumber" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="notes">Notes</label>
                                <textarea class="form-control" id="notes" name="notes" rows="3" placeholder="Enter Notes"></textarea>
                            </div>

                            <div class="form-group">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="is_active" name="is_active">
                                    <label class="form-check-label" for="is_active">Active Status</label>
                                </div>
                            </div>

                            <br><br>
                            <button type="submit" class="btn btn-success">Submit</button>
                            <a href="{{ URL::previous() }}" class="btn btn-danger">Cancel</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>


        // handle upload image
        var base_url = "{{url('/')}}";
        $('#file').change(function(){
            // preview
            // $('#image-preview').attr('display', 'block');
            // var oFReader = new FileReader();
            // oFReader.readAsDataURL( $("#file")[0].files[0]);
            // oFReader.onload = function(oFREvent) {
            //     $('#image-preview').attr('src', oFREvent.target.result);
            // };

            // upload
            formdata = new FormData();
            if($(this).prop('files').length > 0) {
                file =$(this).prop('files')[0];
                formdata.append("image", file);
            }
            $.ajaxSetup({
                headers:{
                    'Authorization': "Bearer {{$session_token}}"
                }
            });
            $.ajax({
                url: '/api/upload',
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success: function (result) {
                    if(result['success'] == true) {
                        $('#image').val(result['data']['url']);
                        $('#image-preview').attr('src', base_url + '/uploads/300/' + result['data']['url']);
                    }
                }
            });
        });

        $.ajaxSetup({
            headers:{
                'Authorization': "Bearer {{$session_token}}"
            }
        });

        $.ajax({
            url: '/api/product_single/{{$id}}',
            type: "GET",
            dataType: "json",
            processData: false,
            success: function (result) {
                if(result['success'] == true) {
                    $('#name').val(result['data']['name']);
                    $('#product_category_id').val(result['data']['product_category_id']);
                    $('#content').val(result['data']['description']);
                    $('#description').val(result['data']['description']);
                    $('#price').val(result['data']['price']);
                    $('#unit').val(result['data']['unit']);
                    $('#time_period').val(result['data']['time_period']);
                    $('#goal').val(result['data']['goal']);
                    $('#main_feature').val(result['data']['main_feature']);
                    $('#legal_basis').val(result['data']['legal_basis']);
                    $('#content2').val(result['data']['spesification']);
                    $('#spesification').val(result['data']['spesification']);
                    $("#image").val(result['data']['image']);
                    $("#image-preview").attr("src", "{{ url('/') }}/" + "uploads/300/" + result['data']['image']);
                    $('#notes').val(result['data']['notes']);
                    $('#is_active').prop("checked", result['data']['is_active']);

                    // handle wysiwyg
                    tinymce.init({
                        selector: 'textarea#content',
                        plugins: 'code table lists',
                        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image responsivefilemanager | print preview media | forecolor backcolor emoticons | codesample",
                        promotion: false,
                        setup:function(ed) {
                            ed.on('change', function(e) {
                                $('#description').val(ed.getContent());
                            });
                        }
                    });


                    // handle wysiwyg
                    tinymce.init({
                        selector: 'textarea#content2',
                        plugins: 'code table lists',
                        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image responsivefilemanager | print preview media | forecolor backcolor emoticons | codesample",
                        promotion: false,
                        setup:function(ed) {
                            ed.on('change', function(e) {
                                $('#spesification').val(ed.getContent());
                            });
                        }
                    });

                } else {
                    Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: result['message'],
                        confirmButtonColor: '#3A57E8',
                    });
                }
            },
            error: function () {
                Swal.fire({
                    icon: "error",
                    title: "Failed",
                    text: "Failed to fetch product_single data.",
                    confirmButtonColor: '#3A57E8',
                });
            }
        });

        $('#form-data').submit(false);
        $("#form-data").submit( function () {
            if ($(this).valid()) {
                var form = $("#form-data").serializeArray();
                var formdata = {};
                $.map(form, function (n, i) {
                    formdata[n['name']] = n['value'];
                });

                formdata['is_active'] = $('#is_active').is(':checked') ? 1 : 0;

                $.ajaxSetup({
                    headers:{
                        'Authorization': "Bearer {{$session_token}}"
                    }
                });

                $.ajax({
                    url: '/api/product_single/{{$id}}',
                    type: "PUT",
                    data: JSON.stringify(formdata),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    processData: false,
                    success: function (result) {
                        if (result['success'] == true) {
                            Swal.fire({
                                icon: "success",
                                title: "Success",
                                text: result['message'],
                                confirmButtonColor: '#3A57E8',
                            }).then((result) => {
                                window.location.replace("{{ url('/admin/product_single') }}");
                            });
                        } else {
                            Swal.fire({
                                icon: "error",
                                title: "Oops...",
                                text: result['message'],
                                confirmButtonColor: '#3A57E8',
                            });
                        }
                    }
                });
            } else {
                Swal.fire({
                    icon: "error",
                    title: "Oops...",
                    text: "You must complete the entire form.",
                    confirmButtonColor: '#3A57E8',
                });
            }
            return false;
        });

    </script>
@endsection