@extends('layouts.app')
@section('main-content')
<div class="container-fluid p-0">

    <nav class="page-breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('products') }}">Product List</a></li>
            <li class="breadcrumb-item">Update Product</li>
        </ol>
    </nav>

    <h1 class="h3 mb-3"><strong>Update</strong> Product</h1>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Update Product [{{ $product->name }}]</h5>
                </div>
                <div class="card-body">
                    @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                    <form id="forms-product" method="post" action="{{ route('products.update', $product->id) }}" enctype="multipart/form-data">
                        @csrf
                        @method('patch')
                        <div class="row mb-3">
                            <label for="name" class="col-sm-3 col-form-label"><strong>Name</strong></label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="name" name="name" placeholder="Product Name" required autofocus autocomplete="off" value="{{ $product->name }}">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="description" class="col-sm-3 col-form-label"><strong>Description</strong></label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="description" name="description" autocomplete="off" placeholder="Product Description" required autofocus value="{{ $product->description }}">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="description" class="col-sm-3 col-form-label"><strong>Category</strong></label>
                            <div class="col-sm-9">
                                <select class="form-control" id="category_id" name="category_id" required>
                                    <option value="">-- Select Category --</option>
                                    @foreach ($categories as $category)
                                    <option value="{{ $category->id }}" @selected($category->id === $product->category_id)>{{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="uom" class="col-sm-3 col-form-label"><strong>Unit of Measure</strong></label>
                            <div class="col-sm-9">
                                <select class="form-control" id="uom" name="uom" required>
                                    <option value="">-- Unit of Measure --</option>
                                    @foreach($uoms as $uom)
                                    <option value="{{ $uom->id }}" @selected($product->uom == $uom->id)>{{ $uom->description }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="unit_price" class="col-sm-3 col-form-label"><strong>Unit Price</strong></label>
                            <div class="col-sm-9">
                                <input type="number" min="1" step=".01" class="form-control" id="unit_price" name="unit_price" autocomplete="off" placeholder="Unit Price" required autofocus value="{{ $product->unit_price }}">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="threshold" class="col-sm-3 col-form-label"><strong>Min Stock</strong></label>
                            <div class="col-sm-9">
                                <input type="number" min="0" class="form-control" id="threshold" name="threshold" autocomplete="off" placeholder="Stock Threshold" autofocus value="{{ $product->threshold }}">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="status" class="col-sm-3 col-form-label"><strong>Status</strong></label>
                            <div class="col-sm-9">
                                <select class="form-control" id="status" name="status" required>
                                    <option value="">-- Status --</option>
                                    <option value="1" @selected($product->status == 1)>Active</option>
                                    <option value="0" @selected($product->status == 0)>Not Active</option>
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="photo" class="col-sm-3 col-form-label"><strong>Picture</strong></label>
                            <div class="col-sm-9">
                                <input type="file" class="form-control" id="photo" name="photo">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="photo" class="col-sm-3 col-form-label">&nbsp;</label>
                            <div class="col-sm-6">
                                <img class="img-thumbnail rounded" src="{{ (!empty($product->photo)) ? url('assets/upload/images/products/'.$product->photo) : asset('assets/img/no-image.png') }}" alt="Product picture" id="show-image">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-sm-3 offset-sm-3 d-flex">
                                <button type="submit" class="btn btn-primary me-2">
                                    <i class="align-middle" data-feather="save"></i><span class="align-middle"> Update</span>
                                </button>
                    </form>
                    <form action="{{ route('products.destroy', $product->id)}}" method="post">
                        @csrf
                        @method("DELETE")
                        <a href="{{ route('products.destroy', $product->id)}}" class="btn btn-danger me-2" data-confirm-delete="true">
                            <i class="align-middle me-1" data-feather="trash-2"></i>Delete
                        </a>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection
@section('script')
<script type="text/javascript">
    $(document).ready(function() {
        $('#photo').change(function(e) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#show-image').attr('src', e.target.result);
            }
            reader.readAsDataURL(e.target.files['0']);
        });
    })
</script>
@endsection