@extends('bo.layout')
@section('content')
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Toolbar-->
    <div class="toolbar" id="kt_toolbar">
        <!--begin::Container-->
        <div id="kt_toolbar_container" class="container-fluid d-flex flex-stack">
            <!--begin::Page title-->
            <div data-kt-place="true" data-kt-place-mode="prepend" data-kt-place-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}" class="page-title d-flex align-items-center me-3 flex-wrap mb-5 mb-lg-0 lh-1">
                <!--begin::Title-->
                <h1 class="d-flex align-items-center text-dark fw-bolder my-1 fs-3">Gestions des produits</h1>
                <!--end::Title-->
                <!--begin::Separator-->
                <span class="h-20px bproduct-gray-200 bproduct-start mx-4"></span>
                <!--end::Separator-->
                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-separatorless fw-bold fs-7 my-1">
                    <!--begin::Item-->
                    <li class="breadcrumb-item text-muted">
                        <a href="{{route('bo.home')}}" class="text-muted text-hover-primary">Accueil</a>
                    </li>
                    <!--end::Item-->
                    <!--begin::Item-->
                    <li class="breadcrumb-item">
                        <span class="bullet bg-gray-200 w-5px h-2px"></span>
                    </li>
                    <!--end::Item-->
                    <!--begin::Item-->
                    <li class="breadcrumb-item text-muted">
                        <a href="{{route('bo.products.list')}}" class="text-muted text-hover-primary">Produits</a>

                    </li>

                    <!--end::Item-->
                    <!--begin::Item-->

                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page title-->
        </div>
        <!--end::Container-->
    </div>
    <!--end::Toolbar-->
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container">
            <form action="{{route('bo.products.new')}}" method="post">
                @csrf
                <label for="new-name">Nouveau produit : </label> <input type="text" name="name" id="new-name"/>
                <button class="btn btn-primary">Créer</button>
            </form>
        </div>
    </div>

    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container">

            <table class="datatable-ajax table table-striped">
                <thead>
                <tr>
                    <th>Id</th>
                    <th>Nom</th>
                    <th>Ref</th>
                    <th>Prix</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
                </thead>

            </table>

        </div>
    </div>

</div>
@endsection

@section('extra-javascript')
<script type="text/javascript">

    $(document).ready(function () {
        var datatable = $('.datatable-ajax').DataTable({
            ajax: {
                url:'{{route('bo.products.ajax')}}',
                data:  function ( d ) {

                    let filters = {};
                    $('.datatable-filter').each(function (){
                        const $filter = $(this);
                        if($filter.val() !== ''){
                            filters[$filter.attr('name')] = $filter.val()
                        }
                    })


                    return $.extend( {}, d,filters);
                }
            },
            serverSide: true,
            "columns": [
                { "data": "id" },

                { "data": "name" },
                { "data": "ref" },
                { "data": "price" },
                { "data": "status" },
                { "data": "link",
                    render: function (data, type){
                        return '<a class="btn btn-primary" href="'+data+'">Voir</a>';
                    }
                }
            ]
        });
    });

</script>
@endsection