@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 offres</h1>
                <!--end::Title-->
                <!--begin::Separator-->
                <span class="h-20px border-gray-200 border-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.offers.list')}}" class="text-muted text-hover-primary">Offres</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">

            <table class="datatable-ajax table table-striped" data-page-length='100'>
                <thead>
                <tr>
                    <th>Id</th>
                    <th>Date</th>
                    <th>Utilisateur</th>
                    <th>Type</th>
                    <th>Prix</th>
                    <th>Produit</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.offers.ajax')}}',
                cache: false,
                contentType: "application/json; charset=utf-8",
                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": "date" },
                { "data": "user", render(data, type){
                    return "<a href='" + data.route+"' target='_blank'>"+data.name+"</a>";
                } },
                { "data": "type" },
                { "data": "price" },
                { "data": "product" , render(data, type){
                        return "<a href='" + data.route+"' target='_blank'>"+data.name+" | " + data.label +"</a>";
                    } },
                { "data": "status" },
                /*{ "data": "link",
                    render: function (data, type){
                    console.log(data)
                        return '<a class="btn btn-primary" href="'+data+'">Voir</a>';
                    }
                }*/
            ]
        });
    });

</script>
@endsection