@extends('dashboard.layout.partials.dashboard')
<style>
.table th img, .table td img {
    width: 125px;
    height: 125px;
    border-radius: 0% !important;
}

</style>
@section('content')
<div class="form-group row">
    <div class="col-sm-12">
        @if ($errors->any())
            <div class="alert " style="background-color:rgb(153, 51, 0); color:white">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>
    <div class="col-sm-12">
        @if (session()->has('message'))
            <div class="alert alert-success">
                {{session('message')}}
            </div>
        @endif
    </div>
    <div class="col-sm-12">
        @if (session()->has('hasError'))
            <div class="alert alert-danger">
                {{session('hasError')}}
            </div>
        @endif
    </div>
</div>


  <div class="card shadow">
           <div class="card-header bg-color">
        <div class="row">
        <div class="col ">
          <h3 class="text">Products </h3>
        </div>
        <div class="col d-flex justify-content-end ">
          	<a class="btn btn-secondary btn-sm" href="{{route('products.create')}}">Add Product</a>
        </div>
        </div>
      </div>
           <div class="card-body ">
                  <div class="table-responsive">
                  	  <table class="table table-striped myTable">
                      <thead>
                        <tr>
                          <th> Product Name </th>
                          <th> Quantity </th>
                          <th> Price </th>
                          <th> Category </th>
                          <th> Image </th>
                          <th> Created at </th>
                          <th> Edit </th>
                          <th> Delete </th>
                        </tr>
                      </thead>
                      <tbody>
                         
                       @foreach($product as $products)
                       <tr>
                       	<td>{{$products->product_name}}</td>
                       	<td>{{$products->qty}}</td>
                       	<td>{{$products->price}}</td>
                       	@php  $category=App\Models\SubRole::where('id',intval($products->category))->first(); @endphp
                       	<td>{{$category->sub_role_name}}</td>
                @php
                  $images=$products->product_image;
                  if($images){
                    $images=json_decode($images);
                  }
                   $current_url = "http" . (isset($_SERVER['HTTPS']) ? "s" : "") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
                   $parsed_url = parse_url($current_url);
                   $base_url = $parsed_url['scheme'] . '://' . $parsed_url['host'];
                  @endphp
                  @if($images)
                 <td><img src="{{ $base_url.'/FuturePartsLaravel/storage/app/public/image/futureParts/' . $images[0] }}" width='100' height='100' class='img-fluid' /></td>
                  @else
                  <td>N/A</td>
                  @endif 
                   
                       	<td>{{$products->created_at}}</td>
                       	<td><a class="btn btn-sm btn-inverse-success" href="{{route('products.edit',$products->id)}}">Edit</a> </td>
                       	<td> <a class="btn btn-sm btn-inverse-danger" href="{{url('products/delete',$products->id)}}">Delete</a> </td>
                       </tr>
                       @endforeach
                      	
                      </tbody>
                    </table>
                    </div>
                  </div>
    </div>
              
              

@endsection

@section('javascript')

<script>
	
    //data-table work
        $(document).ready( function () {
            $('.myTable').DataTable();
        } );
     

</script>
<style>
    .bg-color{
        background-color:white;
        padding-top:20px;
    }
    .text{
        font-size: 24px; 
        font-family: "Arial", sans-serif; 
    font-weight: bold;
    color:black;
    font-family: "Arial", sans-serif; 
    }
</style>
@endsection