@extends('layouts.master')
@section('title')
    @lang('translation.User_List')
@endsection

@section('content')
    @component('common-components.breadcrumb')
        @slot('pagetitle') Products @endslot
        @slot('title') Products Add @endslot
    @endcomponent
    @livewireStyles <!-- Add this line to enable Livewire styles -->

    <div class="row">

    <div class="col-lg-12">
    <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Add New Product</h4>
                    <p class="card-title-desc">Your input will be in the second page.</p>
                    
                  
                    <form action="{{ url('product/update/'.$Product->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf 
                    <form class="needs-validation" novalidate>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label" for="validationCustom01">Name</label>
                                    <input name="title" type="text" class="form-control" id="validationCustom01" placeholder="Catalog Link"
                                        value="{{$Product->title}}" required>
                                    <div class="valid-feedback">
                                        Looks good!
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label" for="validationCustom01">Name AR </label>
                                    <input name="title_ar" type="text" class="form-control" id="validationCustom01" placeholder="Name AR"
                                        value="{{$Product->title_ar}}" required>
                                    <div class="valid-feedback">
                                        Looks good!
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label" for="validationCustom01">Description </label>
                                    <input name="description" type="text" class="form-control" id="validationCustom01" placeholder="Description"
                                        value="{{$Product->description}}" required>
                                    <div class="valid-feedback">
                                        Looks good!
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label" for="validationCustom01">Description Ar</label>
                                    <input name="description_ar" type="text" class="form-control" id="validationCustom01" placeholder="Description"
                                        value="{{$Product->description_ar}}" required>
                                    <div class="valid-feedback">
                                        Looks good!
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label" for="validationCustom01">Price </label>
                                    <input name="price" type="double" class="form-control" id="validationCustom01" placeholder="Price"
                                        value="{{$Product->price}}" required>
                                    <div class="valid-feedback">
                                        Looks good!
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                        <div class="mb-3 col-lg-2">
                         
                        <label class="form-label" for="resume">Image:</label>
                        <input name="product_image" onchange="loadFile(event)" class="form-control" type="file" id="formFile" />
                    </div>
                </div>      
                        
                        <div class="row">
                            
                        <div class="mb-3 col-lg-2">
                        <button class="btn btn-primary" type="submit">Submit form</button>
                            </div>
                        </div>
                        
                    </form>
                    </form>
                  
              
                    
                </div>
            </div>
   

    </div>
    </div>
<script>
  var loadFile = function(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>
    <!-- end row -->
@livewireScripts <!-- Add this line to enable Livewire scripts -->
@endsection
    @section('script')
    <script src="{{ URL::asset('/assets/libs/parsleyjs/parsleyjs.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/datatables/datatables.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/jszip/jszip.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/pages/datatables.init.js') }}"></script>
@endsection