@extends('layouts.layoutDashboard')

@section('title')
    Ajouter un utilisateur
@stop

@section('stylesheets')
    <link rel="stylesheet" href="/assets/libs/filepond/filepond.min.css">
    <link rel="stylesheet" href="/assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.css">
    <link rel="stylesheet" href="/assets/libs/vanillajs-datepicker/css/datepicker.min.css">
    <link rel="stylesheet" href="/assets/libs/mobius1-selectr/selectr.min.css">

    <style type="text/css">
        .error {
            color: red;
        }
    </style>
@stop


@section('javascripts')
    <script src="/assets/libs/filepond/filepond.min.js"></script>
    <script src="/assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js"></script>
    <script src="/assets/libs/vanillajs-datepicker/js/datepicker-full.min.js"></script>
    <script src="/assets/libs/mobius1-selectr/selectr.min.js"></script>
    <!-- JAVASCRIPTS -->
    <script>       

        var elem = document.querySelector('input[name="foo"]');
        new Datepicker(elem, {
        // ...options
        }); 
        new Selectr('#sizing',{
            taggable: true,
            tagSeperators: [",", "|"]
        });
    </script>
@stop


@section('content')


<div class="ltr:flex flex-1 rtl:flex-row-reverse">
    <div class="page-wrapper relative ltr:ms-auto rtl:me-auto rtl:ms-0 w-[calc(100%-260px)] px-4 pt-[64px] duration-300">
        <div class="xl:w-full">        
            <div class="flex flex-wrap">


                <div class="flex items-center py-4 w-full">

                    <div class="w-full">                    
                        <div class="">
                            <div class="flex flex-wrap justify-between">
                                <div class="items-center ">
                                    <h1 class="font-medium text-3xl block dark:text-slate-100">Ajouter un compte utilisateur</h1>
                                    <ol class="list-reset flex text-sm">
                                        <li><a href="#" class="text-gray-500 dark:text-slate-400">Facturation</a></li>
                                        <li><span class="text-gray-500 dark:text-slate-400 mx-2">/</span></li>
                                        <li class="text-gray-500 dark:text-slate-400">Administration</li>
                                        <li><span class="text-gray-500 dark:text-slate-400 mx-2">/</span></li>
                                        <li class="text-primary-500 hover:text-primary-600 dark:text-primary-400">Ajouter utilisateur</li>
                                    </ol>
                                </div>
                                <div class="flex items-center">
                                    <div class="today-date leading-5 mt-2 lg:mt-0 form-input w-auto rounded-md border inline-block border-primary-500/60 dark:border-primary-500/60 text-primary-500 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-primary-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                                        <input type="text" class="dash_date border-0 focus:border-0 focus:outline-none" readonly  required="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--end container-->
    
        <div class="xl:w-full  min-h-[calc(100vh-138px)] relative pb-14"> 
            @livewire('add-user')


        </div><!--end container-->
    </div><!--end page-wrapper-->
</div><!--end /div-->
@stop