@extends('layouts.dashboard.app')
@section('style')
@endsection
@section('content')
    <div class="container mt-5">
        <h1>CRUD with Bootstrap Modal</h1>
        <button style="float: right" type="button" id="addUserBtn" class=" mt-3 btn btn-primary" >
            User
        </button>

        <table class="table">
            <thead>
                <tr>
                    <th>Categorie</th>
                    <th>Description</th>
                    <th>Operation</th>
                    <th>Type Reparation</th>
                    <th>Prix_unitaire_ht</th>
                    <th>QTe</th>
                    <th>Gravité</th>
                    <th>Etat</th>
                    <th>Vetusté</th>
                    <th>Remise</th>

                </tr>
            </thead>
            <tbody id="users-list">

            </tbody>
        </table>
    </div>
@endsection
@section('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        function addNewRow() {

            const newRow = "               <tr>
                <td > < select class = 'form-select'
            name = 'type'
            id = 'g' >
                <
                option value = 'Moyen' > Moyen < /option> <
                option value = 'Faible' > Faible < /option>

                <
                /select> <
                /td> <
                td >
                <
                input type = 'text'
            class = 'form-control'
            name = 'piece' >
                <
                /td> <
                td >
                <
                select class = 'form-select'
            name = 'operation'
            id = 'g' >
                <
                option value = 'Moyen' > Moyen < /option> <
                option value = 'Faible' > Faible < /option>

                <
                /select> <
                /td> <
                td >
                <
                select class = 'form-select'
            name = 'type'
            id = 'g' >
                <
                option value = 'Moyen' > Moyen < /option> <
                option value = 'Faible' > Faible < /option>

                <
                /select> <
                /td> <
                td >
                <
                input type = 'number'
            id = 'p'
            min = '0'
            name = 'prix_unitaire'
            class = 'form-control'
            id = 'p'
            value = '0' >
                <
                /td> <
                td class = 'col-2' >
                <
                input class = 'form-control'
            name = 'qte'
            id = 'id'
            min = '1' >
                <
                /td> <
                td >

                <
                select class = 'form-select'
            name = 'gravite'
            id = 'g' >
                <
                option value = 'Moyen' > Moyen < /option> <
                option value = 'Faible' > Faible < /option>

                <
                /select>


                <
                /td> <
                td >
                <
                select class = 'form-select'
            name = 'etat'
            id = '' >
                <
                option value = 'OUI' > OUI < /option> <
                option value = 'NON' > NON < /option> <
                /select> <
                /td> <
                td >
                <
                input type = 'number'
            name = 'vetuste'
            class = 'form-control'
            value = '0' >
                <
                /td> <
                td >
                <
                input type = 'number'
            name = 'remise'
            class = 'form-control'
            value = '0' >
                <
                /td>


                <
                /tr>";
            $('#users-list').append(newRow);
        }
        $('#addUserBtn').on('click', function() {
            addNewRow();
        });
    </script>
@endsection
