@extends('admin.default')
@section('title', 'Admin | Permission')
@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{route('permission.index')}}">Permissions</a></li>
        <li class="breadcrumb-item">Create Permissions</li>

    </ol>
</nav>
<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <h6 class="card-title">Create Permissions</h6>
                <form action="{{route('permission.store')}}" method="post">
                    @csrf
                    <div class="row firstRow form-group" id="firstRow">
                        <div class="col-md-6">
                            <label for="permission">Permission</label>
                            <input type="text" name="permission[]" id="permission[]" class="form-control permissions">
                        </div>
                        <div class="col-md-6">
                            <label for="page">Page</label>
                            <select name="page[]" id="page[]" class="form-control pages">
                                @foreach($pages as $page)
                                <option value="{{$page->id}}">{{ucwords($page->name)}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div id="newRow">

                    </div>
                    <button type="button" class="btn btn-success" onclick="duplicateRow()">Add </button>
                    <input type="submit" value="Save" class="btn btn-primary">
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    function duplicateRow() {
        var formRow = $('#firstRow').clone(true);
        $('#newRow').append(formRow);
    }
</script>
@endsection