@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 clients</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.customers.list')}}" class="text-muted text-hover-primary">Clients</a>

                    </li>
                    <!--end::Item-->

                    <!--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">
            <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Lastname</th>
                <th>Email</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.customers.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": "lastname" },
                { "data": "email" },
                { "data": "status" },
                { "data": "link",
                    render: function (data, type){
                    console.log(data)
                        return '<a class="btn btn-primary" href="'+data+'">Voir</a>';
                    }
                }
            ]
        });
    });

</script>
@endsection