@extends("admin.layout.base")
@extends("admin.layout.header")

@section("title")
    Rolle - Opret
@endsection

@section("path")
    <a href="{{ route('roles.create') }}" class="text-white">Opret Rolle</a> /
@endsection

@section("content")
    <style>
        td > p, td > input {
            margin: 0;
        }
    </style>
    <h1 id="errormesseages" >Opret Rolle:</h1>
    <form method="post" action="{{ route("roles.store") }}">
        @csrf
        <label for="name">Navn:</label>
        <label hidden id="error" for="errormesseages">Rolle navnet findes allerede</label>
            <input type="text" name="name" id="name" placeholder="Admin" required>
        <label for="name">Beskrivelse:</label>
            <input type="text" name="description" id="description" placeholder="Admin rollen bruges til administratorene" required>
        <table class="tbl mt-2 mb-2">
            <tr>
                <td>Konto</td>
                <td>Beskrivelse</td>
                <td>Se Account</td>
                <td>Ændre Billede</td>
                <td>Ændre Oplysninger</td>
                <td>Ændre Password</td>
                <td>Forgot Password</td>
            </tr>
            <tr>
                <td>Konto</td>
                <td>Empty</td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
            </tr>
        </table>
        <table class="tbl mt-2 mb-2" >
            <tr><!--Header Start-->
                <td>Side</td>
                <td>Beskrivelse</td>
                <td>Create</td>
                <td>Read</td>
                <td>Update</td>
                <td>Delete</td>
                <td>Fuld Kontrol</td>
            </tr><!--Header Slut-->
            <tr><!--Bruger Start-->
                <td>Brugere</td>
                <td><p>Empty</p></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
            </tr><!--Bruger Start-->
            <tr>
                <td>Roller</td>
                <td><p>Empty</p></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
            </tr>
            <tr>
                <td>Nyheder</td>
                <td><p>Empty</p></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
            </tr>
            <tr>
                <td>Menuplan</td>
                <td><p>Empty</p></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
            </tr>
            <tr>
                <td>Aktiviteter</td>
                <td><p>Empty</p></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
            </tr>
            <tr>
                <td>Lokation</td>
                <td><p>Empty</p></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
            </tr>
            <tr>
                <td>Vaskemaskiner</td>
                <td><p>Empty</p></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
            </tr>
            <tr>
                <td>Resevationer</td>
                <td><p>Empty</p></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
            </tr>
            <tr>
                <td>Kontakter</td>
                <td><p>Empty</p></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
            </tr>
            <tr>
                <td>Vejledning</td>
                <td><p>Empty</p></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
            </tr>
            <tr>
                <td>Feedback</td>
                <td><p>Empty</p></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
                <td><input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"></td>
            </tr>
        </table>
        <input type="submit" id="disable" class="btn btn-dark text-white" value="Opret">
    </form>
@endsection
@section("scripts")
    <script>
        $(function() {
            $('form').areYouSure(
                {
                    message: 'It looks like you have been editing something. '
                        + 'If you leave before saving, your changes will be lost.'
                }
            );
        });

        $(document).ready(function () {
            $value = $('#name').val();
            $.ajax({
                type: 'get',
                url: '{{route('roles.nameCheck')}}',
                data: {'nameCheck':$value},
                success:function (data) {
                    if(data){
                        $("#error").show(100);
                        $("#error").css('color', 'red');
                        $("#disable").prop('disabled', true);
                        $('#disable').css('cursor','not-allowed');
                    }else{
                        $("#error").hide();
                        $("#disable").prop('disabled', false);
                        $('#disable').css('cursor','pointer');
                    }

                },
                error:function (data) {
                    console.log(data);
                }
            });
        });

        $('#name').on('keyup', function () {
            $value = $(this).val();
            $.ajax({
                type: 'get',
                url: '{{route('roles.nameCheck')}}',
                data: {'nameCheck':$value},
                success:function (data) {
                    if(data){
                        $("#error").show(100);
                        $("#error").css('color', 'red');
                        $("#disable").prop('disabled', true);
                        $('#disable').css('cursor','not-allowed');
                    }else{
                        $("#error").hide();
                        $("#disable").prop('disabled', false);
                        $('#disable').css('cursor','pointer');
                    }

                },
                error:function (data) {
                    console.log(data);
                }
            });
        })
    </script>
@endsection