@extends("layouts.dashboard")

@section("style")
    <link href="{{asset("assets/plugins/datatable/css/dataTables.bootstrap5.min.css")}}" rel="stylesheet" />
    <link href="{{asset("assets/plugins/datetimepicker/css/classic.css")}}" rel="stylesheet" />
    <link href="{{asset("assets/plugins/datetimepicker/css/classic.time.css")}}" rel="stylesheet" />
    <link href="{{asset("assets/plugins/datetimepicker/css/classic.date.css")}}" rel="stylesheet" />
    <link rel="stylesheet" href="{{asset("assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.min.css")}}">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
@endsection
<div class="page-wrapper">
    <div class="page-content">
    <div class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">

            <div class="ps-3" style="padding-right: 10px">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route("home") }}"><i class="bx bx-home-alt"></i></a>
                        </li>
                    </ol>
                </nav>
            </div>
            <div class="breadcrumb-title pe-3">{{ $title ?? "Titre" }}</div>
        </div>
        @yield("table-wrapper")
    </div>
</div>


@section("script")
    <script src="{{asset("assets/plugins/datatable/js/jquery.dataTables.min.js")}}"></script>
    <script src="{{asset("assets/plugins/datatable/js/dataTables.bootstrap5.min.js")}}"></script>
    <script>
        $(document).ready(function() {
            $('#example').DataTable();
        } );
    </script>
    <script>
        $(document).ready(function() {
            var table = $('#example2').DataTable( {
                lengthChange: false,
                buttons: [ 'excel', 'pdf']
            } );

            table.buttons().container()
                .appendTo( '#example2_wrapper .col-md-6:eq(0)' );
        } );
    </script>
    <script src="{{asset("assets/plugins/datetimepicker/js/legacy.js")}}"></script>
    <script src="{{asset("assets/plugins/datetimepicker/js/picker.js")}}"></script>
    <script src="{{asset("assets/plugins/datetimepicker/js/picker.time.js")}}"></script>
    <script src="{{asset("assets/plugins/datetimepicker/js/picker.date.js")}}"></script>
    <script src="{{asset("assets/plugins/bootstrap-material-datetimepicker/js/moment.min.js")}}"></script>
    <script src="{{asset("assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.min.js")}}"></script>

    <script>
        $('.datepicker').pickadate({
            selectMonths: false,
            selectYears: false
        }),
            $('.timepicker').pickatime()
    </script>
    <script>
        $(function () {

            $('#date-time').bootstrapMaterialDatePicker({
                format: 'YYYY-MM-DD HH:mm'
            });
            $('#date').bootstrapMaterialDatePicker({
                time: false
            });
            $('#date1').bootstrapMaterialDatePicker({
                time: false
            });
            $('#time').bootstrapMaterialDatePicker({
                date: false,
                format: 'HH:mm'
            });
        });

        $(document).ready(function (e) {


            $('#image').change(function(){

                let reader = new FileReader();

                reader.onload = (e) => {

                    $('#preview-image-before-upload').attr('src', e.target.result);
                }

                reader.readAsDataURL(this.files[0]);

            });

        });

        window.setTimeout(function() {
            $("#success-alert").fadeTo(500, 0).slideUp(500, function(){
                $(this).remove();
            });
        }, 2000);

        $(document).ready(function(){
            $("#myTab a").click(function(e){
                e.preventDefault();
                $(this).tab("show");
            });
        });

    </script>

@endsection