@extends('layouts.master')

@section('pagetitle')
Add Category
@endsection
@section('title')
Add Category
@endsection

@section('content')


<div class="card">
    <div class="card-body">
        <!-- Nav tabs -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <form id="uploadForm" method="POST" enctype="multipart/form-data" data-parsley-validate>
            @csrf

            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-color-input">Name*</label>
                <div class="col-10">
                    <input type="text" data-parsley-required data-parsley-required-message="The name field is required" name="name" class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}" value="{{ old('name') }}" autocomplete="off" placeholder="Enter Category Name">
                    @error('name')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div>

            <div class="form-group row">
                <label class="col-2 col-form-label" for="input-file-max-fs"> Image*</label>
                <div class="col-10">
                    <div class="form-group uploader">
                        <input type="file" id="fileInput" name="image" class="form-control" accept="image/*" data-parsley-required-message="The category image is required" data-parsley-required onchange="preview_image(event)" /><br />
                        <span id="error"></span>
                        <img id="output_image" style="width: 30%; object-fit: cover;">
                    </div>
                </div>
            </div>

            <!-- <div class="form-group row">
                <label class="col-2 col-form-label" for="input-file-max-fs"> Image*</label>
                <div class="col-10">
                    <div class="form-group uploader">
                        <input name="image" type="file" class="form-control" data-parsley-required-message="The category image is required" data-parsley-required id="fileInput" /><br />
                        <div name="image-holder" id="image-holder"><img src="path-to-placeholder-img" class="placeholder" /> </div>
                    </div>
                </div>
            </div>

            <div class="progress">
                <div class="progress-bar"></div>
            </div>

            <div id="uploadStatus"></div> -->

            <!-- <div class="form-group row">
                <label class="col-2 col-form-label" for="input-file-max-fs"> Image*</label>
                <div class="col-5">
                    <input type="file" name="image" accept="image/png, image/bmp, image/tiff, image/jpg, image/gif, image/jpeg" data-parsley-required id="input-file-max-fs" class="dropify {{ $errors->has('image') ? 'is-invalid' : '' }}" />
                    @error('image')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div> -->

            <!-- <div class="form-group row">
            <label class="col-2 col-form-label" for="example-color-input"> Image*</label> 
            <div class="col-10">
                
                <input type="file" id="imgInp" data-parsley-required name="image" accept="image/png, image/bmp, image/tiff, image/jpg, image/gif, image/jpeg"  value="{{ old('image') }}" class="form-control {{ $errors->has('image') ? 'is-invalid' : '' }}" >
             
                <img id="blah" src="#" style="width: 120px; height: 100px; object-fit: cover;" alt="Upload Image" /> 
              
                @error('image')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
                </div> 
            </div>     -->

            <div class="mt-2 text-right">
                <input type="submit" class="btn btn-warning" name="submit" value="Save" />
                <!-- <button class="btn btn-warning">Save</button> -->
            </div>

        </form>

    </div>
</div>

@endsection
@section('script')
<script>
    function preview_image(event) {
        var reader = new FileReader();
        reader.onload = function() {
            var output = document.getElementById('output_image');
            output.src = reader.result;
        }
        reader.readAsDataURL(event.target.files[0]);
    }

    $(document).ready(function() {
        // File upload via Ajax
        $("#uploadForm").on('submit', function(e) {
            e.preventDefault();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            let formData = $('form').serializeArray();

            $.ajax({
                xhr: function() {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function(evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = ((evt.loaded / evt.total) * 100);
                            $(".progress-bar").width(percentComplete + '%');
                            $(".progress-bar").html(percentComplete + '%');
                        }
                    }, false);
                    return xhr;
                },
                url: "{{ url('category/store') }}",
                type: 'post',
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                beforeSend: function() {
                    $(".progress-bar").width('0%');
                    $('#uploadStatus').html();
                    // $('#uploadStatus').html('<img src="{{ url('/') }}/images/loader.gif"/>');
                },
                error: function(response) {
                    console.log(response);
                    $('#uploadStatus').html('<p style="color:#EA4335;">File upload failed, please try again.</p>');
                },
                success: function(resp) {
                    console.log(resp);
                    if (resp.success) {
                        $('#uploadForm')[0].reset();
                        $('#uploadStatus').html('<p style="color:#28A74B;">File has uploaded successfully!</p>');
                        sweetAlert("Category is added successfully.", "", "success");
                        setTimeout(function() {
                            window.location.href = "{{ url('category/index') }}";
                        }, 2000);

                    } else if (resp.error) {
                        $('#uploadStatus').html('<p style="color:#EA4335;">Please select a valid file to upload.</p>');
                    }
                }
            });
        });

    });

    // File type validation
    $("#fileInput").change(function() {
        var error = document.getElementById("error")
        var val = $(this).val();
        switch (val.substring(val.lastIndexOf('.') + 1).toLowerCase()) {
            case 'gif': case 'jpg': case 'png': case 'jpeg': case 'tiff': case 'bmp':
            if ($("#output_image").is(":hidden")) {
                $("#output_image").show().css("display", "block");
            }
            break;
            default:
                $(this).val('');
                $("#output_image").hide();
                if (isNaN(document.getElementById("error").val)) {
                    // Changing HTML to draw attention
                    error.innerHTML = "<span style='color: red;'>" +
                        "Allowed file format: JPEG, GIF, BMP, TIFF and PNG.</span>"
                } else {
            
                    // document.getElementById('error').innerHTML=null;
                }
                break;
        }

 

        // var error = document.getElementById("error")
        // var val = $(this).val();

        // switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
        //     case 'gif': case 'jpg': case 'png': case 'jpeg': case 'tiff': case 'bmp':

        //     if ($("#output_image").is(":hidden")) {
        //         $("#output_image").show().css("display", "block");
        //     }

        //     break;
        //     default:
        //     $(this).val('');
        //     $("#output_image").hide();

        //     error.innerHTML = "<span style='color: red;'>"+
        //         "Allowed file format: JPEG, GIF, BMP, TIFF and PNG.</span>"
        //     break;
        // }
    });
    
</script>
@endsection