@extends('layouts.admin.admin')
@section('title', 'Product Detail')

@section('content')
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>Product Detail</h3>
                </div>
                <a class="btn btn-warning ink-reaction btn-sm" href="{{ route('product.edit', $product->id) }}">
                    <i class="mdi mdi-pencil"></i>
                    Edit
                </a>
                <a class="btn btn-success ink-reaction btn-sm" href="{{ route('product.create') }}">
                    <i class="mdi mdi-plus"></i>
                    Add
                </a>
                <div class="card-body">
                    <table class="table table-bordered">
                        <tr>
                            <th>Name</th>
                            <td>{{ $product->name }}</td>
                        </tr>
                        <tr>
                            <th>SKU</th>
                            <td>{{ $product->sku }}</td>
                        </tr>
                        <tr>
                            <th>Description</th>
                            <td>{{ $product->description }}</td>
                        </tr>
                        <tr>
                            <th>Image</th>
                            <td><img src="{{$product->image_path}}" alt="" width="100px"></td>
                        </tr>
                        <tr>
                            <th>Sort</th>
                            <td>{{ $product->sort }}</td>
                        </tr>
                        <tr>
                            <th>Status</th>
                            <td>{!! statusHtml($product->status) !!}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>Product Sizes</h3>
                </div>
                <a class="btn btn-success ink-reaction btn-sm" href="{{ route('product-size.add', $product->id) }}">

                    Add New Product Size <i class="mdi mdi-plus"></i>
                </a>
                <div class="card-body">
                    <div class="table-responsive">

                        <table id="datatable" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Size</th>
                                    <th>Sort</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-specific-scripts')
    <script>
        $(document).ready(function() {
            $('#datatable').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": '{{ route('product-size.data', $product->id) }}',
                dom: 'Bfrtip',
                buttons: [{
                    extend: 'excel',
                    text: 'Export Search Results',
                    className: 'btn btn-default',
                    exportOptions: {
                        columns: 'th:not(:last-child)'
                    }
                }],
                "columns": [{
                        "data": "id",
                        'visible': false
                    },
                    {
                        "data": "size"
                    },
                    {
                        "data": "sort"
                    },
                    {
                        "data": "status"
                    },
                    {
                        "data": "actions",
                        orderable: false,
                        searchable: false
                    },
                ],
                order: [
                    [0, 'desc']
                ]
            });
        });
    </script>
@endsection