{{-- mainLayouts extends --}}
@extends('layouts.contentLayoutMaster')

{{-- Page title --}}
@section('title', 'Product Part Lists')

{{-- vendors styles --}}
@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/css/jquery.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css"
href="{{asset('vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css')}}">
@endsection

{{-- page styles --}}
@section('page-style')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/page-users.css')}}">
@endsection

@section('content')
<section class="users-list-wrapper section">
    <div class="users-list-table">
        <div class="card">
            <div class="row pl-1 pr-1">
                <h4 class="col s6"><b>Product Part</b></h4>
                <div class="input-field col s6">
                    <a href="{{route('admin.product-parts.create')}}" class="btn waves-effect waves-light right"><i class="material-icons left">list</i>Add Product Part</a>
                </div>
            </div>
            <div class="card-content">
                <!-- datatable start -->
                <div class="responsive-table">
                    <div class="center">
                        {{ $parts->links() }}
                    </div>
                    <table id="users-list-datatable" class="table responsive-table striped">
                        <thead class="grey lighten-2">
                            <tr>
                                <th>#</th>
                                <th>Product Name</th>
                                <th>Product Image</th>
                                <th>Description</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($parts as $key => $part)
                            <tr>
                                <td>{{ $key + $parts->firstItem()}}</td>
                                <td>{{ $part->model }}</td>
                                <td>
                                    <img src="{{ $part->images[0]->full_image ?? null}}" alt="part image" width="75">
                                </td>
                                <td width="40%">{{ $part->description }}</td>
                                <td>
                                    <div class="right">
                                        <i class="material-icons left mt-2">
                                            <a class="blue lighten-4 border-radius-button z-depth-1" href="{{route('admin.product-parts.edit',$part->id)}}" style="padding: 6px 10px;">edit</a>
                                        </i>
                                        <form action="{{ route('admin.product-parts.destroy', $part->id) }}" method="POST" onsubmit="return confirm('Are You Sure?');" style="display: inline-block;">
                                            <input type="hidden" name="_method" value="DELETE">
                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <button class="btn waves-effect waves-light red darken-2 border-radius-button" type="submit" style="padding: 0px 16px;"><i class="material-icons left">delete_forever</i>Delete</button>
                                        </form>
                                    </div>
                                </td>                                
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7">No Product Parts Found!</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                    <div class="center">
                        {{ $parts->links() }}
                    </div>
                </div>
                <!-- datatable ends -->
            </div>
        </div>
    </div>
</section>
<!-- merchants list ends -->        
@endsection