@extends('admin.layout.master')
@section('content')
<div class="container">
    <div class="row   justify-content-between p-3 rounded m-2  bg-light">
        <div class="col-6 col-md-6 align-self-center">
            <a class='text-decoration-none fw-bold  text-dark breadc' href="">
                {{__('nadel.home')}} / {{__('nadel.item_name')}}
            </a>
        </div>
    </div>

    <div class="card p-3 m-2 mt-3">
        <div class="row  ">
            <div class="col-sm-5">
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">Enter Category Name (English)</label>
                    <input type="text" class="form-control  rounded-pill bg-light_c" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder='Name'>
                </div>
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">Enter Category Name (English)</label>
                    <input type="text" class="form-control  rounded-pill bg-light_c" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder='Name'>
                </div>
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">Enter Price</label>
                    <input type="text" class="form-control  rounded-pill bg-light_c" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder='price'>
                </div>
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">Select Time</label>
                    <input type="text" class="form-control  rounded-pill bg-light_c" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder='00:00'>
                </div>
                <div class="mb-3">
                    <label for="exampleInputPassword1" class="form-label">Select Category</label>
                    <select id=" Select" class="form-select rounded-pill bg-light_c cat">
                        <option>Category</option>
                        <option>Category</option>
                        <option>Category</option>
                    </select>
                </div> <br>
                <!-- switch start  -->
                <div class="d-flex  mob_just">
                    <label for="default" class="ms-2 mb-1">Default Status</label>
                    <label class="switch ms-5">
                        <input type="checkbox" name="default" id="default" value="1">
                        <div class="slider round">
                            <!--ADDED HTML -->
                            <span class="on">on</span>
                            <span class="off">off</span>
                        </div>
                    </label>
                </div><!-- switch end  --><br><br>
            </div>
            <div class="col-12 col-md-4">
                <div class="mb-3">
                    <label for="exampleFormControlTextarea1" class="form-label">Description (English)</label>
                    <textarea class="form-control bg-light_c rounded cat" id="exampleFormControlTextarea1" rows="4">Type here</textarea>
                </div>
                <div class="mb-3">
                    <label for="exampleFormControlTextarea1" class="form-label">Description (Arabic)</label>
                    <textarea class="form-control bg-light_c rounded cat" id="exampleFormControlTextarea1" rows="4">Type here</textarea>
                </div>
            </div>
            <div class="col-12 col-md-2">
                <div class="container">
                    <label class="upload-btn-wrapper bg-light_c" for="file"> <span class="text_img">Photo</span>
                        <img src="" class="img-fluid" alt="" id="preview">
                    </label>
                    <input type="file" name="Upload_logo" id="file" class="d-none" onchange="itemname(event)" />
                </div>
            </div>
        </div>
        <!-- row ended here  -->
        <div class="container bg-light rounded ">
            <div class="col-md-6 offset-md-5">
                <div class="upload-btn-wrapper bg-light " style="background-color: transparent; height:57px; width:200px;">
                    <button class="border-0 mt-4" style=' background-color: transparent; color:rgba(84, 58, 178, 1);'>
                        DROP OR CLICK TO UPLOAD
                    </button>
                    <input type="file" id="file-input" accept="image/png, image/jpeg" onchange="preview()" multiple>
                </div>
            </div>
        </div>
        <div class="container my-4">
            <p id="num-of-files">No Files Chosen</p>

            <div class="row my-2" id="images">
            </div>
            <button type="submit" class="btn btn-warning col-bt rounded-pill mt-4 text-white">Update</button>
        </div>

        </form>
    </div>
</div>
<style>
    .form-control,
    .cat {
        font-size: 14px;
        color: #383838;
    }

</style>
<script>
    function itemname(event) {
        var preview = document.getElementById("preview");
        preview.src = URL.createObjectURL(event.target.files[0]);
    }
</script>
<script>
    function multi(event) {
        var preview = document.getElementById("pre");
        preview.src = URL.createObjectURL(event.target.files[0]);
    }
</script>
<script>
    let fileInput = document.getElementById("file-input");
    let imageContainer = document.getElementById("images");
    let numOfFiles = document.getElementById("num-of-files");

    function preview() {
        imageContainer.innerHTML = "";
        numOfFiles.textContent = `${fileInput.files.length} Files Selected`;

        for (i of fileInput.files) {
            let reader = new FileReader();
            reader.onload = () => {
                imageContainer.innerHTML += "\
                    <div class='col-2 shadow-sm p-0 mx-2 my-2 overflow-hidden' style='height:200px;''>\
                        <span onclick='removeFile("+i+")' class='position-absolute' style='margin:-15px 0px 0px -10px;'><i class='bi bi-x-circle-fill text-danger fs-5 position-absolute'></i></span>\
                        <img class='img-fluid rounded shadow-sm' src='"+reader.result+"'> <small>"+i.name+"</small>\
                    </div>\
                ";
            }

            reader.readAsDataURL(i);
        }
    }

    function removeFile(index) {
        console.log("Test = "+index)
    }
</script>
@endsection
