@extends('products.layout')

@section('content')

<div class="card mt-5">
  <h2 class="card-header">Edit Product</h2>
  <div class="card-body">

    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
        <a class="btn btn-primary btn-sm" href="{{ route('products.index') }}"><i class="fa fa-arrow-left"></i> Back</a>
    </div>

    <form action="{{ route('products.update',$product->id) }}" method="POST">
        @csrf
        @method('PUT')

        <div class="mb-3">
            <label for="inputName" class="form-label"><strong>Name:</strong></label>
            <input
                type="text"
                name="name"
                value="{{ $product->name }}"
                class="form-control @error('name') is-invalid @enderror"
                id="inputName"
                placeholder="Name">
            @error('name')
                <div class="form-text text-danger">{{ $message }}</div>
            @enderror
        </div>

       <div class="mb-3">
            <label for="inputSku" class="form-label"><strong>Sku:</strong></label>
            <input
                type="text"
                name="sku"
                value="{{ $product->sku }}"
                class="form-control @error('sku') is-invalid @enderror"
                id="inputSku"
                placeholder="Sku">
            @error('sku')
                <div class="form-text text-danger">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="inputDetail" class="form-label"><strong>Detail:</strong></label>
            <textarea
                class="form-control @error('detail') is-invalid @enderror"
                style="height:150px"
                name="detail"
                id="inputDetail"
                placeholder="Detail">{{ $product->detail }}</textarea>
            @error('detail')
                <div class="form-text text-danger">{{ $message }}</div>
            @enderror
        </div>
       <div class="mb-3">
            <label for="inputImg" class="form-label"><strong>Image:</strong></label><br>
            @if (session('success'))
                <img src="{{ asset('uploads/' . session('image')) }}" alt="Product Image" width="200" style="margin:10px; cursor:pointer;" onclick="uploadEnable()">
                <br>
                <label>File: </label>
                <input name="img" id="inputImg" value="{{ session('image') }}" readonly>
            @elseif($product->img)
                <img src="{{ asset('uploads/' . $product->img) }}" alt="Product Image" width="200" style="margin:10px; cursor:pointer;" onclick="uploadEnable()">
                <br>
                <label>File: </label>
                <input name="img" id="inputImg" value="{{ $product->img }}" readonly>
            @endif
            @error('img')
                <div class="form-text text-danger">{{ $message }}</div>
            @enderror
        </div>
        @session('success')
            <div class="alert alert-success" role="alert"> {{ $value }} </div>
        @endsession
       @if(session('error'))
           <div class="error">
               {{ session('error') }}
           </div>
       @endif
        <button type="submit" class="btn btn-success"><i class="fa-solid fa-floppy-disk"></i> Update</button>
    </form>
    <div id="imgUpload" style="display:none">
           <form action="{{ route('products.uploadImg')}}" method="POST" enctype="multipart/form-data">
           @csrf
           <input type="text" name="pid" value={{ $product->id }} style="display:none">
           <label for="image">Choose an Image:</label>
           <input type="file" name="image" id="image" required>
           <button type="submit">Upload</button>
       </form>
    </div>

  </div>
</div>
@endsection