@extends('layouts.main')

@section('container')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ $card_title }}</h3>
            </div>
            <!-- /.card-header -->
            <form method="POST" id="form1" enctype="multipart/form-data">
                @csrf
                <div class="card-body">
                   <div class="row">
                        <div class="col-md-6">
                            {{-- supaya ketika validasi error image gak hilang --}}

                            @if (Session::has('temp_filename'))
                                <div class="form-group">
                                    <img src="{{ asset('storage/uploads/temps/' . session('temp_filename')) }}" class="img-thumbnail" id="img_thumbnail" >
                                </div>
                            @else
                                @if (isset($res) && $res->filename!="")
                                    <div class="form-group">
                                        <img src="{{ asset('storage/uploads/categories/' . $res->filename) }}" class="img-thumbnail" id="img_thumbnail">
                                    </div>
                                @else
                                    <div class="form-group">
                                        <img src="{{ asset('assets/images/image_not_available.png') }}" class="img-thumbnail" id="img_thumbnail">
                                    </div>
                                @endif
                            @endif


                            {{-- //sudah di edit url assetnya --}}



                            {{-- nama file dari ajax upload --}}
                            <input type="hidden" name="id" value="{{ old('id',(isset($res))?$res->id:"") }}">
                            <input type="hidden" name="filename" id="filename" value="{{ old('filename', isset($res) ? $res->filename : '') }}">
                            <div class="form-group">
                                <label for="filename" class="form-label">Upload Image</label>
                                <input onchange="ajaxUpload()" class="form-control" type="file" id="userfile">
                                @error('filename')
                                    <small class="form-text text-danger">{{ $message }}</small>
                                @enderror
                            </div>



                            <div class="form-group">
                                <label class="col-form-label">Name</label>
                                <input type="text" class="form-control @error('name') is-invalid  @enderror" name="name"
                                    value="{{ old('name', isset($res) ? $res->name : '') }}">
                                @error('name')
                                    <small class="form-text text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label class="col-form-label">Status</label>
                                <select name="is_active" class="form-control  @error('is_active') is-invalid  @enderror">
                                    <option value="1" @if (old('is_active', isset($res) ? $res->is_active : '') == '1') selected="selected" @endif>Active</option>
                                    <option value="0" @if (old('is_active', isset($res) ? $res->is_active : '') == '0') selected="selected" @endif>Not Active</option>
                                </select>
                                @error('is_active')
                                    <small class="form-text text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                        </div>
                   </div>

                </div>

                <!-- /.card-body -->
                <div class="card-footer">
                    <button type="submit" class="btn btn-primary float-right btn-submit">Submit</button>
                    <a href="{{ route('admin.category.index') }}" class="btn btn-default">Cancel</a>
                </div>

            </form>
        </div>
        <!-- /.card -->

    </div>
</div>



@endsection



@section('javascript')

<script>
$(function () {
    // kosongkan image
    $('#userfile').val("");

    $("#form1"). submit(function (event) {
            event.preventDefault();
            ajaxSubmit();
        });
})

function ajaxUpload(){
    var file_data = $("#userfile").prop("files")[0];
    var form_data = new FormData();
    form_data.append("userfile", file_data);
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        url: "{{ route('admin.ajax.upload.temp') }}",
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,
        type: 'post',
        beforeSend: function() {
            $.LoadingOverlay("show");
        },
        complete: function() {
            $.LoadingOverlay("hide");
        },
        success: function(json) {
            console.log(json);
            if(json.status=="success"){
                // masukan filename ke inputbox untuk di push ke database
                $('#filename').val(json.result);
                // view image
                $('#img_thumbnail').attr("src","{{ asset('storage/uploads/temps') }}/"+json.result);
            }else{
                swal({
                    type: 'error',
                    title:'Error',
                    html: json.error_message,
                });
            }

        },
        error: function() {
            swal({
                type: 'error',
                html: 'Error data occured.',
            });
        }
	});
}


function clearErrorValidation(){
        var form1= $('#form1').serializeArray();
        var fields=[];
        for (let i = 0; i < form1.length; i++) {
            const el = form1[i];
            fields=[...fields,el.name];
        }
        for (let j = 0; j < fields.length; j++) {
            $("#" + fields[j] + "_error").text("");
            $("#" + fields[j]).removeClass("is-invalid");
        }
    }

    function ajaxSubmit(){
        clearErrorValidation();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: "{{ route('admin.category.ajax.save') }}",
            type: 'POST',
            data: $('#form1').serialize(),
            beforeSend: function() {
                $.LoadingOverlay("show");
            },
            complete: function() {
                $.LoadingOverlay("hide");
            },
            success: function(json){
                $.LoadingOverlay("hide");
                console.log(json);
                if(json.status=="success"){
                    swal({
                        type: 'success',
                        html: json.result,
                        allowOutsideClick: false,
                    }).then((result)=>{
                        window.location.href="{{ route('admin.category.index') }}";
                    }).catch(swal.noop);

                }else if(json.status=="error_val"){
                    $.each(json.error_message, function (key, val) {
                        $("#" + key + "_error").text(val[0]);
                        $("#" + key).addClass("is-invalid");
                    });
                    toastr["error"]('Validation Error!')
                }else{
                    toastr["error"](json.error_message)
                }

            },
            error: function(error){
                $.LoadingOverlay("hide");
                console.log(error.responseJSON.message);
                swal({
                    type: 'error',
                    html: error.responseJSON.message,
                })
            }
        })
    }


</script>

@endsection