@extends('template.layout')
@section('style')
@endsection

@section('content')
    <div class="container">


        <div class="row">



            <div class="col-md-8">

                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">

                        <ul class="list-unstyled m-0 p-0">
                            @foreach ($errors->all() as $error)
                                <li>
                                    {{ $error }}
                                </li>
                            @endforeach

                        </ul>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                    </div>
                @endif




                <div class="card">
                    <div class="card-header"><strong>Edit Item</strong></div>
                    <div class="card-body">
                        <a class="btn btn btn-outline-info  mb-3" href="{{ url()->previous() }}"><i
                                class="bi bi-skip-backward-circle pr-1"></i> Back</a>

                        <form method="POST" action="{{ url('item/update/' . $item->id) }}" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="form-group row">
                                <label for="name" class="col-sm-4 col-form-label">Name : </label>
                                <div class="col-sm-8">
                                    <input type="text" name="name" class="form-control" value="{{ $item->name }}">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="name" class="col-sm-4 col-form-label">Min Quantity : </label>
                                <div class="col-sm-8">
                                    <input type="number" name="min_qty" class="form-control" value="{{ $item->min_qty }}">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="name" class="col-sm-4 col-form-label">Max Quantity : </label>
                                <div class="col-sm-8">
                                    <input type="number" name="max_qty" class="form-control" value="{{ $item->max_qty }}">
                                </div>
                            </div>



                            <div class="form-group row">
                                <label for="name" class="col-sm-4 col-form-label">Note : </label>
                                <div class="col-sm-8">
                                    <textarea class="form-control" name="note" id="" cols="30" rows="4">{{ $item->note }}</textarea>
                                </div>
                            </div>


                            <div class="form-group row">
                                <label for="name" class="col-sm-4 col-form-label">Picture : </label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="file" name="picture" id="picture">
                                    <img class="img img-thumbnail mt-3" id="picture_preview"
                                        src="{{ $item->image_name == null || $item->image_name == '' ? asset('storage/images/default/sample-image-document.jpg') : asset('storage/' . $item->image_name) }}"
                                        alt="" width="200" height="200">
                                    <div>
                                        <input type="checkbox" class="form-contorl mt-3" id="picture_remove"
                                            name="picture_remove"
                                            {{ $item->image_name == null || $item->image_name == '' ? 'disabled' : '' }}>
                                        <label class="form-check-label col-form-label text-danger"
                                            for="picture_remove">Remove Image</label>
                                    </div>

                                </div>
                            </div>



                            <div class="form-group row">
                                <label for="name" class="col-sm-4 col-form-label"> </label>
                                <div class="col-sm-8">

                                       <div class="d-flex gap-2">
                                    <button class="btn btn-primary" id="btn-edit" type="submit"><i class="bi bi-pencil-square pr-1"></i>Update</button>
  </form>
   <form action="{{ url('item/delete/' . $item->id) }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button class="btn btn-danger btn-delete" type="submit"><i class="bi bi-trash3 pr-1"></i>Delete</button>
                        </form>

                                </div>

                      


                     

                    </div>
                    </div>



                </div>
            </div>



        </div>
        <div class="col-md-4"></div>
    </div>



    </div>
@endsection

@section('script')
    <script>
        // document 6 before upload
        document.getElementById('picture').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const preview = document.getElementById('picture_preview');
                preview.src = URL.createObjectURL(file);
                preview.style.display = "block";
            }
        });


        //edit confirmation message
        $('#btn-edit').click(function(e) {
            e.preventDefault();
            var form = $(this).closest('form');
            //alert('aaa');
            Swal.fire({
                title: "Are you sure to update item data ?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, update it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    // Swal.fire({
                    //   title: "Deleted!",
                    //   text: "Your file has been deleted.",
                    //   icon: "success"
                    // });
                    form.submit();
                }
            });

        });


     //delete confirmation message
        $('.btn-delete').click(function(e) {
            e.preventDefault();
            var form = $(this).closest('form');
            //alert('aaa');
            Swal.fire({
                title: "Are you sure to delete item data ?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    // Swal.fire({
                    //   title: "Deleted!",
                    //   text: "Your file has been deleted.",
                    //   icon: "success"
                    // });
                    form.submit();
                }
            });

        });

    </script>
@endsection