@extends('layouts.master')

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

@section('content')

<div class="card">
    <div class="card-body">
        <!-- Nav tabs -->
        <form action="{{  url('category/'.$categories->id.'/update') }}" 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" name="name" data-parsley-required data-parsley-required-message="The name field is required" value="{{ $categories->name }}" class="form-control" autocomplete="off" placeholder="Enter Category Name">
                </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" name="image" id="fileInput" class="form-control {{ $errors->has('image') ? 'is-invalid' : '' }}" onchange="previewFile(this);">
                    <span id="error"></span>
                    <!-- <input type="file" data-parsley-required name="image" class="form-control"> -->
                    <img id="previewImg" src="{{ env('UPLOAD_URL') .'/'.$categories->image }}" value="{{ $categories->image }}" style="width:150px; height:150px; object-fit: cover;">
                    <!-- <label>{{ $categories->image }}</label> -->
                    <!-- <img src="{{ env('UPLOAD_URL') .'/'.$categories->image }}" style="width:150px; height:150px;"> -->
                    @error('image')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>

            <div class="mt-2 text-right">
                <button class="btn btn-warning">Save</button>
            </div>
        </form>
    </div>
</div>

@endsection

@section('script')
<script>
    function previewFile(input) {
        var file = $("input[type=file]").get(0).files[0];

        if (file) {
            var reader = new FileReader();

            reader.onload = function() {
                $("#previewImg").attr("src", reader.result);
            }

            reader.readAsDataURL(file);
        }
    }

    

    // 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 ($("#previewImg").is(":hidden")) {
                $("#previewImg").show().css("display", "block");
            }
            break;
            default:
            $(this).val('');
            $("#previewImg").hide();
            error.innerHTML = "<span style='color: red;'>"+
                "Please select a valid file JPEG/JPG/PNG/GIF/BMP/TIFF to upload!</span>"
            break;
        }
    });
</script>
@endsection