@extends('layouts.app')
@section('content')
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>Category infomation</h3>
    <ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
        <li>
            <a href="javascript:void(0)"><div class="text-tiny">Dashboard</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <a href="#"><div class="text-tiny">Category</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <div class="text-tiny">Category infomation</div>
        </li>
    </ul>
</div>
<!-- new-category -->
<div class="wg-box">
    <form class="form-new-product form-style-1" method="post" action="" enctype="multipart/form-data">
        @csrf
        @honeypot
        <fieldset>
            <div class="body-title">Category name <span class="tf-color-1">*</span></div>
            <input class="flex-grow  @error('category_name') is-invalid @enderror" type="text" placeholder="Category name" name="category_name" value="{{$category->name}}">
            @error('category_name')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </fieldset>

        <fieldset>
            <div class="body-title">Upload images <span class="tf-color-1">*</span></div>
            <div class="upload-image flex-grow">
                <div class="item up-load">
                    <label class="uploadfile h250" for="myFile">
                        <span class="icon">
                            <i class="icon-upload-cloud"></i>
                        </span>
                        <span class="body-text">Drop your images here or select <span class="tf-color">click to browse</span></span>
                        <img id="myFile-input" name="image" src="" alt="">
                        <input type="file" id="myFile" name="category_image">
                    </label>
                </div>
            </div>
            @error('category_image')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </fieldset>
        {{-- <fieldset class="category">
            <div class="body-title">Select category icon</div>
            <div class="select flex-grow">
                <select class="" name="icon">
                    <option value="">Select icon</option>
                    <option value="Icon 1" {{ $category->icon == "Icon 1" ? 'selected' : '' }}>Icon 1</option>
                    <option value="Icon 2" {{ $category->icon == "Icon 2" ? 'selected' : '' }}>Icon 2</option>
                </select>
            </div>
        </fieldset> --}}
        <div class="bot">
            <div></div>
            <button class="tf-button w208" type="submit">Save Changes</button>
        </div>
    </form>
</div>
<!-- /new-category -->

@endsection
@section('page_script')
@parent
<script>
    $(".category-menu").addClass("active");
</script>
@endsection
<!-- App js -->